Use configuration for Rich Text editor CKEditor (problem annotations)

CKEditor is a very lightweight rich text editor, such as: reference on the use of the Internet, I use. NET as an example, in the ASPX page,

Prepare to work: First download the control package and add the entire extracted folder to the project root directory.

The first step: Reference js, <script charset= "Utf-8" type= "Text/javascript" src= ". /ckeditor/ckeditor.js "></script>

Step Two: Place the server control, <asp:textbox id= "tbcontent" runat= "Server" textmode= "MultiLine" class= "CKEditor inputstyle4" >< /asp:textbox>

Step three: Call the control,

<script type= "Text/javascript" >ckeditor.replace (' <%=tbcontent.clientid.replace ("_", "$")%> '); </ Script>

Remember: The second step and the third step of the code to be put together, to have a sequential placement;

There is also a reference method

<script type= "Text/javascript" >ckeditor.replace (' tbcontent ');</script> method, this method references a server control that is not available, Of course, you can write the script code in the head.

<script type= "Text/javascript" >

Window.onload = function ()

//{

Ckeditor.replace (' tbcontent ');

//};

</script>

Complete the above steps to see the effect, if you need to configure the control width, height, color, and so on, you can open the folder in the Config.js file,

Config.width = 660; Set width

Config.height = 600; Set height

Config.uicolor = ' #ced9df ';//Set Background color

If you want to adjust the margins, my workaround is to place a div around the perimeter of the control to control the margins, such as:

If you want to submit a form using jquery, you can also use the following methods:

<textarea id= "tbcontent" class= "Inputstyle4" ></textarea>

<script type= "Text/javascript" >ckeditor.replace (' txtcontent ');</script>

or reference within head

$ (function () {
Ckeditor.replace (' txtcontent ', {height: ' 300px ', Width: ' 500px '});
});

Using this method, the only disadvantage is that if you add textarea runat=server, it will not be recognized, CKEditor will not be able to call, textarea plus runat=server the words become a server control, CKEditor is not recognized by the client control, so the call is not, if you put the control in the UpdatePanel (local refresh) server control, if the control has entered a value, you just click on the other server control button, you will throw an exception or empty the value inside the control, But my solution is to

When the page is loaded for the first time, it determines whether the value in the text box that is unique to the page is empty, and if it is not, backfill the value directly for the text box, as follows:

protected void Page_Load (object sender, EventArgs e)

{

if (! Page.IsPostBack)

{

if (!string. Isnullorwhitespace (This.txttuwen_title. Value.tostring ()))

{

This.txttuwen_title. Value = This.txttuwen_title. Value.tostring ();

}

if (!string. Isnullorwhitespace (This.txttuwen_author. Value.tostring ()))

{

This.txttuwen_author. Value = This.txttuwen_author. Value.tostring ();

}

}

}

At this point, the problem with the CKEditor Rich text control ends.

Use configuration for Rich Text editor CKEditor (problem annotations)