How does one make the color of the UI toolbar of CKeditor solid rather than gradient? I've search the other questions and read that I need to edit a file skins.js, but there are no js files in the skins folder.
CKEditor 4.5 is not yet out there, so my assumption is that you use latest major branch.
File you're looking for is skin.js in particular skin directory (eg. mono).
The fact that you can't find this file in given directory might be caused by using builded (minified) CKEditor.
If you did build CKEditor then skin is likely to be minified to main file (but I'm not that familiar with building, so it's my guess).
If that's the case, you need to edit source version, and build it again.
Related
I'm using the Hugo Whiteplain theme for a personal site hosted through Netlify. I am following tutorial. When I push/publish on GitHub Desktop, I am told that my git submodule is dirty. As a result, I cannot change the theme's background color.
[submodule "themes/whiteplain"]
path = themes/whiteplain
url = https://github.com/taikii/whiteplain.git
What do I do to regain control of my theme? Can I change the color without dependence on this dirty submodule?
There are many ways to customize a Hugo theme. For instance, you can:
edit the theme directly and let it drift from the original project,
create a fork and use it as the theme to be able to pull updates
from the original theme while developing your own version,
edit the theme inside the website itself.
This last option means that you do not touch at the theme itself, but instead make a copy of any file you want to edit inside the tree of your website, following the same path structure, and edit that file.
For any element of any of the customization files (layout, css, scss, etc.) that exists both under the tree of your website and under the tree of the theme, Hugo will prioritize the element in the file under the tree of the website.
For any element not present in the tree of your site, Hugo will use what is in the theme tree instead. This means that you do not have to copy the entire theme or even entire files in your site, but only the elements that you want to customize.
If you choose this method and if you set your theme as a submodule following the Git submodule manual, you will never get into a dirty submodule situation.
Example
Let's say you want to edit the background color of your theme and that the variable is defined in a scss file under:
your_site
+ themes
+ theme_name
+ assets
+ scss
_content.scss
You need to keep the tree architecture and create a file under:
your_site
+ assets
+ scss
_content.scss
You can create a file from scratch, but an easier option is to copy the file from the theme and paste it there. In that file, you can customize the background color (or any other setting) however you like.
Note
I have found this way of customizing a theme (which is actually the way advised in the Hugo documentation) to be the simplest.
One situation where this method is not optimal is if you plan to use the same customized version of a theme for several websites. In that case, creating a fork of the original theme makes more sense as you can add your customized theme (your fork) as a submodule of all those websites and your customization is thus portable.
I have a custom CKEditor build. Eventually, after I've done code changes, which I don't want to lose, I decided that not all of the plugins, which I included in the initial build, were necessary, so I removed some of them through the config.js file by using config.removePlugins.
My questions are:
Does this method improve the loading speed of the editor at all or does it remove the plugins after they have been loaded?
If the first is true, does it only affect the loading of resources from the plugins folder or does it also affect the loaded content of the ckeditor.js file?
If you downloaded the Full package from CKEditor download page then while loading the editor, the whole package gets loaded even if config.removePlugins is used.
The less plugins you have, the faster the editor loads. This is the general rule. Another one is that the editor should be served in release and not the source mode.
The best practice is to get the editor source code from here, create your own fork which you can update to newest stable branches, create your custom plugins and build your own custom editor release according to this link.
This way you will get all the plugins you want and the editor code will be minified, obfuscated and combined into a single ckeditor.js file which should guarantee the fastest load time.
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';
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.
It appears that some of the button names have been changed in ckeditor version 4.
Is there a complete list of these changes?
There is a partial list here.
I'm pretty sure that names haven't been changed. If something is not working check if plugin you need is included in your build (most likely it is a standard preset) and if not:
download a full preset (which in fact does not include all plugins too, but most of them) or
add required plugins to your custom CKEditor build.
[EDIT] another useful resource is the toolbar sample shipped with CKEditor package. E.g. here's one for a standard package.