The forum operates in read-only mode. Please head to StackOverflow for support.

Thu, 02/14/2013 - 21:49

skelly

Joined: 07/12/2012

Posts: 47

Text Color and BGColor tools for inline editor

How can i get the textcolor and bgcolor toolbar items to show themselves for the inline editor? They work fine for the full editor (after I downloaded the "full" version of CKE - how strangely this code is subdivided!?), but the same toolbar specification hides textcolor, bgcolor (as well as print and source which I don't care about) - but we should be able to select text and colorize it - what gives?

thanks...

Fri, 02/15/2013 - 12:49

Anna

Joined: 14/12/2010

Posts: 1369

Are you sure you are using

Are you *sure* you are using the Full preset (or a custom build that includes these two plugins)? Beacuse I've just checked that with the Full preset, version 4.0.1, inline sample, and both buttons are there as can be seen on the attached screenshot.

Attachments:

Attachment	Size
CKEditor-4.0.1-full-inline.png	134.86 KB

Documentation Manager, CKSource

See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!

Fri, 02/15/2013 - 18:06

(Reply to #2) #3

skelly

Joined: 07/12/2012

Posts: 47

Yes, I have the full version,

Yes, I have the full version, and indeed I see in the samples inlinebycode.html the inline editor does show those two tools - however it shows ALL tools which is not what I need. I need to be able to specify a specific subset of tools including TextColor and BGColor, but when I do, they do not display. The inline sample does not specify a toolbar, it just uses an internal default which is not visible - do you have a working toolbar specification that can be explicitly set which replicates the presentation of the inlinebycode.html sample?

Here's what my toolbar spec looks like - everything works except the TextColor and BGColor items:

editor.config.toolbar = [
    ['Undo','Redo'],
    ['PasteFromWord','SpellCheck','mkField'],
    ['Styles','Format','Font','FontSize'],
    '/',
    ['Link','Image','Table','HorizontalRule'],
    ['Bold','Italic','Underline','Strike','TextColor','BGColor','RemoveFormat'],
    ['NumberedList','BulletedList','Outdent','Indent'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']
];

Thanks,

- SK

Sat, 02/16/2013 - 02:57

skelly

Joined: 07/12/2012

Posts: 47

Ok, after a long day, I have

Ok, after a long day, I have figured out the problem. I believe this is a bug in CKE, but I will leave it to you to make that determination. I finally figured out the cause of the issue:

My inline editor is in an iframe. My iframe is invisible (display: none) while the page loads and then shows itself once loading is complete. The bug, I believe, is that if CKEDITOR loads in a page that is not visible, for whatever reason, it throws itself into "high contrast mode". I noticed that many weeks ago when the menus only showed text and no icons. I fixed the menu issue by overriding the CSS adding this to my page:

<style>
.cke_hc .cke_button_label { display: none; }
.cke_hc .cke_button_icon { display: block; }
</style>

That was good enough to correct the problem with the toolbars showing images and so I forgot about it and moved on. Well it would seem that in high contrast mode, the text color and background color tools are disabled. This is arguable as to whether this is the right thing to do, but nonetheless it is the reason that I am not seeing the tools. By disabling the hide/show so that the editor is always visible, high contrast mode goes away and the tools show themselves just fine. I have made an example page that easily demonstrates this problem as a wrapper for inlinebycode.html:

Add this as test.html to the samples directory:

<html>
   <body>
       <div id="hider" style="display: none;">
           <iframe style="width:800px; height: 500px;" src="inlinebycode.html"></iframe>
       </div>
       <span style="cursor: pointer;" onclick="document.getElementById('hider').style.display = 'block';">Show it!</span>
   </body>
</html>

If you bring up thata page in your browser, give it a few seconds to populate the iframe and initialize everything, then click the "Show it!", it will unhide the iframe and show the inlinebycode.html sample page. When you click the text to bring up the inline editor, all the tools will show as text only in high contrast mode, and the textcolor/bgcolor tools will be gone. You can see the tools as icons if you add the style changes I listed above to inlinebycode.html page. I believe being in a hidden iframe should not cause CKE to enter HC mode, and that this behavior is incorrect. In the meantime, I have had to disable the part of my application that hides the page as it is loading in order to avoid this issue.

Regards,

- Sean

Mon, 02/18/2013 - 13:25

j.swiderski

Joined: 10/05/2011

Posts: 174

We have this issue reported:

We have this issue reported: http://dev.ckeditor.com/ticket/9802

Wed, 11/27/2013 - 19:56

schaakspeler

Joined: 27/11/2013

Posts: 1

Some problem here

Hello everyone I think i have the same problem. This is my code:

editor.config.toolbar = [
[ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'TextColor', 'BGColor', '-', 'Undo', 'Redo' ],
];

Everything works just fine exept the Text color and Background color logo's doenst show.

Has this issue allready been fixed or is there a way to still get this working?