Posts by: juergen

Posts: 1431
Post: 5488
Topic: Another CKeditor plugin question

Here is an updated version which already generates CKeditor config JSON: CKconfigurator_UXdraft2.zip

 

7 years ago
Post: 5486
Topic: Another CKeditor plugin question

Sorry for the delay - I was too busy the whole last week.

For now this is just a basic User Interface test for the drag-n-drop configuration and has no functionality a all.
It's not yet perfectly smooth but it basically works.
The editor and the available buttons are only hardcoded yet (preferably don't look at the code at all ;-)

Installable as a plugin --> CKconfigurator_UXdraft.zip (gpEasy 3.6rc2+)
What do you think?

Edited: 7 years ago
Post: 5437
Topic: tried aloha editor?

I have tried it  a little (but not with gpEasy of course).
It's impressive but seems also sort of buggy. CKEditor has proven it's strenghts millions of times.

2.5 MB payload is a little much IMO.

7 years ago
Post: 5422
Topic: Another CKeditor plugin question

You don't need to hack into CKEditor for this...

Probably not but I'd like to drag-n-drop configure CKeditor exactly with the same look (and feel) it has when actually editing content. There are basically two ways to achieve this:
1) The hard one - to use parts of CKeditor code to build a dummy editor without functionality or
2) to pick the main container, toolbars, icons and form elements from a live CKeditor instance leaving any functional code out and clone/copy them to a new "CKSimulator".

1st would be troublesome and prone to future CKE modifications.
2nd is way better and I believe this could be easier than I primarily thought. But I have yet to test this. Maybe tonight...

7 years ago
Post: 5415
Topic: Another CKeditor plugin question

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
Post: 5412
Topic: Another CKeditor plugin question

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
Post: 5408
Topic: Another CKeditor plugin question

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
Post: 5403
Topic: Another CKeditor plugin question

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
Post: 5402
Topic: Another CKeditor plugin question

> 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
Post: 5400
Topic: Another CKeditor plugin question

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

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

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

More News

HH-Support

Company located in T├│rshavn, Faroe Islands. * Webpage Design * ReadSpeaker Distribution Partner * Consultant & Provider of a wide range of programs for visually impaired ...

Find out more about our Provider Spotlight

Log In

  Register