Topic Closed
juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

Josh-

will it be possible to register CKeditor plugins in the course of a gp|Easy plugin intallation?
My mediaelement.js html5 player plugin is almost ready but it makes sense to wait for the new CKeditor config options in 3.6+ to add the needed <video> and <audio> plugins to CKeditor.  My current dirty plugin-injection-hack is what prevents me from publishing it.

7 years ago#5375

Josh S.
2K Posts
267K Downloads
16 Themes
18 Plugins

Not yet, but I'm sure we can figure it out... working on it now

7 years ago#5383

Josh S.
2K Posts
267K Downloads
16 Themes
18 Plugins

Ok, I just added the CKEditorPlugins filter to the /include/tool/editing.php file. Here's an example of how it can be used:

Addon.ini

[CKEditorPlugins]
script    = 'script.php'
method    = 'myCKEditorPluginFunc'

script.php

function myCKEditorPluginFunc( $plugins ){
    global $addonRelativeCode;
    $plugins['plugin_name'] = $addonRelativeCode.'/plugin_name/';
    return $plugins;
}

7 years ago#5385

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

awesome!
And how can I add the plugins' icons to CKE's toolbar?

 

7 years ago#5393

Josh S.
2K Posts
267K Downloads
16 Themes
18 Plugins

We're beginning to get beyond my CKE knowledge. I imagine there are two important pieces to this:

1) The plugin's icon needs to be associated with the plugin code. Can this be done within the plugin javascript?

2) The icon needs to be added to the toolbar. Hopefully this is all we need to accommodate for at this point.

7 years ago#5398

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

1) The plugin's icon needs to be associated with the plugin code. Can this be done within the plugin javascript?

Already works as far as I have tested.

2) The icon needs to be added to the toolbar. Hopefully this is all we need to accommodate for at this point.

This is what I added to ckeditor_config.js to make it work:

CKEDITOR.editorConfig = function(a) {
    a.toolbar = "gpeasy";
    a.resize_minWidth = !0;

    ... some other opitions here ...

    a.toolbar_gpeasy = [
        ["Source","-","Templates"],
        ["Cut","Copy","Paste","PasteText","PasteFromWord","-","Print","SpellChecker","Scayt"],
        ["Undo","Redo","-","Find","Replace","-","SelectAll","RemoveFormat"],
        "/",
        ["NumberedList","BulletedList","-","Outdent","Indent","Blockquote"],
        ["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"],
        ["Link","Unlink","Anchor"],
        ["Image","Video","Audio","Flash","Table","HorizontalRule","Smiley","SpecialChar","PageBreak"],
        "/",
        ["Format","Font","FontSize"],
        ["Bold","Italic","Underline","Strike","-","Subscript","Superscript"],
        ["TextColor","BGColor"],
        ["Maximize","ShowBlocks","-","About"]
    ];
    a.toolbar_inline = [
        ["Source","Templates","Print","ShowBlocks"],
        ["Cut","Copy","Paste","PasteText","PasteFromWord","SelectAll","Find","Replace"],
        ["Undo","Redo","RemoveFormat","SpellChecker","Scayt"],
        ["HorizontalRule","Smiley","SpecialChar","PageBreak","TextColor","BGColor"],
        ["Link","Unlink","Anchor","Image","Video","Audio","Flash","Table"],
        ["Format","Font","FontSize"],
        ["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","NumberedList","BulletedList","Outdent","Indent"],
        ["Bold","Italic","Underline","Strike","Blockquote","Subscript","Superscript"]
    ]
};

Xyz represents the name of the command which is defined in the plugin.js with

editor.addCommand( 'Xyz', new CKEDITOR.dialogCommand( 'xyz' ) );

I think the biggest problem is to find a goot way to add the icons at a convenient position in the toolbars. Hmm.

7 years ago#5400

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

> 1) The plugin's icon needs to be associated with the plugin code. Can this be done within the plugin
> javascript?

Already works as far as I have tested.

... or to be more specific: The plugins I know and the ones I'm currently using have their own icons included.
So the two things to do is 1) to load the plugin and 2) mount the icon to the toolbar configuration by calling their Command name (Case sensitive!). I have to admit that I don't know if there are plugins that need a different or more complex configuration. I haven't seen any yet but I have also just used a few.
 

7 years ago#5402

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

Is it in principle something like this?

Addon.ini:

[CKEditorConfig]
script = 'script.php'
method = 'myCKEditorConfigFunc'

script.php:

function myCKEditorConfigFunc($options) {
    array_push ( $options['toolbar_gpeasy'] , ["Video","Audio"] );
    return $options;
}

Have already tried that but didn't work (did'nt do anything at all).
Aargh, I'm really lacking basic knowledge of the whole PHP array/object/methods stuff :-(

7 years ago#5403

Josh S.
2K Posts
267K Downloads
16 Themes
18 Plugins

Already works as far as I have tested.

Perfect

