富文本框的种类有很多，例如

  • CKEditor
  • UEEditor
  • TinyEditor
  • KindEditor

官网地址

下载地址

文件夹说明

├── asp                          asp示例
├── asp.net                    asp.net示例
├── attached                  空文件夹，放置关联文件attached
├── examples                 HTML示例
├── jsp                          java示例
├── kindeditor-all-min.js 全部JS（压缩）
├── kindeditor-all.js        全部JS（未压缩）
├── kindeditor-min.js      仅KindEditor JS（压缩）
├── kindeditor.js            仅KindEditor JS（未压缩）
├── lang                        支持语言
├── license.txt               License
├── php                        PHP示例
├── plugins                    KindEditor内部使用的插件
└── themes                   KindEditor主题

基本使用

<!-- 准备一个textarea -->
<textarea name="content" id="content"></textarea>
<!-- 导入kindeditor的js文件 -->
<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
<script>
    KindEditor.ready(function(K){
  	editor = K.create(
	        \'#content\', 
	        {
	            resizeType: 1, // 是否可以拖拽文本框的大小 0：不能  1： 只能上下  2：上下左右均可
	            allowPreviewEmoticons: false,    // 为true时，鼠标放到表情上可以预览
	            items: [
	                \'source\', \'|\', \'undo\', \'redo\', \'|\', \'preview\', \'print\', \'template\', \'code\', \'cut\', \'copy\', \'paste\'
	            ],           // 配置工具栏的参数，  "/"表示换行   "|"表示分割符

　　　　             width: \'100%\',       // 文本框宽度(可以百分比或像素)
	　　        height: \'300px\',     // 文本框高度(只能像素)
　　　　            minWidth: 200,       // 最小宽度（数字）
	           minHeight: 400      // 最小高度（数字）
	        }
	    );
    });
      

    // 编辑完成后获取编辑的数据
    editor.html()
</script>

详细参数

文件上传

var kind = KindEditor.create(\'#content\', {
    width: \'100%\',       // 文本框宽度(可以百分比或像素)
    height: \'300px\',     // 文本框高度(只能像素)
    minWidth: 200,       // 最小宽度（数字）
    minHeight: 400,      // 最小高度（数字）
    uploadJson: \'/kind/upload_img/\',    // 指定文件上传的地址
    extraFileUploadParams: {
        \'csrfmiddlewaretoken\': \'{{ csrf_token }}\'
    },
    fileManagerJson: \'/kind/file_manager/\',
    allowPreviewEmoticons: true,
    allowImageUpload: true      // 为true时可以显示图片上传按钮，可以上传本地的图片
});

使用afterBlur

当富文本框里面书写的内容通过表单提交后后台不能通过textarea获取的问题，只需要加上 afterBlur: function(){this.sync();} 即可

KindEditor.ready(function(K){
    editor = K.create(
        \'#content\', 
	{
	    resizeType: 1, // 是否可以拖拽文本框的大小 0：不能  1： 只能上下  2上下左右均可
	    allowPreviewEmoticons: false,    // 为true时，鼠标放到表情上可以预览表情
	    items: [
	        \'source\', \'|\', \'undo\', \'redo\', \'|\', \'preview\', \'print\', \'template\', \'code\', \'cut\', \'copy\', \'paste\'
	    ]           // 配置工具栏的参数，  "/"表示换行   "|"表示分割符

	    width: \'100%\',       // 文本框宽度(可以百分比或像素)
            height: \'300px\',     // 文本框高度(只能像素)
            minWidth: 200,       // 最小宽度（数字）
            minHeight: 400,      // 最小高度（数字）
            afterBlur: function(){this.sync();}
        }
    );
});

添加这个属性后，后台就可以获取到富文本所在的textarea里的内容了

 解决按ENTER键触发事件的问题

KindEditor.ready(function(K) {
    editor = K.create(\'#message\', {
        newlineTag : "br" , 
        //optional
        afterCreate : function() { //设置编辑器创建后执行的回调函数
            var self = this;
            var $txt = $("iframe").contents().find("body");
            $txt.keydown(function (event) {
                if(event.keyCode==13 && !event.ctrlKey){
                    self.sync();
                    alert("回车事件");
                }
            });
            K.ctrl($txt[0], 13, function(e) {
                K.insertHtml(\'textarea[name="message"]\',\'<br/>\');
            });
        }
    });
});

 

版权声明：本文为Myarticles原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Myarticles/articles/10004339.html2