Jump to content

Lightwire Skin for CKEditor


Nico Knoll
 Share

Recommended Posts

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
Link to comment
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
Link to comment
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

Link to comment
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.

Link to comment
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
Link to comment
Share on other sites

  • 4 months later...

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);
Link to comment
Share on other sites

  • 4 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...