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

时间：2022-08-31 14:59:15

1.编辑器的使用套路

  1. 使用编辑器，首先要引入编辑器的js文件和css文件.
  2. 使用内置的方法实例化对象，在实例化对象的时候，需要传入编辑器占位的id，也可以传递参数，或事件绑定.
  3. 传递参数会以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"});
标签：

相关文章