CKEditor/FCKEditor Quick usage tutorial (including insert pictures)

Its open source protocol is based on GPL, LGPL and MPL. Official website:/

Generally speaking, when we edit content, we first read into textarea and then assign the content of textarea to the editor. Because directly assigning content to the editor's Value attribute as a string uses JavaScript code, to prevent the JS code from being interfered with by double quotes, line breaks, etc. in the content, it is most convenient to read it into textarea first.

Using FCKeditor 2.6.5

Copy the codeThe code is as follows:

 
<div><textarea  name="content">cftea</textarea></div> 
<script type="text/javascript" src="fckeditor/"></script> 
<script type="text/javascript"> 
<!-- 
var oFCKeditor = new FCKeditor("fckcontent"); 
= "fckeditor/"; // fckeditor folder location.
(); 
//--> 
</script> 

Originally, the textarea should be hidden with display:none, but in order to see the effect, it is not hidden here.

In this way, the editor will automatically associate it with fckcontent. When opening a web page, FCKeditor automatically reads the content of textarea, and automatically assigns its content (automatically XHTML) to textarea when submitting.

Note that the id and name of our textarea are different, why?

This should be a point where this version is not perfect. If we set the id and name value of textarea to the same, then the name value of the FCKeditor text area is also a content. There will be two on the server side ("content").Count. It is a bit inconvenient for us to get the value on the server side, so we have to use ("content")(0). If we set id to fckcontent, then the name of the FCKeditor text area is fckcontent, which is different from textarea.

Set the editor width and height

var oFCKeditor = new FCKeditor("fckcontent", 500, 300);
or

Copy the codeThe code is as follows:

 
var oFCKeditor = new FCKeditor("fckcontent"); 
 = 500; 
 = 300; 

Setting up toolbar

var oFCKeditor = new FCKeditor("fckcontent", 500, 300, "Basic");
Pay attention to the fourth parameter, its optional values are Basic and Default, and be careful not to make mistakes in case, which represent the basic toolbar and the default toolbar (all buttons).

Set initial value, set value, take value

Set initial value

In fact, setting initial values is rarely used because they are generally associated with textarea, so they are just listed out simply and not delved into it. To illustrate, if the associated textarea exists, then assigning an initial value is useless.

var oFCKeditor = new FCKeditor("fckcontent2", 500, 300, "Default", "I");
or

Copy the codeThe code is as follows:

 
var oFCKeditor = new FCKeditor("fckcontent2", 500, 300, "Default"); 
 = "fckeditor/"; 
= "cftea"; // Must be before Create
(); 

Set value

To demonstrate this example, it is best to put it in the event handler of the button, with the purpose of some delay, otherwise it would be said that the FCKeditorAPI is not defined.

Copy the codeThe code is as follows:

 
var oEditor = ("fckcontent"); 
("I");

Get the value

To demonstrate this example, it is best to put it in the event handler of the button, with the purpose of some delay, otherwise it would be said that the FCKeditorAPI is not defined.

Copy the codeThe code is as follows:

 
var oEditor = ("fckcontent"); 
alert(()); // There is another similar method that is GetHTML, but GetHTML is not recommended.

It is dangerous for you to do this:

Copy the codeThe code is as follows:

 
var oEditor = ("fckcontent"); 
("I");
alert(()); // The value here is not necessarily the value assigned in the previous sentence.  Because they are too close, they have already alerted before they have time to give them.

Insert picture

To demonstrate this example, it is best to put it in the event handler of the button, with the purpose of some delay, otherwise it would be said that the FCKeditorAPI is not defined.

("fckcontent").InsertHtml("<img src...>");