weixin_39587238
weixin_39587238
2020-12-03 00:10

JSfiddle boilerplate

Expected behavior

I think it would be good to have a JSfiddle example in the docs for more complex tests/examples/etc...

Actual behavior

There's none, but I just made this: https://jsfiddle.net/gtdc4oma/

Feedback appreciated.

该提问来源于开源项目:json-editor/json-editor

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

21条回答

  • weixin_39867708 weixin_39867708 5月前

    Looks good to me, i like it ;)

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    I had to switch back to using the obsolete document.write() to create the iframe content. (The recommended way of using a blob prevented window.location from returning useful values. See my test here: https://codepen.io/pmk/pen/wOwoyW) This solved most of the issues I had, like $refs not being expanded correctly. Now I'm down to just 2 examples that doesn't work correctly.

    1) ACE Editor - This one I can't even get to work in a stand-alone document. (There's no ACE Editor examples in the "docs/" folder either.)

    2) Advanced example - This one works partly, but gives a validation error (The original advanced demo doesn't) and when selecting "Basic Person", the "citystate" field (Template field) is not "readonly" and doesn't update when "city" or "state" is updated. Only difference from the original schemas, is that I have added "examples/" to the $refs paths. (As the schemas are located in the "examples" folder.)

    If you got any idea on how to fix the "Advanced example" problems, let me know.

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    I got the "Advanced Example" to work. So now I have re-created ALL the examples from the docs/ folder 100% or better 😄 I have also added a lot of other examples. Some general JSON Schemas, some specific for JSON-Editor (Editor examples) and various JavaScript examples.

    If you think there's some features not covered in the examples or got some interesting examples of your own, please post them on the Playground repo and I'll add them to the list.

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    I'm currently working on an updated Interactive Demo with the option to change the initializing code. (A bit like CodePen/JSfiddle) and using the ACE Editor for the JavaScript/JSON input areas.

    Here's what I'm doing so far: 1) Change the overall layout to use a tabbed page switching system. That way you don't have to scroll up/down all the time. This would be something like:

    Main - The generated form + Output + Validation. Input - The schema and editor initialization code. Config - The various config options.

    2) Add a textarea (ACE Editor) with the editor initialization code (and schema). So that the user can create a custom setup if needed. Currently, you can only change/edit the schema.

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    I got a couple examples on Codepen, but most of them are outdated as I have implemented the features directly into the lib or added the info to the Wiki.

    点赞 评论 复制链接分享
  • weixin_39587238 weixin_39587238 5月前

    I though about exactly the same things :smiley: go ahead, I am looking forward to see it.

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    I still haven't decided on the layout. (Design isn't my strong side. 😁)

    Either it's going to be Tabs styled, similar to this: https://tympanus.net/Blueprints/FullWidthTabs/ So that form, config & schema/javascript each have its own tab.

    Or using sliding panels, similar to this: https://github.com/CodyHouse/slide-in-panel or https://github.com/karenpommeroy/toolslide.js/ So that the form is in the "main" area and config & schema/javascript is in panels.

    Which do you prefer? Or do you have any (better) ideas?

    点赞 评论 复制链接分享
  • weixin_39587238 weixin_39587238 5月前

    A combination :) Two Sliding panels with tabs inside.

    Schema + JS | Editor + JSON Output + Options

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    A combination :) Two Sliding panels with tabs inside.

    Schema + JS | Editor + JSON Output + Options

    Yeah. I discovered that Tabs alone is equally as annoying as scrolling. 💩

    You can see my 1st Tabs attempt here: https://pmk65.github.io/jedemov2/dist/demo.html (Very limited features so far, but you can create/edit schema/javascript and generate the form.)

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    Almost done with the code (layout still sucks 😁) Just need to code the updating of form from the config options. I want to move the output to an iframe instead of injecting it on the current page. Like a "sandbox" That way there won't be any CSS clashes when using different frameworks. But iframes is a pain styling for dynamic content so that there doesn't appear more than one scrollbar.

    点赞 评论 复制链接分享
  • weixin_39587238 weixin_39587238 5月前

    It's absolutely the right way.

    CC: WDYT?

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    I got the Iframe setup working now. See this example which uses external library (Flatpickr).

    Just a couple minor things left to do, like move/restyle the config options into a sliding panel instead of the Tab. And improve the "load schema" feature, so it can load schema, startval and javascript. (That way all the examples in the docs folder can be included as schema files)

    点赞 评论 复制链接分享
  • weixin_39587238 weixin_39587238 5月前

    That's looking pretty slick!

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    I have now moved the config options into a sliding panel (currently controlled by CSS, but I think some JS is needed to prevent it from accidentally closing) I probably do the same for the output values of the form.

    I also created an example (Cleave) that uses the JavaScript from the Code editor to regenerate the form after injecting a custom javascript into the schema.

    点赞 评论 复制链接分享
  • weixin_39587238 weixin_39587238 5月前

    Please feel free to add it to this repo, so we can have it on https://json-editor.github.io/json-editor/

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    Please feel free to add it to this repo, so we can have it on https://json-editor.github.io/json-editor/

    Will do once I'm satisfied with the result. 😉 I'm trying to recreate all the demo examples using the editor, but some I haven't got working yet. I suspect that it's because I'm using "latest" version of the external scripts, and some editors, like SCEditor doesn't like that as the scripts have different names than before (So they might be completely new versions) And there's still some styling that needs to be done.

    I just added another feature to the JavaScript part. Now you can use a custom "include" inside comments to load additional CSS and/or JavaScript. (Try the "Typeahead" example, which loads 3 extra JavaScript/Stylesheet) That way it's easy to include additional JS/CSS (Since nothing is submitted, it doesn't matter if anyone tries to include "harmful" code.)

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    Take a look at the latest version and see if there's anything you think is missing. I just added the missing output and validation displays. And now you can download and upload testing examples too. I think I got everything covered now, but an extra set of eyes always help. 😄

    点赞 评论 复制链接分享
  • weixin_39587238 weixin_39587238 5月前

    Pretty awesome!

    The only thing is that I needed a bit to understand that I had to regenerate the form after changing options.

    CC: - any feedback from your side: https://pmk65.github.io/jedemov2/dist/demo.html

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    Pretty awesome!

    The only thing is that I needed a bit to understand that I had to regenerate the form after changing options.

    CC: - any feedback from your side: https://pmk65.github.io/jedemov2/dist/demo.html

    I'm going to change the options panel so that it stays open until you click outside it (or on a close button). And once it closes the form will regenerate.

    Direct links is also a bit nicer now as I convert them to shorturls. They look like this now: https://is.gd/kClzFU

    点赞 评论 复制链接分享
  • weixin_39587238 weixin_39587238 5月前

    Direct links is also a bit nicer now as I convert them to shorturls. They look like this now: https://is.gd/kClzFU

    Could we make this optional or additional?

    While this feature is cool it is an additional service which might not be available in the future (#268)

    点赞 评论 复制链接分享
  • weixin_39844426 weixin_39844426 5月前

    The problem is with the extra JavaScript, CSS etc., the URL get's REALLY long. https://is.gd (and it's sub site https://v.gd) is a GITHub project and have been running for quite some time. So I think it's safe to use. If you run the Playground locally, it will use the longurl instead of the short one. But I'll modify the shorturl copy to clipboard dialog, so you have the option between the shorturl and the original url. I made a pen for the my new slide-in menu function/layout: https://codepen.io/pmk/pen/zeVEWX But I'm still not sure if the panel should be triggered by a click on a button (like on the pen) or by hovering over a trigger on the left side of the screen (Like the current playground panel)

    点赞 评论 复制链接分享

相关推荐