15文本编辑器

时间：2016-07-13 17:20:01 阅读：124 评论：0 收藏：0 [点我收藏+]

标签：

Kindeditor是一款兼容多种浏览器的在线html编辑器，且具有图片，文件远程和本地上传功能。首先下载kindeditor3.5.5,将其解压放在项目的js下。http://www.kindsoft.net/down.php

1使用kindeditor
如何在页面中使用kindeditor，首先是引入kindeditor.js文件如：
<script type="text/javascript" charset="utf-8" src="${ctx}/js/kindeditor/kindeditor.js"></script>

然后在页面加载后调用其方法,下面的id:‘content1‘对应于页面中的一个<textarea id="content1"></textarea>元素，这样就可以在页面中看到该编辑器，如果<textarea>元素中已经存在文本内容，那么加载页面完成后，kindeditor会自动将<textarea>元素中的内容放到编辑器中。
$(document).ready(function(){
KE.show({
id : ‘content1‘,
imageUploadJson : ‘${pageContext.request.contextPath}/manage/news/upload_json.jsp‘,
fileManagerJson : ‘${pageContext.request.contextPath}/manage/news/file_manager_json.jsp‘,
allowFileManager : true
});

});
textarea的宽度和高度也标识了生成的编辑器的宽，高。
<textarea id="content1" name="content1" style="width:700px;height:400px"></textarea>
<input id="content" name="content" type="hidden" value="" />
当我们提交表单时，我们先获取编辑器的内容在提交：
function funSave()
{
var s = KE.util.getData("content1");
//s = KE.util.escape(s); /*一般不需要转换特殊字符*/
document.getElementById("content").value = s;
$("#addNewsForm").submit();
}

kindeditor的配置属性：
id，textarea输入框的ID，必须设置。
width，编辑器的宽度，可以设置px或%，比Textarea输入框样式表宽度优先度高。
height，编辑器高度，只能设置px。
minWidth，minHeight，指定编辑器最小宽，高。
filterMode，取值true时过滤HTML代码，false时允许输入任何代码。
resizeMode，取值0时不能拖动改变大小,1时指定改变高度,2时可以拖动改变宽和高。
wyswygMode，可视化化模式或代码模式。
afterCreate，设置编辑器创建后执行的回调函数。
allowUpload，true时显示上传图片标签，false时不显示。
allowFileMananger，true时显示浏览服务器图片功能。服务器图片就是我们上传的图片所在的目录。
imageUploadJson，指定上传图片的服务器端程序。可以参考kindeditor的jsp目录下的upload_json.jsp程序
fileManagerJson，指定浏览远程图片的服务器端程序。可以参考kindeditor的jsp目录下的file_manager_json.jsp程序
autoSetDataMode，为true，自动将编辑器内容设置到原来的textarea,也就是每次输入内容执行KE.util.setData函数。
afterSetData，自动执行KE.util.setData后执行的回调函数。autoSetDataMode为true时有效。
shadowMode，默认为true，弹出层显示阴影。
allowPreviewEmoticons，默认为true，鼠标放在表情上可以预览表情。

kindeditor在上传文件，是在弹出层中加载了kindeditor\plugins\image\image.html这个文件，这个文件中有file类型文件域，并且form采用enctype="multipart/form-data"进行上传文件，然后form提交到${pageContext.request.contextPath}/manage/news/upload_json.jsp完成上传。

2几种模式：
简单模式：
KE.show({
id : ‘content2‘,
resizeMode : 1,
allowPreviewEmoticons : false,
allowUpload : false,
items : [
‘fontname‘, ‘fontsize‘, ‘|‘, ‘textcolor‘, ‘bgcolor‘, ‘bold‘, ‘italic‘, ‘underline‘,
‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,
‘insertunorderedlist‘, ‘|‘, ‘emoticons‘, ‘image‘, ‘link‘]
});

手动加载模式：
<html>
<head>
<meta charset="utf-8" />
<title>KindEditor</title>
<style>
textarea {
display: block;
}
</style>
<script charset="utf-8" src="../kindeditor.js"></script>
<script>
KE.init({
id : ‘content3‘,
afterCreate : function(id) {
KE.util.focus(id);
}
});
</script>
</head>
<body>
<h3>手动加载编辑器</h3>
<textarea id="content3" name="content1" style="width:700px;height:300px;"></textarea>
<br />
<input type="button" name="button" value="加载编辑器" onclick="javascript:KE.create(‘content3‘);" />
<input type="button" name="button" value="卸载编辑器" onclick="javascript:KE.remove(‘content3‘);" />
</body>
</html>

