Usage of the text editor CKEditor

Usage of the text editor CKEditor

Latest text editor, FCK upgraded: 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" %>
 

 

Insert controls on the 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. If this control is loaded in js, the toolbar is invalid. You need to reset the toolbar in js:

Three methods:

1,Set in the page: Set the Toolbar attribute to "|" to separate each menu, "-" to add a separator, "/" to add a line feed

   
Toolbar="Source|Preview|Templates|Cut|Copy|Paste|Undo|Redo|Bold|Italic|Underline|Font|FontSize|TextColor|BGColor|Maximize"
 

2,Cs code: add it to the Code (all toolbar displays by default)

   
"-" Delimiter, "/" line break. The new object [] is 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,Setting in JS: Call to load the editor control (if this method is used, the toolbar set in the page or code is invalid. If JavaScript does not need to call the control, you can use 1st methods)

   
$ (
    
Function ()
    
{
    
CKEDITOR. replace ('txtremark ',{
Toolbar: // reset the toolbar
[
    
['Source', 'preview',],
['Bold ', 'italic', 'underline'],
['Outdent ', 'indent'],
['Justifyleft', 'justifycenter', 'justifyright', 'justifyblock'],
['Link', 'unlink'],
'/',
['Font', 'fontsize'],
['Textcolor', 'bgcolor', '-', 'maximize']
]
}); // Editor
    
}
);
 

 

Js values and values:

   
Value assignment: CKEDITOR.instances.txt Remark. setData ("value ");
    
Value: var obj = CKEDITOR.instances.txt Remark. getData ();
 

 

 

Obtain the value in the cs code:

   
txtRemark.Text