I need to create an inline editor form with a toolbar and autosave function. I tried to understand how CKEditor works without success. I also read the documentation but I didn't really understand.
How can I create a simple canvas with an editor inside it (+ toolbar)?
I work with smartgwt in JAVA.
Thanks
I tried something like that but it doesn't work.
Canvas inlineCKEditorCanvas = new Canvas();
inlineCKEditorCanvas.setHeight(200);
inlineCKEditorCanvas.setHeight(500);
CKEditor ckEditor = new CKEditor();
ckEditor.setHeight("100");
ckEditor.setWidth("500");
inlineCKEditorCanvas.addChild(ckEditor);
Related
How can we have non-editable areas in a non-readOnly area?
Notice I still need most of the editor have editable content, so using readOnly mode is not an option. Setting contentEditable=true for those areas doesn't work, it seems like CKEditor strips all contentEditable values of it's children tags.
CKEditor 4.3 introduced Widget System which solves exactly this issue - it allows you to have non-editable fragments in the content. Actually, it allows you to do much more than that, because these non-editable islands may then have editable fragments, you can restrict per nested editable what features are enabled, etc.
Some links for the start:
Introduction to Widgets,
Widgets SDK introduction,
Creating a Simple CKEditor Widget (Part 1),
Widget API.
And some live examples:
Simplebox plugin,
Captioned images,
Code snippets with syntax highlighting,
Placeholder.
PS. I think you should also read about the Advanced Content Filter.
I'm trying to use CKEditor simply as an API that I can drive with my own UI.
Firstly, is this the right use of CKEditor?
If so, how could I modify the font size of a text selection programmatically?
Creating own UI for CKEditor
It's a doable approach, but for some cases it might be tough and require some code duplication.
There are older parts of CKE that encapsulate many useful things, so you have no convenient API to access it from outside.
Adding a font size
The minimal effort would be to simply use CKEDITOR.style objects.
var editor = CKEDITOR.instances.editor1;
var style = new CKEDITOR.style( {
element: 'span',
styles: { 'font-size': '20px' }
} );
editor.applyStyle( style );
For more examples see font plugin, you're interested in fontSize combobox.
I have just upgraded to CKEditor 4.4.5 from 3.5, and notice quite a few changes !! One of the changes is the new skin called Moono which looks great. However it did get me wondering whether it would be possible to change the black in the menu icons to a custom colour, for branding reasons for example. We do this in the rest of the web application using a combination of Server code and CSS.
Many thanks.
Toolbar icons in Moono are images, so if you want to change them, you'd need to create a new skin or use an alternative one from the CKEditor Addons Repository.
However, since Moono is a monochromatic skin, maybe for branding purposes it would be enough for you to use the so-called "chameleon feature" that lets you change the UI color with a simple configuration option?
If so, just use config.uiColor to provide a mataching RGB color value or an HTML color name, as in:
config.uiColor = '#AADC6E';
See a working example here: http://sdk.ckeditor.com/samples/uicolor.html
I am using Ckeditor 4. Setting the property uiColor makes it always gradient. Is there a way to setup a solid ui color?
Using the inline editor with the 'sharedspace' plugin:
CKEDITOR.on('instanceReady', function (e) {
$('.cke_top').css('background','#eee');
})
You have to edit skin.js in /ckeditor_path/skins/skin_name/skin.js and modify CKEDITOR.skin.chameleon part that controls uiColor management to get rid of gradients. No other clean & easy way.
I have found that doing things like this in CKEditor are extremely frustrating. I tried finding a way to do this for a long time and changed the skin.js file, and several other things. In the end, I fixed it by changing the property with jquery after the editor loaded.
$('.cke_inner').css('background','transparent');
You can substitute '#012345' for 'transparent' and it will be a solid color.
I have been searching for an answer for a couple days now and had no luck.
When using AJAX to bring in multiple forms into a DIV how can I position new forms not on top of the existing form?
I have a menu that calls in new forms into a working area. The new form being called in appears on top of the existing form(s). The forms are draggable but I would prefer to have the new form position itself off of the other one(s). Is there a way to do this?
I am using jQuery to handle AJAX and effects.
EDIT & ANSWER:
I just found out what was wrong. Sorry I didn't see this before. My forms were each in their own DIVs which were getting a 0 height. This is one of those facepalm moments. :P
Thanks for your responses guys. :)
BETTER EDIT:
I used the float:left advice and added in the 0 height again. Everything works great now.
If I understand what you are trying to accomplish - you could "float" your forms within your working area and just append new ones into the working area when you need to.
Example