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.
Related
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 am currently building a Windows Universal App and the learning curve is OK. I get a response from my webservice, parse the JSON, display info in the app, but my current issue is the following one:
I tried to display an image that I put in the Assets folder, but this doesn't seem to work.
This is my layout:
As you can see, the text "Test" is correctly displayed but not the images.
On the right side, in the explorer pannel, I cannot see the files that should be here:
WHAT I HAVE TRIED:
In my example, they are in the Assets/picto folder, but I have also tried the root directory Assets, as wal as creating Image folder at the same level.
I have definitely no idea how to add a simple picture, so any help is appreciated!
Adding items in Windows explorer to the right location doesn't add them to your solution / deployment.
You have to right-click the picto folder -> Add > -> Add existing item. Your items are not even in your solution, so they won't show up on the layout screen.
Make sure you set the correct build target for each image.
If an image shouldn't show up, even through it's in your solution, this is often the reason.
I have worked on extensions and it's all very interesting. For all type of extensions, icons work really well except for Action Extension where the icon is all white? Do you know how to create an icon for Action Extension?
In the Build Phases of your Extension Settings, just add Images.xcassets (or the icon file) to the Copy Bundle Resources.
PS: For Action Icon, any color data in the image itself is ignored. via Apple Docs
The alpha channel of the image is used as a mask to generate the final
image that is presented to the user. Any color data in the image
itself is ignored.
I had to manually add my icon assets catalog in the build settings. I described it here:
To get this to work with my existing Asset Catalog, I had to add the following to the extension's Build Settings:
The name of the set in my Assets Catalog is "ExtIcon". I had tried setting the CFBundleIcon and the NSExtensionServiceToolbarIconFile keys in the info.plist for the extension, but had no luck. This actually seems to make sense since it is the same way that icon sets are linked to the container app, not via info.plist, but via the Build Settings.
I'm starting my first PhoneGap project and am developing using Visual Studio and Windows Phone 7, although I intend on ultimately deploying to iOS and Symbian as well.
However, I'm stuck at Step 1. I have added an image to the www/images folder, and put the following code:
<img src="images/login-btn.png" width="103" height="42" style="margin-left:90px;" />
And I get:
It works fine when I preview it in IE9, but I don't have a Mac to test it on iOS yet.
It's worth noting that the JS files and CSS have loaded fine, it's just any image (whether referenced in CSS or an <img> tag) always comes up broken.
My guess would be the Build Action of your image file is incorrect.
According to http://wiki.phonegap.com/w/page/48672055/Getting%20Started%20with%20PhoneGap%20Windows%20Phone%207#4Reviewtheprojectstructure section 4. You should be setting the Build Action of your images etc to Content which simply copies them into the output project when it is built. They are probably currently set to Resource or None.
To change the Build Action right click a file and choose properties to go to the properties window if you do not already have it open. It is probably then the first property. Just click and choose the correct one.
I'm posting this to questions that I found while trying to find my answer to the same problem. The JS framework I use adds a url query to each image when in a debugging mode (in order to force browsers to reload image, instead of using cached). So, my image "image/background.jpg" would be accessed as "image/background.jpg?d=34342233". But, when running on PhoneGAP for Windows Phone, it won't recognize the image, and thus it shows up as broken. So, I had to turn off debugging for the framework I use, and suddenly the images showed up (still, don't forget to set the Build Action to "Content" as mentioned earlier).