CKEditor 4.4.0 and external plugins loading

[Mordred]

Hi,

I updated CKEditor to 4.4.0 and added support for widgets and external plugins loading, because, I need to allow users to insert HTML like this

<div class="headline">
  <h2>Title</h2>
</div>

into area, so that the user can modify only the "Title" string. CKEditor 4.4 has nice support for Widgets

Developers can now extend CKEditor throught their own plugins.

Here is the example of the plugin which I have placed to the /public/editor/plugins/headline/plugin.js in my project:

( function() {
  CKEDITOR.plugins.add('headline', {
    requires: 'widget',

    icons: 'headline',

    init: function(editor) {
      editor.widgets.add('headline', {
        button: 'Create headline',

        template: '<div class="headline">\n    <h2 class="headline-title">Title</h2>\n</div>',

        editables: {
          title: {
            selector: '.headline-title',
            allowedContent: 'em strong'
          }
        },

        allowedContent: 'div(!headline); h2(!headline-title)',

        requiredContent: 'div(headline)',

        upcast: function(element) {
          return element.name == 'div' && element.hasClass('headline');
        }
      });
    }
  })
}() );

And then in the HTML:

{{ aposArea(global, 'footerAbout', {
   textOnly: true,
   controls: [ 'style', 'italic', 'bold', 'createLink', 'unlink', 'Headline' ],
   plugins: [ { name: 'headline', path: '/editor/plugins/headline/' } ]
}) }}

[boutell]

Hmm, this is interesting. Have you looked at creating new A2 widgets instead? Because they don't have to play inside the contenteditable (inside ckeditor), they are a whole lot safer and you can do things that would typically cause cross-browser bugs inside a ckeditor widget.

[boutell]

cc @jsumnersmith, @kylestetz, @stuartromanek for their impressions

[Mordred]

OK, I will try the A2 widget. Is there any nice demo? :)

But I think the external plugin loading to CKEditor can be sometimes useful, because you can add some new plugins to the editor without modifying the apostrophe-editor-2

[boutell]

Kyle points out that your actual use case seems to be just introducing a
div with a certain class and you don't actually seem to be creating an
isolated "widget" component within the flow of the text, like, say, our
slideshow widget. We can see how it's useful to be able to do something
like

and our existing support for configuring
elements doesn't quite cover it. That's something we'll look at.

As for widgets, check out everything on the "Add Content" menu (:

Good examples of implementation in a stand-alone module are:

https://github.com/punkave/apostrophe-twitter
https://github.com/punkave/apostrophe-rss

One of those demonstrates how to load extra content dynamically on the
browser side, while the other demonstrates it on the server side.

This doesn't mean we shouldn't accept your pull request... wondering how
stable ckeditor 4.4.0 is (:

On Thu, May 15, 2014 at 10:12 AM, Martin Jantošovič <
notifications@github.com> wrote:

OK, I will try the A2 widget. Is there any nice demo? :)

But I think the external plugin loading to CKEditor can be sometimes
useful, because you can add some new plugins to the editor without
modifying the apostrophe-editor-2

—
Reply to this email directly or view it on GitHubhttps://github.com//pull/26#issuecomment-43214271
.

*THOMAS BOUTELL, *DEV & OPS
P'UNK AVENUE | (215) 755-1330 | punkave.com

[boutell]

You probably noticed we pushed ckeditor 4.4.5. Enjoy. (:

On Tue, Sep 30, 2014 at 5:20 AM, Martin Jantošovič <notifications@github.com

wrote:

Closed #26 #26.

—
Reply to this email directly or view it on GitHub
#26 (comment).

*THOMAS BOUTELL, *DEV & OPS
P'UNK AVENUE | (215) 755-1330 | punkave.com