kindeditor和ueditor编辑器使用方法总结

最新推荐文章于 2025-07-09 15:25:45 发布

Jsonkim

最新推荐文章于 2025-07-09 15:25:45 发布

阅读量6.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： /root/WEB前端文章标签：编辑器 web编辑器 kindeditor ueditor

本文链接：https://blog.youkuaiyun.com/u013987661/article/details/54378005

/root/WEB前端专栏收录该内容

24 篇文章

订阅专栏

本文介绍了KindEditor和UEditor两种流行的富文本编辑器的基本使用方法，包括如何引入资源文件、创建编辑器实例、定制控件及配置项等。通过示例展示了不同场景下的编辑器配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.编辑器的使用套路

使用编辑器，首先要引入编辑器的js文件和css文件.
使用内置的方法实例化对象，在实例化对象的时候，需要传入编辑器占位的id，也可以传递参数，或事件绑定.
传递参数会以json的形式传递进去，包括各种控件的自定义和某些特性的禁用.

2.kindeditor编辑器的使用

2-1.引入编辑器所需的资源文件

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

2-2.在html代码中放入编辑器的占位符

<textarea name="content" style="width:700px;height:200px;visibility:hidden;">KindEditor</textarea>

2-3.创建简单的编辑器并绑定一个事件

<script language="javascript">
var editor;
KindEditor.ready(function(K) {
    editor = K.create('textarea[name="content"]', {
                 allowFileManager : true
            });
    K('input[name=getHtml]').click(function(e) {
                    alert(editor.html());
            });
});
</script>

2-4.创建一个简单的编辑器，并自定义控件

<script language="javascript">
var editor;
KindEditor.ready(function(K) {
    editor = K.create('textarea[name="content"]', {
        resizeType : 1,
        allowPreviewEmoticons : false,
        allowImageUpload : false,
        items : [
            'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
            'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
            'insertunorderedlist', '|', 'emoticons', 'image', 'link']
    });
});
</script>

2-5.生成三个不同的编辑器，使用三种不同的粘帖配置

<script language='javascript'>
    KindEditor.ready(function(K) {
        K.create('#content1', {
            pasteType : 0 
        }); //为0表示不能向编辑器红粘帖
        K.create('#content2', {
            pasteType : 1
        }); //为1表示会把粘贴板中的样式过虑，保留纯文本进行黏贴
        K.create('#content3', {
            pasteType : 2
        }); //为2表示粘帖的时候，会把html样式一起粘帖进去
    });
</script>

3.ueditor编辑器的使用

3-1.创建一个默认的ue编辑器

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

3-2.修改配置

1.直接改配置文件(修改“ueditor.config.js”文件，)

取消280行的注释
//,autoHeightEnabled:true

2.实例化对象的时候传参数

var ue = UE.getEditor('container', {
    autoHeight: false
});

4.对比和总结

4-1.ue编辑器和ke编辑器的容器是不同的

一个是textarea标签，一个是script标签，如果是ke的textarea标签的话，表单的参数名可以那么name指定，而ue提交表单的默认参数名是editorValue，可以通过创建对象的时候传入textarea参数解决。

ke的

<textarea name="content"></textarea>

ue的

    var ue = UE.getEditor('editor',{toolbars: [
    ['fullscreen', 'source', 'undo', 'redo'],
    ['bold', 'italic']
],textarea:"content"});