526互联

【补充】富文本编辑器 KindEditor

发布时间 2023-07-21 15:57:37作者: Chimengmeng

【补充】富文本编辑器 KindEditor

【一】介绍

  • KindEditor是一个富文本编辑器，旨在为开发人员提供在网页上进行富文本编辑的功能。
  • 它基于JavaScript开发，并且具有简单易用、功能丰富的特点，适用于Web应用程序的构建。

【二】特点

  • 可配置性：KindEditor通过配置参数让你能够对编辑器进行自定义设置，以满足不同的需求。
  • 轻量级：它的核心代码很小，加载速度快，不会给网页带来额外的负担。
  • 兼容性良好：KindEditor支持主流的浏览器，包括IE、Firefox、Chrome等。
  • 支持多种功能：包括字体、颜色、对齐方式、图片上传、表格插入、链接等编辑功能。
  • 扩展性强：允许开发人员根据需求进行插件开发，以扩展编辑器功能。

【三】使用方法

  • 下载KindEditor：你可以在KindEditor官网上下载到最新的版本，并将其解压缩到你的项目目录下。
  • 引入相关文件：在HTML文件中引入KindEditor所需的CSS和JavaScript文件，确保文件路径正确。
  • 创建编辑器实例：通过调用KindEditor.create()方法创建一个富文本编辑器实例，并指定编辑器的ID和配置参数。
  • 使用编辑器功能：通过编辑器实例提供的API方法，可以实现对文本的格式设置、插入图片、添加链接等操作。
  • 提交表单数据：在提交表单数据时，可以通过调用KindEditor.sync()方法将编辑器的内容同步到textarea元素中，以便后端处理。

【四】开发文档示例详解

  • 富文本编辑器可以使我们摆脱光秃秃的文本输入框，让我们支持输入代码图片等内容并自动加载格式
    • 富文本编辑器的功能有很多
    • 在使用过程中要参照开发文档进行相关的配置才能使用
  • 这里我只讲我的KindEditor使用过程

KindEditor 官网：http://kindeditor.net/doc.php

【1】首先下载富文本编辑器

  • 将压缩包下载到本地

  • 查看编辑器使用文档

http://kindeditor.net/docs/usage.html

【2】修改HTML页面

  • 在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>

  • id在当前页面必须是唯一的值。

  • 在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容

    • 则必须转换HTML特殊字符(>,<,&,”)。
    • 具体请参考各语言目录下面的demo.xxx程序
      • 目前支持ASP、ASP.NET、PHP、JSP。

  • 在有些浏览器上不设宽度和高度可能显示有问题

    • 所以最好设一下宽度和高度。
    • 宽度和高度可用inline样式设置
    • 也可用 编辑器初始化参数 设置。

  • 在该HTML页面添加以下脚本。

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>
  • 通过自定义ID值取到我们写好的文本域标签

【3】方法小结

  • 先下载文件
  • 定义文本域标签并给文本域标签定义属性
    • 定义属性是为了方便后面的标签选择时使用
  • 在js代码部分引入官方文档的固定写法
    • 先引入富文本域文件
    • 利用属性选择器找到我们需要使用编辑器的文本域标签

【五】个人案例演示

【1】定义文本域标签及赋予属性

<p>内容</p>
<div>
    <textarea name="content" id="id_content" cols="30" rows="10">

    </textarea>
</div>

【2】调用富文本编辑器配置

  • 引入kindeditor支持js文件
    • 利用属性选择到相应的文本域标签
  • 配置参数
<script charset="utf-8" src="{% static 'js/kindeditor/kindeditor-all-min.js' %}"></script>
<script>
    var callBackPath = '{% static 'js/kindeditor/redirect.html' %}'
KindEditor.ready(function (K) {
    window.editor = K.create('#id_content', {
        width: '100 %',
        height: '300px',
        // 控制上面的功能的多少
        items: [
            'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
            'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
            'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
            'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
            'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
            'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
            'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
            'anchor', 'link', 'unlink', '|', 'about'
        ],

        resizeType: 1,
        allowImageUpload: true,//允许上传图片
        allowFileManager: true, //允许对上传图片进行管理
        // 上传图片的后端存储路径
        uploadJson: '/upload_img/?callBackPath=' + callBackPath, // 后端提交路径
        afterUpload: function () {
            this.sync();
        }, //图片上传后，将上传内容同步到textarea中
        afterBlur: function () {
            this.sync();
        },   //失去焦点时，将上传内容同步到textarea中
        afterCreate: function () {
            this.sync();
        },
        extraFileUploadParams: {
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        },
    });
});
</script>
  • KindEditor部分参数详解
    • 支持用户上传图片配置
K.create('#id_content', {
    width: '100 %',
    height: '300px',
    // 控制上面的功能的多少
    items: [
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'
    ],

    resizeType: 1,
    allowImageUpload: true,//允许上传图片
    allowFileManager: true, //允许对上传图片进行管理
    // 上传图片的后端存储路径
    uploadJson: '/upload_img/?callBackPath=' + callBackPath, // 后端提交路径
    afterUpload: function () {
        this.sync();
    }, //图片上传后，将上传内容同步到textarea中
    afterBlur: function () {
        this.sync();
    },   //失去焦点时，将上传内容同步到textarea中
    afterCreate: function () {
        this.sync();
    },
    extraFileUploadParams: {
        'csrfmiddlewaretoken': '{{ csrf_token }}'
    },
});