KindEditor 基本的使用

翟鸿振

2023-12-01

一. KindEditor 是什么？

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。
KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

1 主要特点

快速：体积小，加载速度快
开源：开放源代码，高水平，高品质
底层：内置自定义 DOM 类库，精确操作 DOM
扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、 Opera

二. 官方网站

kindeditor 官方网站 :http://kindeditor.net/demo.php

三. 编辑器使用方法

1 下载编辑器

下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。
下载页面: http://www.kindsoft.net/down.php

2 部署编辑器

解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/

Note

您可以根据需求删除以下目录后上传到服务器。
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

3 修改HTML页面

3.1. 在需要显示编辑器的位置添加textarea输入框。

<!--kindEditor编辑器的主体-->
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
<!--书写的内容-->
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>

Note

id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。

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

<!--引入kindEditor核心js-->
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<!--引入解决kindEditor中文乱码的js-->
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>

Note

第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考编辑器初始化参数。

//第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器
var options = {
        cssPath : '/css/index.css',
        filterMode : true
};
//给编辑器初始化参数 。
var editor = K.create('textarea[name="content"]', options);

4. 获取HTML数据

// 取得HTML内容
html = editor.html();

// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery

// 设置HTML内容
editor.html('HTML内容');

Note

KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，所以用form方式提交数据，不需要手动执行sync()函数。
KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式，保留所有标签。

// 关闭过滤模式，保留所有标签
KindEditor.options.filterMode = false;

KindEditor.ready(function(K)) {
        K.create('#editor_id');
}

