Text Editor CKEditor usage

Latest text editor, FCK upgrade: ckeditor.net

CKEditor.NET.dll version: 3.6.4.0

Official website: http://ckeditor.com/

：

Configure Web. config:

<system.web>
<pages>
<controls>
<add tagprefix= "CKEditor" assembly= "ckeditor.net" namespace= "Ckeditor.net"/>
</controls>
</pages>

<system.web>

Add tags to the page:

<%@ Register assembly= "ckeditor.net" namespace= "ckeditor.net" tagprefix= "CKEditor"%>

To insert a control on an ASPX page:

<ckeditor:ckeditorcontrol id= "Txtremark" runat= "Server" basepath= "~/usercontrol/ckeditor/" Toolbar= "Source| preview| templates| Cut| copy| paste| undo| redo| bold| italic| underline| Font| fontsize| textcolor| bgcolor| Maximize "width=" 388px "height=" 150px ">

Toolbar settings, such as the control is loaded in JS, the settings of the toolbar is not valid, you need to reset the toolbar in JS:

3 Modes of Setup:

1, set in the page: Set the Toolbar property to "|" Separate each menu, "-" to add a separator, "/" to add a newline

Toolbar= "source| preview| templates| Cut| copy| paste| undo| redo| bold| italic| underline| Font| fontsize| textcolor| bgcolor| Maximize "

2,CS Code: Add in the code (the default all toolbar display)

"-" delimiter, "/" newline, new object[] for a group

TxtRemark.config.toolbar = new object[]

{

New object[] {"Source", "-", "Preview", "-", "Templates"},

New object[] {"Cut", "Copy", "Paste", "Pastetext", "Pastefromword", "-", "Print", "Spellchecker", "Scayt"},

New object[] {"Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "Removeformat"},

New object[] {"Form", "checkbox", "Radio", "TextField", "Textarea", "Select", "button", "ImageButton", "HiddenField"},

"/",

New object[] {"Bold", "Italic", "Underline", "-", "subscript", "superscript"},

New object[] {"Numberedlist", "BulletedList", "-", "outdent", "Indent"},

New object[] {"Justifyleft", "Justifycenter", "Justifyright", "Justifyblock"},

New object[] {"Link", "Unlink", "Anchor"},

New object[] {"Image", "Flash", "Table", "Horizontalrule", "Smiley", "Specialchar", "PageBreak", "Iframe"},

"/",

New object[] {"Styles", "Format", "Font", "FontSize"},

New object[] {"TextColor", "BGColor"},

New object[] {"Maximize"}

}

3. JS in Settings: Call the Load Editor control (if you use this method, the toolbar set in the page or code is not valid, if you do not need the JS call control can take the 1th method)

$(

function ()

{

Ckeditor.replace (' Txtremark ', {
Toolbar://Reset Toolbar
[

[' Source ', ' Preview ',],
[' Bold ', ' Italic ', ' underline '],
[' outdent ', ' Indent '],
[' Justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '],
[' Link ', ' Unlink '],
‘/‘,
[' Font ', ' FontSize '],
[' TextColor ', ' BGColor ', '-', ' maximize ']
]
}); Editor

}
);

JS Value and Assignment:

Assignment: CKEDITOR.instances.txtRemark.setData ("value");

Value: var obj = CKEDITOR.instances.txtRemark.getData ();

Get values in CS code:

Txtremark.text

Text Editor CKEditor usage