Learning to organize using kindeditor rich text editor in PHP

1、 Download editor

Download link : download - KindEditor - On-line HTML Editor

2、 Deploy kindeditor Editor

Unzip the downloaded package and put it in the program directory of the website

3、 stay html The editor is introduced into the page

Create a text field textarea

<textarea name="content" id="Contents" style="width:600px;height:450px;"></textarea>

Introduce on the page js file

<script src="/static/kindeditor/kindeditor-all-min.js"></script>
<script src="/static/kindeditor/lang/zh-CN.js"></script>

Initialize editor

<script>
    // Editor 
    var KE;
    KindEditor.ready(function (K) {
    
        KE = K.create('#Contents', {
    
            allowFileManager: true, // Browse the picture space 
            filterMode: false, //HTML Special code filtering 
            afterBlur: function () {
     this.sync(); }, // Editor lost focus (blur) The callback function to execute when （ The editor's HTML Data synchronization to textarea）
            afterUpload: function (url, data, name) {
     // The callback function executed after uploading the file , It has to be for 3 Parameters 
                if (name == "image" || name == "multiimage") {
     // When uploading pictures individually or in batches 
                    var img = new Image(); img.src = url;
                    img.onload = function () {
     // The image must be loaded to get the size 
                        if (img.width > 100) {
    
                            KE.html(KE.html().replace('<img src="' + url + '" width="100" height="100"/>', '<img src="' + url + '" width="100" height="100px"/>'))
                            //KE.html(KE.html().replace('<img src="' + url + '" width="300"/>', '<img src="' + url + '" width="300"/>'))
                        }
 
                    }
                }
            }
        });
        KindEditor.create('#Contents', {
     allowImageUpload: false, resizeType: 1, width: "600px", height: "300px" });
    });
</script>

4、Ajax Cannot get... When submitting the form KindEditor Content

1、 problem ： When used Ajax When you submit the form ,KindEditor Can't get the content of ,HTML Data is not available .

2、 reason ：jax When submitting ,KindEdito Of HTML The data hasn't been synchronized to the form yet .

3、 solve ： Use http://kindeditor.net/doc3.php?cmd=config Of afterBlur attribute .

KindEditor.ready(function (K) {
    

	window.editor = K.create('#AContent', {
    
	
	// key , Execute when you lose focus this.sync(), Synchronize the entered value to textarea in ;
	
	afterBlur: function () {
     
	this.sync(); 
	}
	
	});

});

Used on it afterBlur Method does a process , This method is triggered when the edit box is out of focus , Then do data synchronization