KindEditor 基本的使用_网站交易平台

KindEditor 基本的使用

来源：互联网转载 | 更新日期：2023-09-03 18:08:21

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输入框。

<textarea id="editor_id" name="content" style="width:700px;height:300px;">  <strong>HTML内容</strong> </textarea>

Note

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

3.2. 在该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>

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 默认值: 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'],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 值: trueesizeType:2,//是否可以拖动改变宽度和高度， 2拖动改变宽度和高度，1时只能改变高度，0时不能拖动。数据类型: Int 默认值：2themeType:"default",//指定主题风格，可设置”default”、”simple”，指定simple时需要引入simple.css。数据类型: String默认值: “default”/*<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”<%--<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;" class="ke-pagebreak" />',//可指定分页符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.选择程序语言

// 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}"/>  <script src="${path}/bootstrap/js/jquery.min.js"></script>  <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;} }

上一篇：IOS11降级到IOS10的操作方法(刷机有风险，操作需谨慎)

下一篇：matlab 简单函数拟合（全）