kindeditor 使用
一. 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;">
<!--书写的内容-->
<strong>HTML内容</strong>
</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;
}
}
779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
