kindeditor富文本编辑器的使用

百度下载kindeditor 解压放至项目中 可以删除一些不必要的文件夹

然后在页面引入

<link href="kindeditor-4.1.10/themes/default/default.css" rel="stylesheet" />
<script src="kindeditor-4.1.10/kindeditor-min.js"></script>
<script src="kindeditor-4.1.10/lang/zh_CN.js"></script>

js代码初始化

//富文本编辑器简单模式初始化
var editor;
KindEditor.ready(function(K) {
    editor = K.create('textarea[name="content"]', {
        resizeType : 0,//禁止拉伸，1可以上下拉伸，2上下左右拉伸
        filterMode: false,//true时过滤HTML代码，false时允许输入任何代码。
        allowPreviewEmoticons : false,
        allowImageUpload : false,
        cssData: 'body{font-family: 微软雅黑;font-size: 14px;padding:30px;}',
        afterFocus : function(){//获得焦点 删除默认文字信息
            if(editor.html() == '<span style="color:#9B9B9B;">写回答……</span>'){
                editor.html('');
            }
        },
        afterBlur: function(e){
            // console.log(editor.html());
            if(editor.html() == '<br/>' || editor.html() == ''){
                editor.html('<span style="color:#9B9B9B;">写回答……</span>');
            }
        },//失去焦点，同步信息数据
        items : [
            'bold', 'italic', 'insertunorderedlist', 'image', 'media', 'link', 'emoticons']
    });
});

cssData: 'body{font-family: 微软雅黑;font-size: 14px;padding:30px;}' 设置文本相关属性

 

html

<textarea id="mul_input" name="content" style="width:1091px;height:416px;visibility:hidden;display: block;resize: none;"><span style="color: #9B9B9B;">写回答……</span></textarea>

中间的span标签作为默认提示文字 获取焦点删除 失去焦点写入

默认的样子

修改items : [ 'bold', 'italic', 'insertunorderedlist', 'image', 'media', 'link', 'emoticons'] 可以增删上面的功能按钮

将按钮替换成自己的图片

修改themes/default/default.css 其中的

.ke-icon-bold {} 进行修改 放入自定义的图片

获取 编辑器内输入的文本：$('#editor_id').val();

先在失去焦点时添加

afterBlur: function(e){
    this.sync();
}

 

向kindeditor富文本赋值：

editor.html('<span style="color: #9B9B9B;">写回答……</span>');