只读模式：
KE.show({
id : ‘content1‘,
resizeMode : 0,
afterCreate : function(id) {
KE.toolbar.disable(id, []);
KE.readonly(id);
KE.g[id].newTextarea.disabled = true;
}
});

统计字数：
afterChange表示在用户每次输入就进行统计，
KE.show({
id : ‘content11‘,
afterChange : function(id) {
KE.$(‘word_count1‘).innerHTML = KE.count(id);
KE.$(‘word_count2‘).innerHTML = KE.count(id, ‘text‘);
}
});
您当前输入了 <span id="word_count1">0</span> 个文字。(字数统计包含HTML代码。)
您当前输入了 <span id="word_count2">0</span> 个文字。(字数统计包含纯文本、IMG、EMBED，不包含换行符，IMG和EMBED算一个文字。)

禁止调整高度：
KE.show({//可以调整高度，但不能调整宽度
id : ‘content6‘,
width : ‘80%‘,
resizeMode : 1
});
KE.show({//高度和宽度都不能调整
id : ‘content7‘,
resizeMode : 0
});

全屏模式：
KE.init({
id : ‘content1‘,
afterCreate : function(id) {
KE.util.focus(id);
}
});

KE.event.ready(function() {
KE.create(‘content1‘);
setTimeout(function() {
KE.plugin[‘fullscreen‘].click(‘content1‘);
}, 1);
});

回调函数：
KE.show({
id : ‘content1‘,
beforeCreate : function(id) { alert(‘开始创建编辑器。id:‘ + id); },
afterCreate : function(id) { alert(‘编辑器创建成功。id:‘ + id); },
afterDialogCreate : function(id) { alert(‘对话框创建成功。id:‘ + id); }
});

javascript动态创建编辑器：
<html>
<head>
<meta charset="utf-8" />
<title>KindEditor</title>
<style>
textarea {
display: block;
}
</style>
<script charset="utf-8" src="../kindeditor.js"></script>
<script>
var editor_id = ‘demo_12_id‘;
KE.init({
id : editor_id,
width : ‘700px‘,
height : ‘300px‘
});
KE.event.ready(function(){
var textarea = document.createElement(‘textarea‘);
textarea.id = editor_id;
textarea.name = "content";
document.getElementById(‘editor_area‘).appendChild(textarea);
KE.create(editor_id);
});
</script>
</head>
<body>
<h3>JavaScript动态创建编辑器</h3>
<div id="editor_area"></div>
</body>
</html>

3常用的函数
KE.show(config)
初始化并创建编辑器，在本函数中，先调用KE.init初始化，在DOM记载完成后执行KE.create创建编辑器。

KE.init(config)
设置编辑器的初始化参数。

KE.create(id, mode)
创建编辑器，id，表示编辑器对应的<textarea>的id。mode，可选参数，指定1时在body下面创建编辑器，0或未指定时在textarea前面创建编辑器。

KE.remove(id, mode)
移除编辑器，参数意义和create相同。

KE.html(id)
取得编辑器的html内容

KE.util.getData(id)
取得编辑器的HTML内容。功能同上

KE.html(id, val)
设置编辑器的HTML内容。id：String，编辑器的ID；val: String，HTML字符串。

KE.text(id)
取得编辑器的纯文本内容。

KE.text(id, val)
设置编辑器的内容，直接显示HTML代码。id：String，编辑器的ID；val: String，文本

KE.selectedHtml(id)
取得当前被选中的HTML内容。

KE.count(id, mode)
取得编辑器内容的文字数量。：
id：String，编辑器的ID
mode：String，可选参数，默认值也"html"，mode为"html"时取得字数包含HTML代码，mode为"text"时只包含纯文本、IMG、EMBED。

KE.isEmpty(id)
判断编辑器是否有可见内容，比如文本、图片、视频。

KE.insertHtml(id, val)
将指定的HTML内容插入到编辑区域里的光标处。
id：String，编辑器的ID
val: String，HTML字符串

KE.appendHtml(id, val)
将指定的HTML内容添加到编辑区域最后位置。
id：String，编辑器的ID
val: String，HTML字符串

KE.util.setData(id)
把编辑器的内容设置到原TEXTAREA控件里。

KE.util.escape(html)
转换HTML里的特殊字符。例如将<转换为&lt,>转换为&gt。
escape : function(str) {
str = str.replace(/&/g, ‘&‘);
str = str.replace(/</g, ‘<‘);
str = str.replace(/>/g, ‘>‘);
str = str.replace(/"/g, ‘"‘);
return str;
}

