How do I change icons for builtin actions in ckeditor? - ckeditor4.x

How do I change the icons for builtin actions such as subscript, superscript bold and italic?
The documentation say that I have to place the icons in the images folder in my skin, but how do I know what the image should be called?
Also, ckeditor compiles the default images into one huge file, so do I need to rebuild that icon file(how?) after placing an icon.
I am using Ckeditor 4.


All skin icons must be included inside the icons folder in the skin folder. The icons file name must match the name of the icon files available in the icons folder of the plugins.
If you want the source version of your skin to overload icons properly, you must inform CKEditor about the presence of your custom icons. This is optional, but if not done your icons will be visible in the release version of your skin only. Check the skin.js file in the Moono skin for an example.
Try clearing the cache as well.


I've just downloaded CKEditor v4.5.7 basic edition and there is a "plugins" folder by default.
Are you sure about the version used ?
After edit :
Icons are defined in the file skins/moono/editor.css and for example for Bold look after class .cke_button__bold_icon - erverything can be changed there.
In order not to edit standard files, I suggest you to create a new skin : duplicate moono folder and rename as you like and in your config.js add
config.skin = 'skin-name';

Related

CKEditor4: Alternative skin in inline mode

I want to use CKEditor4 in inline mode, but have trouble using an alternative skin (the default skin Moono works fine).
I downloaded an alternative skin and tried to activate it in config.js via:
config.skin = 'minimalist';
(I also tried some other ways (inside event handler) with the same result):
The toolbar always shows up with Moono skin -- but what makes me wondering very much is, that the skin files are definitively loaded from the alternative skin directory. Also skin.js is loaded (which is not loaded for Mono skin.

I'm not sure if it is related to what you encounter, but note that only one skin can be used on one page. So if you have two editors and one of them is initialised with the Moono skin, then the second one will use it as well. This limitations comes from the fact that all CSS selectors in skins files would need to contain skin name - otherwise they would conflict with each other.

Possibly it is a bug of the minimalist skin.
I tried an different skin and found out, that it is displayed correctly. So it seems to be a "feature" of the minimalist skin.

why does my sublime now show these black empty folders

since updating sublime, the editor now displays two folders next to each folder.
I am using a customized version of the Flatland theme.

The latest ST3 update added new folder and file type icons. You will either have to switch to a different theme that supports these new icons or update your customized Flatland theme to disable them.

CKEditor loads unwanted skin and icons files

We're using CKEditor on a project where assets are handled by Grunt.js.
Grunt manage and compile CKEditor JS+CSS alongside other libs and our own code.
We've chosen to use an iconic font for our toolbar elements.
In production, assets are uploaded on S3.
Unfortunately, CKEditor has a "loader" feature which loads skin and icons files, based on the current path. Of course, the skin (the basic "moono", already loaded) and icons are not used.
Is there a way to disable this "loader" ?

Qooxdoo - how do i create a new theme and use it in the application?

I am quite new to qooxdoo and I need help in creating a custom theme for my application.
I copied the native Modern theme and modified some of its features, now my question is how do I add it as new theme to qooxdoo and how can I use it in my application?
any help or guidance would be greatly appreciated.

You don't need to copy it over, simply extending the theme would be good. If you created your app with the qooxdoo desktop skeleton using the create-application.py helper, you should already have a custom theme in place running and extending the modern theme. If not, you simply have to edit the config.json file which should be in your root project folder and search for a key named QXTHEME. The value of that key is a classname which specifies your theme. Change that to your custom theme class and rebuild the app to see the result.
Here are some further resources on how to work with themes: http://manual.qooxdoo.org/current/pages/desktop/ui_custom_themes.html

To add a bit to Martin's answer: You don't copy and modify theme code, you extend and override, much as with class code.
If you create an application skeleton with create-application.py, the default code structure under source/class already contains custom theme classes (under source/class//theme/*). The thing is those theme classes extend from the Modern theme without actually overriding anything, so you effectively get the Modern look and feel.
But you can then go ahead and flesh out those custom theme classes, with properties that suite your taste, thereby creating your own theme.

i found it very difficult to create a custom theme by extending one of the existing native themes (classic, modern... etc) without looking at the source code, also i don't want to mess up the original API's files by modifying them, so i did the following:
1- replaced files in my application's directory: myapplication/source/class/myapplication/theme/ with the files in /qooxdoo-directory/framework/source/class/qx/theme/modern/. replaced four files in total (Appearance.js, Decoration.js, Color.js and Font.js).
2- copied decoration directory from /qooxdoo-directory/framework/source/resource/qx/decoration/Modern to my application's directory: myapplication/source/recourse/myapplication/decoration.
3- copied icons directory from qooxdoo-directory/framework/source/resource/qx/icon/Tango to my application's directory myapplication/source/resource/myapplication/icon.
4- copied Tango.js from qooxdoo-directory/framework/source/class/qx/theme/icon/Tango.js to my application's directory myapplication/source/class/myapplication/theme/icon/Icon.js.
5- edited the meta file Themes.js and changed it to:
qx.Theme.define("myapplication.theme.Theme",
{
meta :
{
color : myapplication.theme.Color,
decoration : myapplication.theme.Decoration,
font : myapplication.theme.Font,
icon : myapplication.theme.icon.Icon,
appearance : myapplication.theme.Appearance
}
});
6- edited Icon.js file (which i copied from Tango.js in step 4) and changed it to:
qx.Theme.define("myapplication.theme.icon.Icon",
{
title : "myIcons",
aliases : {
"icon" : "myapplication/icon"
}
});
7- edited Decoration.js, Appearance.js, Color.js and Font.js in my application's theme directory and changed the classes' namespaces from:
qx.Theme.define("qx.theme.modern.<file's name>",
to
qx.Theme.define("myapplication.theme.<file's name>",
8- corrected assets paths in Decoration.js and Appearance.js from the original path qx/decoration/Modern or qx/icon/Tango to the one relevant to my appliaction myapplication/decoration and myapplication/icon, for example:
#asset(qx/decoration/Modern/toolbar/toolbar-part.gif)
changed to
#asset(myapplication/decoration/toolbar/toolbar-part.gif)
ps: the relative path in an application is application-name/source/resource, so you can refer to any directory in this folder by application-name/folder-name.
9- likewise in step 8 i changed aliases in decoration.js to:
aliases : {
decoration : "myapplication/decoration"
},
10 - ran generate.py file in myapplication/source.
and done, now i can change anything i want without crashing the API :)

Icons path altered in built editor

I've made a couple plugins for ckeditor and added icons for them. These icons show up when I embed the unbuilt code on a test page, but, when I build the editor, the minimized code thinks the icons at 'original/path/to/the/icon.png?t=D5AK' instead of 'original/path/to/the/icon.png'. This error does not occur when I copy an icon from another plugin in the src code. At the moment the only way I am adding the icon is through "icon: this.path + 'icons/icon.png'," in plugin.js. Is there somewhere I need to add a reference to the icon?

This is an intentional addition to resources' paths. It ensures that every two CKEditor releases have different paths to the same resource what disables cache. And this works perfectly unless you're trying to load CKEditor from local file system than from a web server.

Resources