四. KindEditor 初始化参数

  KindEditor.create('#editor_id', {
       width :'599px',// 宽度            可以设置px或%，比textarea输入框样式表宽度优先度高。数据类型: String默认值: textarea输入框的宽度
       height:'400px',//高度，           只能设置px，比textarea输入框样式表高度优先度高。数据类型: String默认值: textarea输入框的高度
       minWidth:599,//最小宽度，         单位为px。数据类型: Int 默认值: 650
       minHeight:100,//最小高度，       单位为px。数据类型: Int 默认值: 100
       resizeType:1,//是否可以拖动       2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
       items:[
       'source'/*HTML代码*/, '|', 'undo'/*后退*/, 'redo'/*前进*/, '|', 'preview'/*预览*/, 'print'/*打印*/,
       'template'/*插入模板*/, 'code'/*插入程序代码*/, 'cut'/*剪切*/, 'copy'/*复制*/, 'paste'/*粘贴*/,
       'plainpaste'/*粘贴为无格式文本*/, 'wordpaste'/*从Word粘贴*/, '|', 'justifyleft'/*左对齐*/,
       'justifycenter'/*居中*/, 'justifyright'/*居中*/,'justifyfull'/*两端对齐*/, 'insertorderedlist'/*编号*/,
       'insertunorderedlist'/*项目符号*/, 'indent'/*增加缩进*/, 'outdent'/*减少缩进*/, 'subscript'/*下标*/,
       'superscript'/*上标*/, 'clearhtml'/*清理HTML代码*/, 'quickformat'/*一键排版*/, 'selectall'/*全选*/, '|',
       'fullscreen'/*全屏显示*/, '/','formatblock'/*段落*/, 'fontname'/*字体*/, 'fontsize'/*文字大小*/, '|',
       'forecolor'/*文字颜色*/, 'hilitecolor'/*文字背景*/, 'bold'/*粗体*/,'italic'/*斜体*/, 'underline'/*下划线*/,
       'strikethrough'/*删除线*/, 'lineheight'/*行距*/, 'removeformat'/*删除格式*/, '|', 'image'/*图片*/, 'multiimage'/*批量图片上传*/,
       'flash'/*Flash*/, 'media'/*视音频*/, 'insertfile'/*插入文件*/, 'table'/*表格*/, 'hr'/*插入横线*/, 'emoticons'/*插入表情*/,
       'baidumap'/*百度地图*/, 'pagebreak'/*插入分页符*/,'anchor'/*插入锚点*/, 'link'/*超级链接*/, 'unlink'/*取消超级链接*/, '|', 'about'/*关于*/
        ],//配置编辑器的工具栏，      其中”/”表示换行，”|”表示分隔符。数据类型: Array       默认值:就是面这个
       noDisableItems:['source', 'fullscreen'],//  designMode 为false时，要保留的工具栏图标。数据类型: Array  默认值: [‘source’, ‘fullscreen’]
       filterMode:true,//true时根据 htmlTags 过滤HTML代码，false时允许输入任何代码。数据类型: Boolean  默认值: true
       htmlTags:{
	       font : ['color', 'size', 'face', '.background-color'],
	           span : [
	           '.color', '.background-color', '.font-size', '.font-family', '.background',
	           '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'
	       ],
	           div : [
	           'align', '.border', '.margin', '.padding', '.text-align', '.color',
	           '.background-color', '.font-size', '.font-family', '.font-weight', '.background',
	           '.font-style', '.text-decoration', '.vertical-align', '.margin-left'
	       ],
	           table: [
	           'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor',
	           '.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
	           '.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',
	           '.width', '.height', '.border-collapse'
	       ],
	           'td,th': [
	           'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',
	           '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
	           '.font-style', '.text-decoration', '.vertical-align', '.background', '.border'
	       ],
	           a : ['href', 'target', 'name'],
	           embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
	           img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
	           'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
	           'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
	           '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
	       ],
	           pre : ['class'],
	           hr : ['class', '.page-break-after'],
	           'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : []
	   },//指定要保留的HTML标记和属性。Object的key为HTML标签名，value为HTML属性数组，”.”开始的属性表示style属性。数据类型: Object    默认值:就是面这个
       wellFormatMode:true,//美化HTML数据。  类型: Boolean  值: true
       esizeType:2,//是否可以拖动改变宽度和高度，   2拖动改变宽度和高度，1时只能改变高度，0时不能拖动。数据类型: Int  默认值：2
       themeType:"default",//指定主题风格，     可设置”default”、”simple”，指定simple时需要引入simple.css。数据类型: String默认值: “default”
       /*
           <!--引入主题风格的css-->
       <link rel="stylesheet" href="../themes/default/default.css" />
       <link rel="stylesheet" href="../themes/simple/simple.css" />
       */
       langType:"zh-CN",//指定语言，    可设置”en”、”zh-CN”，需要引入lang/[langType].js。数据类型: String  默认值: “zh-CN”
  <%--
      <!--引入lang的js-->
      <script charset="utf-8" src="../lang/en.js"></script>
   --%>

	designMode:true,//可视化模式或代码模式    数据类型: Boolean  默认值: true
	fullscreenMode:false,//true时加载编辑器后变成全屏模式。数据类型: Boolean  默认值: false
	basePath:"编辑器的根目录路径  默认根据kindeditor.js文件名自动获取",//指定编辑器的根目录路径。数据类型: String   默认值: 根据kindeditor.js文件名自动获取
	themesPath:basePath + 'themes/',//指定编辑器的themes目录路径。数据类型: String   默认值: basePath + ‘themes/’
	pluginsPath:basePath + 'plugins',//指定编辑器的plugins目录路径。数据类型: String   默认值: basePath + ‘plugins/’
	langPath:basePath + 'lang/',//指定编辑器的lang目录路径。  数据类型: String   默认值: basePath + ‘lang/’
	minChangeSize:"5",//undo(取消)/redo(恢复)文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo记录里。 数据类型: String  默认值: 5
	urlType:"",//改变站内本地URL，可设置”“、”relative”、”absolute”、”domain”。空为不修改URL，relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径。数据类型: String   默认值: “”
	newlineTag:"p",//设置回车换行标签，可设置”p”、”br”。 数据类型: String   默认值: “p”
	pasteType:2,//设置粘贴类型，   0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴数据类型: Int   默认值: 2
	dialogAlignType:"page",//设置弹出框(dialog)的对齐类型，可设置”“、”page”，指定page时按当前页面居中，指定空时按编辑器居中。数据类型: String   默认值: “page”
	shadowMode:true,//  true时弹出层(dialog)显示阴影。数据类型: Boolean  默认值: true
	zIndex:811213,//指定弹出层的基准z-index。数据类型: Int  默认值: 811213
	useContextmenu:true, //true时使用右键菜单，false时屏蔽右键菜单。数据类型: Boolean  默认值: true
	syncType:"form",//同步数据的方式， 可设置”“、”form”，值为form时提交form时自动同步，空时不会自动同步。数据类型: String  默认值: “form”
	indentChar:"\t", //wellFormatMode 为true时，HTML代码缩进字符。 数据类型: String  默认值: “\t”
	cssPath:"",//指定编辑器iframe document的CSS文件，用于设置可视化区域的样式。数据类型: String或Array  默认值: 空
	cssData:"",//指定编辑器iframe document的CSS数据，用于设置可视化区域的样式。数据类型: String  默认值: 空
	bodyClass:"ke-content",//指定编辑器iframe document body的className。数据类型: String  默认值: “ke-content”
	colorTable:[
	['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
	['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
	['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
	['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']
	],//指定取色器里的颜色。数据类型: Array  默认值:就是面这个
	afterCreate:function (){
	} ,//设置编辑器创建后执行的回调函数。数据类型: Function    默认值: 无
	afterChange:function (){
	} ,//编辑器内容发生变化后执行的回调函数。数据类型: Function  默认值: 无
	afterTab:function () {
	},//按下TAB键后执行的的回调函数。数据类型: Function   默认值: 插入4个空格的函数
	afterFocus:function (){
	} ,// 编辑器聚焦(focus)时执行的回调函数。数据类型: Function   默认值: 无
	afterBlur:function (){
	} ,//编辑器失去焦点(blur)时执行的回调函数。数据类型: Function  默认值: 无
	/*
	afterBlur:function (){ //在kindeditor失去焦点之后执行的内容
	this.sync();  //将kindeditor中的内容同步到表单中
	}
	*/
	afterUpload:function(url) {
	alert(url);
	},//上传文件后执行的回调函数。数据类型: Function  默认值: 无
	uploadJson:basePath + 'php/upload_json.php',//指定上传文件的服务器端程序。数据类型: String  默认值: basePath + ‘php/upload_json.php’
	fileManagerJson:basePath + 'php/file_manager_json.php',//指定浏览远程图片的服务器端程序。数据类型: String   默认值: basePath + ‘php/file_manager_json.php’
	allowPreviewEmoticons:true,//true时鼠标放在表情上可以预览表情。   数据类型: Boolean  默认值: true
	allowImageUpload:true,//true时显示图片上传按钮。    数据类型: Boolean  默认值: true
	allowFlashUpload:true,//true时显示Flash上传按钮。  数据类型: Boolean  默认值: true
	allowMediaUpload:true,//true时显示视音频上传按钮。数据类型: Boolean  默认值: true
	allowFileUpload:true,//true时显示文件上传按钮。数据类型: Boolean  默认值: true
	allowFileManager:false,//true时显示浏览远程服务器按钮。数据类型: Boolean  默认值: false
	fontSizeTable:['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px'],//指定文字大小。数据类型: Array  默认值:就是面这个
	imageTabIndex:0,//图片弹出层的默认显示标签索引。数据类型: Int  默认值: 0
	formatUploadUrl:true,//false时不会自动格式化上传后的URL。数据类型: Boolean  默认值: true
	fullscreenShortcut:false,//false时禁用ESC全屏快捷键。数据类型: Boolean  默认值: false
	extraFileUploadParams: {
	item_id : 1000,
	category_id : 1
	},//上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。数据类型: Array  默认值: {}
	filePostName:"imgFile",//指定上传文件form名称。数据类型: String  默认值: imgFile
	fillDescAfterUploadImage:false,//true时图片上传成功后切换到图片编辑标签，false时插入图片后关闭弹出框。数据类型: Boolean  默认值: false
	afterSelectFile:function (){
	} ,//从图片空间选择文件后执行的回调函数。数据类型: Function  默认值: 无
	pagebreakHtml:'<hr style="page-break-after: always;" class="ke-pagebreak" />',
	//可指定分页符HTML。数据类型: String  默认值: <hr style=”page-break-after: always;” class=”ke-pagebreak” />
	allowImageRemote:true,//true时显示网络图片标签，false时不显示。数据类型: Boolean  默认值: true
	autoHeightMode:false,//值为true，并引入autoheight.js插件时自动调整高度。数据类型: Boolean  默认值: false
	fixToolBar:false,//值为true，并引入fixtoolbar.js插件时固定工具栏位置。数据类型: Boolean  默认值: false
	
	
	filePostName:"imgFile",//设置上传图片的名称
	uploadJson:"${path}/essay/contentUpload",  //指定上传图片的路径
	allowFileManager: true, //是否展示浏览图片空间
	fileManagerJson:"${path}/essay/getContent", //指定浏览远程图片的路径
	afterBlur:function () {  //在kindeditor失去焦点之后执行的内容
	this.sync();  //将kindeditor中的内容同步到表单中 
        }
});

五. KindEditor 上传文件

1.上传文件注意事项

KindEditor默认提供ASP、ASP.NET、PHP、JSP上传程序，这些程序是演示程序，建议不要直接在实际项目中使用。
如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。

2.选择程序语言

// ASP
KindEditor.ready(function(K) {
        K.create('#textarea_id', {
                uploadJson : '../asp/upload_json.asp',
                fileManagerJson : '../asp/file_manager_json.asp',
                allowFileManager : true
        });
});
// ASP.NET
KindEditor.ready(function(K) {
        K.create('#textarea_id', {
                uploadJson : '../asp.net/upload_json.ashx',
                fileManagerJson : '../asp.net/file_manager_json.ashx',
                allowFileManager : true
        });
});
// JSP
KindEditor.ready(function(K) {
        K.create('#textarea_id', {
                uploadJson : '../jsp/upload_json.jsp',
                fileManagerJson : '../jsp/file_manager_json.jsp',
                allowFileManager : true
        });
});

Note
具体使用方法请参见各语言(asp、asp.net、php、jsp)目录下的demo.xxx文件。

POST参数¶

imgFile: 文件form名称
dir: 上传类型，分别为image、flash、media、file

3.返回格式(JSON)

//成功时
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
        "error" : 1,
        "message" : "错误信息"
}

4.jsp文件上传图片的编码

<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!--引入jquery的脚本-->
<script src="${path}/bootstrap/js/jquery.min.js"></script>
<!--kindeditor脚本-->
<script charset="utf-8" src="${path}/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="${path}/kindeditor/lang/zh-CN.js"></script>
<script type="application/javascript">
    //配置KindEditor 初始化参数
    KindEditor.create('#editor_id', {
      filePostName:"imgFile",//设置上传图片的名称
        uploadJson:"${path}/essay/contentUpload",  //指定上传图片的路径
        allowFileManager: true, //是否展示浏览图片空间
   });
</script>

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;

@RestController
@RequestMapping("essay")
public class EssayController {

    /**
     * 上传编译器内容文件图片
     */
    @RequestMapping("contentUpload")
    public HashMap<String, Object> contentUpload(MultipartFile imgFile, HttpServletRequest request) {
        /**
         * //成功时
         * {
         *         "error" : 0,
         *         "url" : "http://www.example.com/path/to/file.ext"
         * }
         * //失败时
         * {
         *         "error" : 1,
         *         "message" : "错误信息"
         * }
         */
        HashMap<String, Object> map = new HashMap<>();
        try {
            String name = null;

            //判断文件名是否为空
            if (!"".equals(imgFile.getOriginalFilename())) {
                //根据相对路径获取绝对路径
                String realPath = request.getSession().getServletContext().getRealPath("/upload/essay");

                //获取文件夹
                File file = new File(realPath);
                //判断文件夹是否存在
                if (!file.exists()) {
                    //创建文件夹
                    file.mkdirs();
                }
                //获取文件名
                String filename = imgFile.getOriginalFilename();

                //给文件加一个时间戳
                name = new Date().getTime() + "-" + filename;

                //文件上传
                try {
                    imgFile.transferTo(new File(realPath, name));
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }

            //获取上传   http
            String scheme = request.getScheme();

            //获取   localhost
            String serverName = request.getServerName();

            //获取  端口号  8888
            int serverPort = request.getServerPort();

            //获取  项目名        /项目名
            String contextPath = request.getContextPath();
            String url = scheme + "://" + serverName + ":" + serverPort + contextPath + "/upload/essay/" + name;
            map.put("error", 0);
            map.put("url", url);

        } catch (Exception e) {
            map.put("error", 0);
            map.put("message", "上传错误");
            e.printStackTrace();
        }
        return map;
    }
}

KindEditor 基本的使用

一. KindEditor 是什么？

1 主要特点

二. 官方网站

三. 编辑器使用方法

1 下载编辑器

2 部署编辑器

3 修改HTML页面

3.1. 在需要显示编辑器的位置添加textarea输入框。

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

4. 获取HTML数据

四. KindEditor 初始化参数

五. KindEditor 上传文件

1.上传文件注意事项

2.选择程序语言

3.返回格式(JSON)

4.jsp文件上传图片的编码

相关阅读

相关文章

相关问答

相关文档