KindEditor 基本的使用「建议收藏」-kindeditor编辑器

KindEditor 基本的使用「建议收藏」kindeditor使用一.KindEditor是什么？1主要特点二.官方网站三.编辑器使用方法1下载编辑器2部署编辑器3修改HTML页面3.1.在需要显示编辑器的位置添加textarea输入框。3.2.在该HTML页面添加以下脚本。4.获取HTML数据四.KindEditor初始化参数一.KindEditor是什么？KindEditor是一套开源的在线HTM…_kindeditor

kindeditor 使用

一. KindEditor 是什么？ 1 主要特点 二. 官方网站 三. 编辑器使用方法 1 下载编辑器 2 部署编辑器 3 修改HTML页面 3.1. 在需要显示编辑器的位置添加textarea输入框。 3.2. 在该HTML页面添加以下脚本。 4. 获取HTML数据 四. KindEditor 初始化参数 五. KindEditor 上传文件 1.上传文件注意事项 2.选择程序语言 3.返回格式(JSON) 4.jsp文件上传图片的编码

一. 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  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的valueeditor.sync();html = document.getElementById('editor_id').value; // 原生APIhtml = K('#editor_id').val(); // KindEditor Node APIhtml = $('#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 默认值: 650minHeight:100,//最小高度， 单位为px。数据类型: Int 默认值: 100resizeType: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 默认值: truehtmlTags:{ 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'],p : ['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 值: trueesizeType:2,//是否可以拖动改变宽度和高度， 2拖动改变宽度和高度，1时只能改变高度，0时不能拖动。数据类型: Int 默认值：2themeType:"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 默认值: truefullscreenMode:false,//true时加载编辑器后变成全屏模式。数据类型: Boolean 默认值: falsebasePath:"编辑器的根目录路径 默认根据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 默认值: 5urlType:"",//改变站内本地URL，可设置”“、”relative”、”absolute”、”domain”。空为不修改URL，relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径。数据类型: String 默认值: “”newlineTag:"p",//设置回车换行标签，可设置”p”、”br”。 数据类型: String 默认值: “p”pasteType:2,//设置粘贴类型， 0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴数据类型: Int 默认值: 2dialogAlignType:"page",//设置弹出框(dialog)的对齐类型，可设置”“、”page”，指定page时按当前页面居中，指定空时按编辑器居中。数据类型: String 默认值: “page”shadowMode:true,// true时弹出层(dialog)显示阴影。数据类型: Boolean 默认值: truezIndex:811213,//指定弹出层的基准z-index。数据类型: Int 默认值: 811213useContextmenu:true, //true时使用右键菜单，false时屏蔽右键菜单。数据类型: Boolean 默认值: truesyncType:"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 默认值: trueallowImageUpload:true,//true时显示图片上传按钮。 数据类型: Boolean 默认值: trueallowFlashUpload:true,//true时显示Flash上传按钮。 数据类型: Boolean 默认值: trueallowMediaUpload:true,//true时显示视音频上传按钮。数据类型: Boolean 默认值: trueallowFileUpload:true,//true时显示文件上传按钮。数据类型: Boolean 默认值: trueallowFileManager:false,//true时显示浏览远程服务器按钮。数据类型: Boolean 默认值: falsefontSizeTable:['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px'],//指定文字大小。数据类型: Array 默认值:就是面这个imageTabIndex:0,//图片弹出层的默认显示标签索引。数据类型: Int 默认值: 0formatUploadUrl:true,//false时不会自动格式化上传后的URL。数据类型: Boolean 默认值: truefullscreenShortcut:false,//false时禁用ESC全屏快捷键。数据类型: Boolean 默认值: falseextraFileUploadParams: { item_id : 1000,category_id : 1},//上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。数据类型: Array 默认值: {}filePostName:"imgFile",//指定上传文件form名称。数据类型: String 默认值: imgFilefillDescAfterUploadImage:false,//true时图片上传成功后切换到图片编辑标签，false时插入图片后关闭弹出框。数据类型: Boolean 默认值: falseafterSelectFile:function (){ } ,//从图片空间选择文件后执行的回调函数。数据类型: Function 默认值: 无pagebreakHtml:'<hr style="page-break-after: always;"  />',//可指定分页符HTML。数据类型: String 默认值: <hr style=”page-break-after: always;” class=”ke-pagebreak” />allowImageRemote:true,//true时显示网络图片标签，false时不显示。数据类型: Boolean 默认值: trueautoHeightMode:false,//值为true，并引入autoheight.js插件时自动调整高度。数据类型: Boolean 默认值: falsefixToolBar:false,//值为true，并引入fixtoolbar.js插件时固定工具栏位置。数据类型: Boolean 默认值: falsefilePostName:"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.选择程序语言

// ASPKindEditor.ready(function(K) { K.create('#textarea_id', { uploadJson : '../asp/upload_json.asp',fileManagerJson : '../asp/file_manager_json.asp',allowFileManager : true});});// ASP.NETKindEditor.ready(function(K) { K.create('#textarea_id', { uploadJson : '../asp.net/upload_json.ashx',fileManagerJson : '../asp.net/file_manager_json.ashx',allowFileManager : true});});// JSPKindEditor.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();}}//获取上传 httpString scheme = request.getScheme();//获取 localhostString serverName = request.getServerName();//获取 端口号 8888int 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;}}