4将kindeditor3.x升级到4.x版本
移除3.x版本文件。
<script charset="utf-8" src="/ke3/kindeditor.js"></script>

添加4.x版本文件。
<script charset="utf-8" src="/ke4/kindeditor.js"></script>
<script charset="utf-8" src="/ke4/lang/zh_CN.js"></script>

替换javascript代码

移除3.x版本代码。
<script>
KE.show({
id : ‘editor_id‘,
resizeMode : 2,
imageUploadJson : ‘../../php/upload_json.php‘ // 相对于plugins/image/image.html的路径
});
</script>

添加4.x版本代码。
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create(‘#editor_id‘, {
resizeType : 2,
uploadJson : ‘../php/upload_json.php‘ // 相对于当前页面的路径
});
});
</script>

5kindeditor4的使用方法
首先在编辑器的位置添加textarea输入框
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
<strong>HTML内容</strong>
</textarea>
d在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。

在该HTML页面添加以下脚本。
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh_CN.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create(‘#editor_id‘);
});
</script>

第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器
通过K.create函数的第二个参数，可以对编辑器进行配置：
var options = {
cssPath : ‘/css/index.css‘,
filterMode : true
};
var editor = K.create(‘textarea[name="content"]‘, options);

获取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内容‘);

4.x设置只读模式
属性readonlyMode为true则是只读模式，默认为false。

上传文件
KindEditor默认提供ASP、ASP.NET、PHP、JSP上传程序，这些程序是演示程序，建议不要直接在实际项目中使用。如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
// JSP
KindEditor.ready(function(K) {
K.create(‘#textarea_id‘, {
uploadJson : ‘../jsp/upload_json.jsp‘,
fileManagerJson : ‘../jsp/file_manager_json.jsp‘,
allowFileManager : true
});
});

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

上传后返回格式(JSON)
//成功时
{
"error" : 0,
"url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
"error" : 1,
"message" : "错误信息"
}

例如：
var editor;
KindEditor.ready(function(K) {
editor = K.create(‘#content‘, {
resizeType : 2,
uploadJson : ‘${ctx}/page/office/userEmail/upload_json.jsp‘,
fileManagerJson : ‘${ctx}/page/office/userEmail/file_manager_json.jsp‘,
items : [‘fontname‘, ‘fontsize‘, ‘|‘, ‘textcolor‘, ‘bgcolor‘, ‘bold‘, ‘italic‘,
‘underline‘,‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘,‘insertorderedlist‘,‘insertunorderedlist‘, ‘|‘, ‘emoticons‘, ‘image‘, ‘link‘]
});
var huifu=‘${huifu}‘;
if(huifu!=‘‘)
editor.html(‘${data.content}‘);
});

function getEditorData() {
return editor.html();
}

*******************
kindEditor在火狐和谷歌浏览器每次会在textarea中追加以下多于的内容，我们需要将其删除：
<div style="position:absolute;display:none;z-index:9999;" id="livemargins_control"><img src="chrome://livemargins/skin/monitor-background-horizontal.png" style="position:absolute;left:-77px;top:-5px;" height="5" width="77" /> <img src="chrome://livemargins/skin/monitor-background-vertical.png" style="position:absolute;left:0;top:-5px;" /> <img id="monitor-play-button" src="chrome://livemargins/skin/monitor-play-button.png" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.5" style="position:absolute;left:1px;top:0;opacity:0.5;cursor:pointer;" /></div>
我们需要修改KE.Util.getData方法，因为textarea的内容是通过这个方法获取的，所以我们在这个方法中删除上面多于的livemargins_control元素。
getData : function(id, wyswygMode) {
var g = KE.g[id];
wyswygMode = (wyswygMode === undefined) ? g.wyswygMode : wyswygMode;
if (!wyswygMode) {
this.innerHtml(g.iframeDoc.body, KE.util.execSetHtmlHooks(id, g.newTextarea.value));
}
//start 下面这段是我添加的内容
var cl=g.iframeDoc.body.childNodes.length;
for(var i=0;i<cl;i++){
if(g.iframeDoc.body.childNodes[i].id=="livemargins_control"){
g.iframeDoc.body.removeChild(g.iframeDoc.body.childNodes[i]);
}
}
//end
return this.toData(id, g.iframeDoc.body.innerHTML);
}

15文本编辑器

标签：

原文地址：http://blog.csdn.net/bin71722/article/details/51889725

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行