kindeditor的使用

最新推荐文章于 2025-07-06 12:20:01 发布

原创最新推荐文章于 2025-07-06 12:20:01 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#kindeditor #富文本编辑器

web 前端专栏收录该内容

7 篇文章

订阅专栏

本文将指导您如何通过下载、配置和初始化KindEditor，实现网站中的富文本编辑功能，包括上传管理、文件管理及自定义编辑器样式。

-1.http://pan.baidu.com/s/1pLhB6Dd下载kindeditor放置到工程中

–2.引用到项目中

<script type="text/javascript" charset="utf-8" src="<%=basePath%>/kindeditor-4.1.10/kindeditor.js"></script>      
    <script charset="utf-8" src="<span style="font-family: Arial, Helvetica, sans-serif;"><%=basePath%></span>
    <span style="font-family: Arial, Helvetica, sans-serif;">/</span>
    <span style="font-family: Arial, Helvetica, sans-serif;">kindeditor/lang/zh_CN.js"></script></span>

-3.页面

<textarea id="editor_id" name="conten style="visibility:hidden;height: 250px;">

-4.初始化编辑器

var editor; 
var k;
KindEditor.ready(function (K) {
         k=K;
     editor= K.create('#editor_id', {  
        //上传管理  
        uploadJson: '<%=basePath%>kindeditor-4.1.10/jsp/upload_json.jsp',  
        //文件管理  
        fileManagerJson: '<%=basePath%>/kindeditor-4.1.10/jsp/file_manager_json.jsp',  
        allowFileManager: true,  
        //设置编辑器创建后执行的回调函数  
        afterCreate: function () {  
            var self = this;  
            K.ctrl(document, 13, function () { 

               self.sync();  
               // K('form[name=example]')[0].submit();  
            });  
            K.ctrl(self.edit.doc, 13, function () {  

                self.sync();  
               // K('form[name=example]')[0].submit();  
            });  
        },  
        //上传文件后执行的回调函数,获取上传图片的路径  
        afterUpload: function (url) {  
            var a = $("#uppics").val();  
            if (a.length > 0) {  
                $("#uppics").val(a + "," + url);  
            } else {  
                $("#uppics").val(url);  
            }
            //alert($("#uppics").val())  
        },  
        afterCreate: function () {  //要取值设置这里 这个函数就是同步KindEditor的值到textarea文本框  
            this.sync();

        },  
        afterBlur: function () {  //同时设置这里   
           this.sync();  

        },  
        items:  
                [  
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyfull',  
                        'emoticons', 'multiimage', 'baidumap', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',  
                        'superscript', 'formatblock', 'fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold',  
                        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat'  
                ]  
    });  
    });