Jump to content
Nico Knoll

Lightwire Skin for CKEditor

Recommended Posts

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:

post-140-0-03748800-1436007321_thumb.png

post-140-0-47541200-1436007315_thumb.png

post-140-0-37880100-1436007309_thumb.png

  • Like 19

Share this post


Link to post
Share on other sites

Nice one Nico!

Looking forward to checking it out.

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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/";
};
  • Like 1

Share this post


Link to post
Share on other sites

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);

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...