custom configure the CKEditor toolbar in VS2010 VB.NET ASP

Hi I am trying to custom configure the CKEditor toolbar in my VS2010 VB.NET ASP application.

However, it is not clear where I can configure it "In Code". So I took the following to
mean I could put in it my "code behind page, e.g. Default.aspx.vb.

So I tried putting the following code in the Page_Load() function, but it complains

Dim CKEditor1 As New CKEditor.NET.CKEditorConfig
CKEditor1.toolbar = "Basic"

Language from Manual:
CKEditor toolbar can be defined in a similar way as in JavaScript, using an array of objects representing toolbar elements
(buttons, drop-down menus).
The toolbar can be defined inside the source code file.
CKEditor1.config.toolbar = new object[]
{
new object[] { "Source" },
new object[] { "Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Supersc
new object[] { "NumberedList", "BulletedList", "-", "Outdent", "Indent" },
"/",
new object[] { "Styles", "Format", "Font", "FontSize", "TextColor", "BGColor", "-"
};

Tue, 04/24/2012 - 13:41

mrgadget

Joined: 23/04/2012

Posts: 3

Re: custom configure the CKEditor toolbar in VS2010 VB.NET A

Assuming you already have the ASP.Net Editor control on your page with this:

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

...and...

<CKEditor:CKEditorControl ID="CKEditor1" runat="server" Height="300">
   ...
</CKEditor:CKEditorControl>

...then your Page_Load can look like this (not the full toolbar, just a sample):

Protected Sub Page_Load(sender As Object, e As System.EventArgs)
   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(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
End Sub

MrG

Tue, 04/24/2012 - 18:11

psykoptic

Joined: 09/02/2008

Posts: 61

Re: custom configure the CKEditor toolbar in VS2010 VB.NET A

Rather than code the custom toolbars in .net, we configure them in the /ckeditor/config.js file.

This is an example showing the config of a basic toolbar in config.js:

CKEDITOR.editorConfig = function (config) {
   // Define changes to default configuration here. For example:
   config.language = 'en-gb';
   
   // custom toolbar
   config.toolbar_Basic =
   [
      ['Cut', 'Copy', 'Paste', 'PasteText'], ['Link', 'Unlink', 'Anchor'], ['Bold', 'Italic', 'Underline'], ['NumberedList', 'BulletedList', 'Outdent', 'Indent']
   ];

};

You should them be able to use .NET to reference the toolbar:

CKEditor1.toolbar = "Basic" ' <-- vb.net

or as part of a javascript replace method (this example is also wrapped with jQuery's doc.ready function)

<script type='text/javascript'>
$(document).ready(function() {

   var ckcontent  = CKEDITOR.replace('txtTextArea1', {
      toolbar: 'Basic',
      height: '500px',
      width: '700px'
   });

});
</script>

Wed, 04/25/2012 - 20:59

patch_out

Joined: 17/04/2012

Posts: 3

Re: custom configure the CKEditor toolbar in VS2010 VB.NET A

Thanks MrG, this worked perfect.