Usage configuration of the Rich Text Editor CKEDITOR (problem annotation), text editor ckeditor

Usage configuration of the Rich Text Editor CKEDITOR (problem annotation), text editor ckeditor

CKEDITOR is a very lightweight Rich Text Editor. For example, refer to how to use it on the Internet. I use. net as an example and use it on the aspx page,

Preparation: first download the control package and add the unzipped folder to the project root directory.

Step 1: Reference js, <script charset = "UTF-8" type = "text/javascript" src = "../ckeditor. js"> </script>

Step 2: place the server control. <asp: TextBox ID = "tbContent" runat = "server" TextMode = "MultiLine" class = "ckeditor inputstyle4"> </asp: TextBox>

Step 3: Call controls,

<Script type = "text/javascript"> CKEDITOR. replace ('<% = tbContent. clientID. replace ("_", "$") %> '); </script>

 

Remember: the code in step 2 and Step 3 should be put together in order;

 

 

There is also a reference method

<Script type = "text/javascript"> CKEDITOR. replace ('tbcontent'); </script> method. This method references the server control to be unavailable. Of course, you can also write the script code in the head.

<Script type = "text/javascript">

// Window. onload = function ()

//{

// CKEDITOR. replace ('tbcontent ');

//};

</Script>

After completing the preceding steps, you can view the effect. to configure the width, height, and color of the control, you can open the config. js file in the folder,

Config. width = 660; // set the width

Config. height = 600; // set the height

Config. uiColor = '# ced9df'; // set the background color.

 

 

If you want to adjust the margin, you can place a div around the control to control the margin, for example:

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

<Textarea id = "tbContent" class = "inputstyle4"> </textarea>

<Script type = "text/javascript"> CKEDITOR. replace ('txtcontent'); </script>

 

Or reference in head

$ (Function (){
CKEDITOR. replace ('txtcontent', {height: '300px ', width: '500px '});
});

 

The only drawback of using this method is that, if runat = server is added to textarea, it will not be identified and CKEDITOR will not be able to call it. If runat = server is added to textarea, it will become a server control, CKEDITOR is a client control that cannot be identified, so it cannot be called. If you put the control in the UpdatePanel (partial refresh) server control, if the control has already entered a value, you only need to click another server control button, it will cause an exception or clear the value in the control, but my solution is

When the page is loaded for the first time, it determines whether the value in the specific text box on the page is blank. If it is not blank, it is directly filled with the value of the text box, as shown below:

Protected void Page_Load (object sender, EventArgs e)

{

If (! Page. IsPostBack)

{

If (! String.IsNullOrWhiteSpace(this.txt tuwen_title.Value.ToString ()))

{

This.txt tuwen_title.Value = this.txt tuwen_title.Value.ToString ();

}

If (! String.IsNullOrWhiteSpace(this.txt tuwen_author.Value.ToString ()))

{

This.txt tuwen_author.Value = this.txt tuwen_author.Value.ToString ();

}

}

}

 

So far, the problem in using the CKEDITOR Rich Text control has ended.