Hi All,
I am using CKEditor 3.6.4 for ASP.NET and am having an issue, basically I can't get the foreground / text color button to appear on the toolbar. I have added VB.NET code in the code-behind like so:
With New ArrayList
'.Add(New String() {"Save", "-", "Templates"})
.Add(New String() {"Cut", "Copy", "Paste", "PasteText", "PasteFromWord"})
.Add(New String() {"Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "RemoveFormat"})
.Add("/")
.Add(New String() {"Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript"})
.Add(New String() {"JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock"})
.Add(New String() {"Link", "Unlink", "Anchor"})
.Add("/") ' No array for singles like this ( / is force new row)
.Add(New String() {"Styles", "Format"})
.Add(New String() {"TextColor", "BGColor"})
.Add(New String() {"NumberedList", "BulletedList", "-", "Outdent", "Indent", "Blockquote", "CreateDiv"})
.Add(New String() {"Image", "Flash", "Table", "HorizontalRule", "Smiley", "SpecialChar", "PageBreak", "Iframe"})
.Add(New String() {"Maximize", "ShowBlocks"})
CKEditor1.config.toolbar = .ToArray
End With
But the button does not appear (neither does the BGColor button).
I am using the vanilla CKEditor component, I have not made any changes.
Then I tried downloading the "colorbutton" plugin for 4.x, but this just results in a Javascript error when I add "config.extraPlugins = 'colorbutton';" to config.js. Then I found a plugin source repository and downloaded colorbutton and all required associated plugins (they were for version 3.6.2), and now get a different javascript error, namely "Unable to get value of the property 'textColorTitle': object is null or undefined". This error occurs on the following second line in plugin.js in the colorbutton directory:
if ( !CKEDITOR.env.hc ) {
addButton( 'TextColor', 'fore', lang.textColorTitle, 10 );
addButton( 'BGColor', 'back', lang.bgColorTitle, 20 );
}
I am used to a competing editor where I make 1 config change and the button appears, and I must admit this is a bit frustrating :-)
Any help would be greatly appreciated.
Thanks!
Maybe I am missing something really obvious...
... but I still can't do this. Should I rip out the ASP.NET version and try the Javascript version instead?
I am at a loss here, I just want the text color button to appear, just like it does in the box I am entering text into now.
Thanks!
First of all, could you check
First of all, could you check what exactly you are using? Is this plain vanilla CKEditor for ASP.NET, version 3.6.4, or did you try to combine v3 of the connector with CKEditor v4 files?
In any case, can you check the \ckeditor_aspnet_3.6.4\_Samples\ToolbarDefine.aspx sample? It works for me and the buttons are there. If it does not work for you, please download the 3.6.4 package again and try it out.
Please note that the official release of CKEditor v4 for ASP.NET is not ready yet, so there is no 100% chance that it will work. If you are trying to combine the v3 connector with CKEditor v4, the problem might be because you downloaded the Standard or Basic preset that does not include the Text Color and Background Color plugins. Download the Full preset instead or use CKBuilder to create a custom build that would include these two plugins.
Last but no least, I am not a .NET developer, but I can see that your toolbar definition uses strings while by default we are using arrays of objects. Have you tried using objects instead?
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!
Will give it a shot...
Thanks Anna, will give that a shot.
And to answer your question, I am using vanilla CKEditor for ASP.NET 3.6.4, I have not combined this with any other CKEditor files.
I also copied that VB.NET code from another site because all other examples were in C#, but I will try a C# to VB.NET converter online, maybe that will give me a better result, and will use objects then.
I'll report back here how I go.
Thanks for taking the time to reply! :-)
If so, you might want to have
If so, you might want to have a look at some of our developer documentation for CKEditor for ASP.NET, there are a few code examples available in it (note, however, that the toolbar definition might still be using the pre-3.6 format, so you will be better off using the samples for this). Likewise, see the samples and their source code for some ideas.
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!
edgeman - did you get it to
edgeman - did you get it to work? I found the demo/samples to be worthless for this problem. I have a full version of 4.0.1 and a complete toolbar specification and am still having the same problem as you. Here's what my toolbar spec looks like - Anna, any thoughts on this? Thanks!
editor.config.toolbar_RCI = [
{ name: 'r1g2', items : [ 'Undo', 'Redo'] },
{ name: 'r1g3', items : [ 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'Outdent', 'Indent' ] },
{ name: 'r1g4', items : [ 'PasteFromWord', 'SpellCheck' ] },
{ name: 'r1g5', items : [ 'Link', 'Image', 'Table', 'HorizontalRule' ] },
'/',
{ name: 'r2g1', items : [ 'Bold', 'Italic', 'Underline', 'Strike', 'TextColor', 'BGColor', 'RemoveFormat' ] },
{ name: 'r2g2', items : [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'r2g3', items : [ 'mkField'] }
];
"mkField" is a custom plugin I wrote, no problems there, that works fine. Aside from that custom one, all the button names were pulled from the thread here on the forum that Anna recently referenced for the complete list of toolbar item names. There really needs to be a comprehensive and formal support document for this - it's a pretty big oversight. This same toolbar spec works fine with the regular editor, just not with inline mode.
Here is my code to get textcolor and bgcolor button shown up
First download the full version code. It works in "replacebycode.html" sample.
Use the original config.js(blank), only add the following in initialization script:
var editor = CKEDITOR.replace( 'content', {
toolbar: [
[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
{ name: 'font', items: ['Font','FontSize'] },
'/',
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline','-','JustifyLeft','JustifyCenter','JustifyRight','-','NumberedList','BulletedList','-','Link','Unlink','-','Source' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize' ] }
]}
);
And it will show up 2 line toolbar with textcolor and bgcolor buttons.
Other part of the page:
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
...
<form name="theForm" ...>
<textarea class="ckeditor" name="content" cols="82" rows="15" ></textarea>
</form>
The textcolor and bgcolor should be included in standard editor
Why not inlcude those 2 buttons in standard editor release?
Also the font name and font size buttons. The style buttons are not that necessay.
And left align, center align, right align are also necessary. Replace strike text button.
Thanks!