Lightwire Skin for CKEditor

[Nico Knoll]

Hey,

after having Lightwire Skin more or less ready for some months now I finally created a little module to make the installation easier.

I hope you like it. Please report issues directly on Github: https://github.com/NicoKnoll/LightWire-Skin

A cleaner and nicer CKEditor Skin using fontawesome:

[peterfoeng]

This is pretty slick! Cant wait to test it out

[renobird]

Nice one Nico!

Looking forward to checking it out.

[Macrura]

hey thanks for this - works really well!  Just a heads up, if you have multiple ckeditors on 1 page, you have set them all, or they will stay with the default skin

[Nico Knoll]

@Macrura: If you have an idea how to solve this let me know

[Macrura]

I tried checking on some things, but as far as i can tell, the "skin" setting for each editor instance does need to be set in order to override the global skin setting.

I think in the future there may need to be some additional setting for global ckeditor style to prevent the current behavior which is loading the default editor stylesheet, but then overriding the editor style with the skin parameter set in the json...

So my suggestion would be to see if the module can hook into the ckeditor module with a setting for the option of global skin setting to lightwire.

maybe another setting which "allow field-specific skins", and then if this is the case, then the fields that don't have a skin specifically set need to inherit the global setting, and specify that in the json (since right now there is no skin setting in the json for fields where it is not specifically set)..

or maybe just modify the current system to where the skin is set in the json and no global style is loaded? but then there needs to be a way to override that.

[Nico Knoll]

Call me Captain Hook as I can hook into almost everything - at least I'll try this

[Nico Knoll]

Btw.: You can set it globally if you just go to /site/modules/InutfieldCKEditor/config.js and add it there like this:

CKEDITOR.editorConfig = function( config ) {
    config.skin = "lightwire,/site/modules/EditorSkinLightwire/skins/lightwire/";
};

I think that solves it. I'm going to add this to the description.

[Nico Knoll]

And I'm not sure if "allow field-specific skins" is possible with CKEditor as it doesn't use iframes but loads the js at the top. So the skin of the last loaded editor is used I think.

Source: http://stackoverflow.com/questions/30481246/ckeditor-multiple-skins-on-a-single-page

[Macrura]

right... good solution, and good to know about the 1 skin per page...

[Beluga]

Btw.: You can set it globally if you just go to /site/modules/InutfieldCKEditor/config.js and add it there like this:

CKEDITOR.editorConfig = function( config ) {
    config.skin = "lightwire,/site/modules/EditorSkinLightwire/skins/lightwire/";
};

I think that solves it. I'm going to add this to the description.

Would be great to be able to use a relative path so we wouldn't have to take into account changing between dev and prod sites (dev sites are usually localhost/mysite/).

It might be possible with some JS magic, but I didn't find any complete solution.

config.skin = "lightwire," + sitePath + "site/modules/EditorSkinLightwire/skins/lightwire/";

How could we get & set the sitePath variable correctly?

This might have some solution, but I couldn't really figure it out: http://stackoverflow.com/questions/2188218/relative-paths-in-javascript-in-an-external-file

[LostKobrakai]

Couldn't you use something like this: "../../../../site/modules/…". Each of those folders should always be nested at the same depth no matter where it's placed inside the filesystem. 

[Beluga]

Couldn't you use something like this: "../../../../site/modules/…". Each of those folders should always be nested at the same depth no matter where it's placed inside the filesystem. 

Tried that and also /../site/... and they didn't work.

[LostKobrakai]

The docs do confirm this. CKEditor does expect an absolute path if you're not using the default skin directory. http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-skin

[AndZyk]

Really nice and clean skin. It is definitly lighter then the default default skin.

One small note:

There is an quotation mark missing in the module instructions. I think most of the ProcessWire-Users figure this out by themself, but maybe you could fix it with your next update.

CKEDITOR.editorConfig = function( config ) {
    config.skin = lightwire,/site/modules/EditorSkinLightwire/skins/lightwire/";
};

[Nico Knoll]

Fixed

[Mike Rockett]

Hi Nico,

The theme isn't working with the new front-end editing feature of devns. The only error I can pick up is this: TypeError: $ is not a function in skin.js.

Still works in the backend, as expected.

Edit: I think this may be due to the way in which you made changes to the loading of the inline editor - around the time it was spanning the width of the page. If I wrap the calls to $ in an anonymous method, the error disappears, but the inline editor does not appear.

(function($) {
    $(".InputfieldCKEditorInline").click(function() {
        var a = $("#cke_" + $(this).attr("id"));
        if (a.length) {
            $(this).parent().after(a)
        }
    })
})(jQuery);

[tpr]

Just created an issue on github:

Inline toolbar not showing with Matrix Repeater (+ quick fix)

https://github.com/NicoKnoll/LightWire-Skin/issues/6