Something like this could work (note, for gpEasy 3.6 we've gone with 'toolbar' instead of 'toolbar_gpEasy')

array_push ( $options['toolbar'] , array("Video","Audio") );

There's one problem. The new CKEditor admin page allows users to enter their own configuration. If they use it to customize their 'toolbar', the Video and Audio icons won't show.

7 years ago#5404

Josh S.
2K Posts
267K Downloads
16 Themes
18 Plugins

Come to think of it, I'd like to know if/how toolbar icons are added by a plugin when integrated using the builder: http://ckeditor.com/builder

7 years ago#5405

Eric
193 Posts
1.4K Downloads
1 Themes

According to this, it looks like the addButton feature overrides the default toolbar.

http://docs.ckeditor.com/#!/guide/plugin_sdk_intro

It would make sense to organize the toolbar in named groups so the plugins will have a more logical place to put the buttons.

7 years ago#5407

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

array_push ( $options['toolbar'] , array("Video","Audio") );

Ha, works! Yeah!

There's one problem. The new CKEditor admin page allows users to enter their own configuration. If they use it to customize their 'toolbar', the Video and Audio icons won't show.

Well, in this case I will have to create a sample code in my plugin admin panel that has be added to the custom CK configuration to preserve the buttons.
Bad idea? Could it cause problems when the gpeasy plugin is uninstalled? Hmm. Have to test that.
 

7 years ago#5408

Josh S.
2K Posts
267K Downloads
16 Themes
18 Plugins
editor.ui.addButton( 'Timestamp', {
    label: 'Insert Timestamp',
    command: 'insertTimestamp',
    toolbar: 'insert'
});

So if gpEasy uses named toolbar groups, then it this could be all that plugins would need?

7 years ago#5409

Josh S.
2K Posts
267K Downloads
16 Themes
18 Plugins

Hmm, this is a bit of a drawback:

The most evident problem with grouping configuration its that it is not possible to control precisely where each item is placed in the toolbar. It is the plugin itself to decide it.

7 years ago#5410

Eric
193 Posts
1.4K Downloads
1 Themes

We'll have to test it and see how it behaves. The language in the documentation is a little vague.

As I understand, in the example above the button will be added in the group named "insert". Logically, I would assume it would be appended at the end of the group. So you may want to create an empty group named insert where the plugin adds a button. 

I think the control problem comes from the fact that a plugin developer may decide his plugin belongs in the 'editing' group or elsewhere. So the control is in the plugin developer's hand and not the CKE user's. I don't know how many plugins use buttons. In Juergen's case, we don't have to worry because he'll use the name that works best for gpEasy. In other cases, we may need to recommend editing the plugin to place the button in the right area.

7 years ago#5411

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

I venture to say the best would be a drag and drop configuration with an available-icons-panel to drag from. And an create-group button.
Not exactrly trivial to code, though ;-)


 

7 years ago#5412

Eric
193 Posts
1.4K Downloads
1 Themes

I venture to say the best would be a drag and drop configuration with an available-icons-panel to drag from. And an create-group button.

It looks like someone already started on that idea: http://dnnckeditor.codeplex.com/discussions/432381

I'm not sure how easily it could be converted to work for gpEasy since it's written in asp. Honestly, I'd rather see many other features implemented before a wysiwyg toolbar editor. It would be nice, but very unnecessary. A list of available buttons and syntax to use is sufficient.

 

Edited: 7 years ago#5413

Josh S.
2K Posts
267K Downloads
16 Themes
18 Plugins

I venture to say the best would be a drag and drop configuration with an available-icons-panel to drag from

That's kind of where my thought process was going as well. I won't spend too much time on it though 'cause there are definitely other things that need to be looked at.

7 years ago#5414

juergen
1.4K Posts
51.6K Downloads
16 Plugins
design, web development & visual effects

I just took a look at the roughly 40 kb markup that's generated in the div#ckeditor_area with a standard configuration.
Unfortunately it's full of inline styles and onwhatever calls. This will take some reverse enineering to render a clean non-functional CKsimulator-UI for drag-n-drop configuration purposes. I'm also uncertain if I have the breath (and brain) for diving so deep into the CKE source.
Would probably be easier and more future-proof using jQuery to pick copies of all needed elements from a live CKeditor instance.

Once a faux CKEditor UI is rebuilt, I assume jQuery ui.draggable/dropable/sortable will serve well for the rest.

I will give it a go (and tell at which point I failed *lol*)

 

7 years ago#5415

Josh S.
2K Posts
267K Downloads
16 Themes
18 Plugins

I've got a good start on the reverse engineering (It's a bit easier with the source code: https://github.com/ckeditor/ckeditor-dev )

CKEDITOR.on( 'instanceReady', function(){
    /**
     * Get available toolbar elements
     * see ckeditor/plugins/toolbar/plugins.js getToolbarConfig() buildToolbarConfig() getItemDefinedGroups()
     */
    var editor = CKEDITOR.instances.gpcontent;
    var items = editor.ui.items;
    for( i in items ){
        var item = items[i];
        if( item.type != "button" ){
            continue;
        }
        button_style = CKEDITOR.skin.getIconStyle( i , false, null, 0);
        // button_style will contain a string like this: background-image:url(http://gpeasy.loc/include/thirdparty/ckeditor_34/plugins/icons.png?t=D08E);background-position:0 0px;
    }
});

I'm not sure the call to GetIconStyle() is 100% correct...

7 years ago#5416

Topic Closed

 

News

Typesetter 5.1
8/12/2017

Typesetter 5.0.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

Over 8 Times Faster Than Wordpress
5/3/2016

We've known for a long time that Typesetter is fast. It's something we take pride ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register