810068 - Build a CKEditor plugin for creating and editing live examples

Status: VERIFIED FIXED

(developer.mozilla.org Graveyard :: Editing, defect)

Description

[John Karahalis [:openjck]]

This is a subtask of bug 797480. For more information, contact David (cc'd).

Comment 1

[Les Orchard [:lorchard]]

FWIW, this is relatively easy right now with CKEditor, but could be made easier:

* Insert a header to create a section.
* Insert code listings, 1 of each styled for HTML, CSS, and JS.

The hard part is constructing & inserting the <iframe> that includes the live sample by ID. Here's an example page with a sample on dev: 

https://developer-dev.allizom.org/en-US/docs/User:lmorchard/TestCodeSample

I cheated a bit there, by creating the {{ EmbedLiveSample("id") }} template to make insertion easier.

Comment 2

[David Walsh :davidwalsh]

I'm a bit confused as to what exactly this button is meant to do.  Looking at your comment above, and the sample code in your TestCodeSample, the button should:

*  Inject a H2 heading element, providing it an ID for use in an IFrame template
*  Create three PRE elements (HTML, CSS, JS)

That stuff makes sense, though providing an ID right away could be problematic, but I'll figure that out.

You mentioned that you were "cheating" by creating an EmbedLiveSample template, passing it the code sample ID.  Creating a template and passing it the ID seems perfectly reasonable to me.  Doing so will allow us to add wrapping HTML / info to all demos, and provides one central controller for all demos.  

Am I missing anything Les?

Comment 3

[David Walsh :davidwalsh]

What if I did this?

1.  Added new button.
2.  Popup window launches with 4 sections:  "Heading" (textbox), "HTML" (ACE editor), "JS" (ACE editor), "CSS" (ACE editor)
3.  Upon submission, items are injected into the WYSIWYG.

Thoughts here?

Comment 4

[Les Orchard [:lorchard]]

(In reply to David Walsh :davidwalsh from comment #2)
> I'm a bit confused as to what exactly this button is meant to do.

In general, make it easier to craft a code sample. Maybe inject a boilerplate bit of HTML to customize. This may or may not be worth doing, IMO

> Looking at your comment above, and the sample code in your TestCodeSample, the
> button should:
> 
> *  Inject a H2 heading element, providing it an ID for use in an IFrame
> template

This is probably not a good idea: IDs are usually auto-generated from header text, and that's the easiest thing to edit without resorting to the source view in CKEditor. 

I manually assigned an ID in that example just to make sure it works. If the creation of the example assigns an ID, then we need a way that's just as easy to edit the ID afterward.

> *  Create three PRE elements (HTML, CSS, JS)
> 
> That stuff makes sense, though providing an ID right away could be
> problematic, but I'll figure that out.

I wouldn't bother with the ID, and rely on the auto-generation from header text

> You mentioned that you were "cheating" by creating an EmbedLiveSample
> template, passing it the code sample ID.  Creating a template and passing it
> the ID seems perfectly reasonable to me.  Doing so will allow us to add
> wrapping HTML / info to all demos, and provides one central controller for
> all demos.  
> 
> Am I missing anything Les?

This part is more about bug 810069, I think - ie. inserting the <iframe>. 

And by cheating, what I mean is that we eventually want something like the link dialog: find & select a page, and then select a sample from that page, inject an <iframe> element from the result of those selections. 

The template I made only helps with insertion of a sample from the current page, and then only if you know the ID. It doesn't help with inserting a sample into one page that is edited on another, and that's a use case I've been told is important.

Comment 5

[Les Orchard [:lorchard]]

(In reply to David Walsh :davidwalsh from comment #3)
> What if I did this?
> 
> 1.  Added new button.
> 2.  Popup window launches with 4 sections:  "Heading" (textbox), "HTML" (ACE
> editor), "JS" (ACE editor), "CSS" (ACE editor)
> 3.  Upon submission, items are injected into the WYSIWYG.
> 
> Thoughts here?

I'm not a fan of that. If anything, I'd say just inject some boilerplate and rely on CKEditor for subsequent editing. Otherwise, you'll get to use the ACE editor for initial creation, but not after that - and that sounds confusing to me.

I filed bug 797479 to create an initial stub editor, which would have the html / css / js fields and work as a stand-in for JSFiddle until we work on integrating it. That might be interesting to look at for incrementally improved editing beyond CKEditor

Comment 6

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/be480288246ae9f87b7a5d44b64a534bfa6cf7a1
fix bug 810068 - Add boilerplate code button for live samples

https://github.com/mozilla/kuma/commit/6cf0f69b2933b69cf879cae4ca4f804367a64362
Merge pull request #696 from darkwing/ckeditor-samples-plugin-810068

fix bug 810068 - Add boilerplate code button for live samples

Comment 7

[raymond [:retornam] (inactive)]

verified fixed https://developer.allizom.org/en-US/docs/HTML/HTML5