KindEditor4.1编辑器的使用、封装及扩展 -
- ITeye技术网站
web开发中。。少不了编辑器的使用。。经过各个编辑器的比较。个人认为 KindEditor4.1 编辑器非常的不错
觉得她简单而美丽....就像一个漂亮的妞。。。嘿嘿。。。而且提供了API。。容易扩展。。
下面的我封装了 KindEditor4.1 的一些方法。。。让我们在开发中只要配置来实现就好了。。。
附件中提供了 源码和jar
。。省的你们去反编译了。。嘿嘿。。。
1.将以下的JAR包放到工程的lib目录下
* commons-fileupload-1.2.1.jar
* commons-io-1.4.jar
* kindeditorservlet.jar
--jkd1.6 下面编译的
2.web.xml 的servlet及相关属性设置
&!-- kindeditor上传 --&
&servlet-name&UploadSerlet&/servlet-name&
&servlet-class&
com.yangpan.kindeditor.UploadSerlet
&/servlet-class&
&!-- 上传保存的目录 --&
&init-param&
&param-name&UPLOAD_PATH&/param-name&
&param-value&attached/&/param-value&
&/init-param&
&!-- 限制上传图片的大小，单位字节(缺省值为1MB) --&
&init-param&
&param-name&Img_MAX_SIZE&/param-name&
&param-value&1024000&/param-value&
&/init-param&
&init-param&
&!-- 上传图片的类型(缺省值为gif, jpg, jpeg, png, bmp) --&
&param-name&Img_YPES&/param-name&
&param-value&gif,jpg,jpeg,png,bmp&/param-value&
&/init-param&
&!-- ===================================================================== --&
&!-- 上传附件的大小，单位字节(缺省为1MB) --&
&init-param&
&param-name&File_MAX_SIZE&/param-name&
&param-value&1000000&/param-value&
&/init-param&
&!-- 上传文件的类型(缺省为doc, xls, ppt, pdf, txt, rar, zip) --&
&init-param&
&param-name&File_TYPES&/param-name&
&param-value&doc,xls,ppt,zip,rar,txt&/param-value&
&/init-param&
&/servlet&
&servlet-name&FileManagerServlet&/servlet-name&
&servlet-class&
com.yangpan.kindeditor.FileManagerServlet
&/servlet-class&
&!-- 上传保存的目录 --&
&init-param&
&param-name&UPLOAD_PATH&/param-name&
&param-value&attached/&/param-value&
&/init-param&
&/servlet&
&servlet-mapping&
&servlet-name&UploadSerlet&/servlet-name&
&url-pattern&/servlet/UploadSerlet&/url-pattern&
&/servlet-mapping&
&servlet-mapping&
&servlet-name&FileManagerServlet&/servlet-name&
&url-pattern&/servlet/FileManagerServlet&/url-pattern&
&/servlet-mapping&
3.KE 相关属性设置
KindEditor.ready(function(K) {
editor = K.create('textarea[name="bean.content"]', {
width : '680px',
height: '250px',
newlineTag : 'br',
resizeType : 0,
allowPreviewEmoticons : true,
allowImageUpload : true,
'source', '|', 'undo', 'redo', '|', 'preview',
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image','multiimage', 'insertfile', 'link', 'table', 'wordpaste', 'clearhtml'],
cssPath : '../kindeditor/plugins/code/prettify.css',
uploadJson : '&%=path%&/servlet/UploadSerlet',
fileManagerJson : '&%=path%&/servlet/FileManagerServlet',
allowFileManager : false,
afterCreate : function() {
var self =
K.ctrl(document, 13, function() {
//self.sync();
//document.forms['example'].submit();
prettyPrint();
4.创建上传目录attached
这样就完成了 ...Kindeditor的搭建。。。
5.扩展--添加文件管理的删除功能---题外话
在 目录中 找到 filemanager.js 文件...在约182中添加如下代码
K('&span style="float:width:30 text-align:" &&a href="#"&删除&/a&&/span&').appendTo(div).click(function() {
//self.removeFile(file.id);
alert('ssss'+data.filename+"==="+themesPath);
在大约 194 行添加一个方法。
function removeRemoteFile(){
var imgUrl = K(this).attr("rel");
imgUrl = imgUrl.replace(BASEURL, "");//BASEURL为我自己定义的网站路径，可根据实际删除掉
var url = BASEURL + "/Manager/KindEditor/Delete";//服务器后台处理程序
K.ajax(url, function (data) {
if (data == "1") {
reloadPage('', orderTypeBox.val(), viewType == 'VIEW' ? createView : createList);
alert("删除数据错误");
}, "POST", {
imgUrl: imgUrl//往后台传的参数，其实就是传个路径，后台根据这个路径去删除路径下的图片
我想这样就可以实现删除的功能。。。具体还没有完成。。。先记着！！！！
实现的效果如：
我想。。如果可以的话。。我们就可以实现远程管理服务器的文件。。。这个功能是很实用的。。。。
大家可以下载附件 mi.rar
吧。。。如果你们扩展了。。记得告诉我啊啊啊啊啊！！
有疑问也可以大家一起交流QQ：
我最近都没时间。。忙死啦！
下载次数: 158
w 写道JSP上传出现错误，JS报错没有权限kindeditor.js
请问是什么原因啊，
我使用的就是项目自带的jsp文件夹下的上传页面 upload_json.jsp
折腾半天了，谢谢。
额。。你的问题怎么样了？
解决了，谢谢，呵呵。
JSP上传出现错误，JS报错没有权限kindeditor.js
请问是什么原因啊，
我使用的就是项目自带的jsp文件夹下的上传页面 upload_json.jsp
折腾半天了，谢谢。
额。。你的问题怎么样了？
yangpanwww
浏览: 404525 次
来自: 杭州
uploadifySettings is not a func ...
qq_ 写道我下载部署运行后提示:1、T ...
我下载部署运行后提示:1、TypeError: word.sa ...
jpg转换bmp后
jpg文件没发删除呢
搞起手机开发了？Html编辑器KindEditor详细介绍
博客分类：&编辑器调用方法1.下载 KindEditor 最新版本。打开下载页面2. 解压zip文件，将所有文件上传到您的网站程序目录下。例如：http://您的域名/editor/3.在需要显示编辑器的位置添加TEXTAREA输入框。id在当前页面必须是唯一的值，还有，在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。在TEXTAREA里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(&,&,&,")。 具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。&textarea id="editor_id" name="content" style="width:700height:300"&&strong&HTML内容&/strong&&/textarea&4.在该HTML页面添加以下脚本。 &script charset="utf-8" src="/editor/kindeditor.js"&&/script&&script& KE.show({ id : 'editor_id' });&/script&注：KE.show的原理是先执行KE.init设置一些变量，等DOM全部创建以后才开始执行KE.create创建编辑器。 如果浏览器不触发DOMContentLoaded事件（例如：jQuery的$.ready，点击某个按钮，通过innerHTML插入HTML等），则不能使用KE.show，需要直接调用KE.init和KE.create。KE.init({ id : 'editor_id'});$.ready(function() { KE.create('editor_id');});调用KE.show和KE.init时，除id之外还可以设置其它的参数，具体属性请参考编辑器初始化参数。5.取得编辑器的HTML内容。KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要将HTML数据同步到原来的textarea，KE.sync函数会完成这个动作。KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加KE.sync函数，所以用form方式提交数据，不需要手动执行KE.sync函数。//取得HTML内容html = KE.html('editor_id');//同步数据后可以直接取得textarea的valueKE.sync('editor_id');html = document.getElementById('editor_id').html = $('#editor_id').val(); //jQuery//设置HTML内容KE.html('editor_id', 'HTML内容');编辑器初始化参数1.调用KE.show或KE.init时可以设置以下参数。 1.idTEXTAREA输入框的ID，必须设置。数据类型：String2.items配置编辑器的工具栏，其中"-"表示换行，"|"表示分隔符。数据类型：Array默认值： ['source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', '|', 'selectall', '-','title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold','italic', 'underline', 'strikethrough', 'removeformat', '|', 'image','flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about']3.width编辑器的宽度，可以设置px或%，比TEXTAREA输入框样式表宽度优先度高。数据类型：String默认值：TEXTAREA输入框的宽度注: 3.2版本开始支持。4.height编辑器的高度，只能设置px，比TEXTAREA输入框样式表高度优先度高。数据类型：String默认值：TEXTAREA输入框的高度注: 3.2版本开始支持。5.minWidth数据类型：Int指定编辑器最小宽度，单位为px。默认值：2006.minHeight数据类型：Int指定编辑器最小高度，单位为px。默认值：1007.filterMode数据类型：Booleantrue时过滤HTML代码，false时允许输入任何代码。默认值：false注: 3.4以前版本的filterMode默认值为true。8.htmlTags指定要保留的HTML标记和属性。哈希数组的key为HTML标签名，value为HTML属性数组，"."开始的属性表示style属性。数据类型：Object默认值： { font : ['color', 'size', 'face', '.background-color'], span : ['style'], div : ['class', 'align', 'style'], table: ['class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'style'], 'td,th': ['class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor', 'style'], a : ['class', 'href', 'target', 'name', 'style'], embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', 'style', 'align', 'allowscriptaccess', '/'], img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style', '/'], hr : ['class', '/'], br : ['/'], 'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : ['align', 'style'], 'tbody,tr,strong,b,sub,sup,em,i,u,strike' : []}注：filterMode为true时有效。3.4版本开始属性可设置style，保留所有inline样式。9.resizeMode2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。数据类型：Int默认值：210.skinType风格类型，default数据类型：String默认值：default11.wyswygMode可视化模式或代码模式数据类型：Boolean默认值：true12.cssPath指定编辑器iframe document的CSS，用于设置可视化区域的样式。数据类型：String或Array默认值：空注：3.4.1版本开始可指定多个CSS文件。例如：cssPath : ['a.css', 'b.css']13.skinsPath指定编辑器的skins目录，skins目录存放风格的css文件和gif图片。数据类型：String默认值：KE.scriptPath + 'skins/'14.pluginsPath指定编辑器的plugins目录。数据类型：String默认值：KE.scriptPath + 'plugins/'15.minChangeSizeundo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo堆栈里。数据类型：Int默认值：516.loadStyleModetrue时自动加载编辑器的CSS。数据类型：Boolean默认值：true注: 3.4版本开始支持。17.urlType改变站内本地URL，可设置空、relative、absolute、domain。空为不修改URL，relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径。数据类型：String默认值：空注: 3.4版本开始支持，3.4.1版本开始默认值为空。18.newlineTag设置回车换行标签，可设置p、br。数据类型：String默认值：br注: 3.4版本开始支持。19.afterCreate设置编辑器创建后执行的回调函数。数据类型：Function默认值：无20.afterDialogCreate设置弹出浮动框创建后执行的回调函数。数据类型：Function默认值：无注: 3.4.3版本开始支持。21.allowUploadtrue或false，true时显示上传图片标签。数据类型：Boolean默认值：true注: 3.4版本开始支持。22.allowFileManagertrue或false，true时显示浏览服务器图片功能。数据类型：Boolean默认值：false注: 3.4版本开始支持。23.referMethod设置referMethod后上传图片的POST参数里有referMethod。数据类型：String默认值：空注: 3.4版本开始支持。24.dialogAlignType设置弹出框(dialog)的对齐类型，可设置page和空，指定page时按当前页面居中，指定空时按编辑器居中。数据类型：String默认值：page注: 3.4.1版本开始支持。25.imageUploadJson指定上传图片的服务器端程序。数据类型：String默认值：../../php/upload_json.php注: 3.4.1版本开始支持。26.fileManagerJson指定浏览远程图片的服务器端程序。数据类型：String默认值：../../php/file_manager_json.php注: 3.4.1版本开始支持。27.shadowModetrue或false，true时弹出层显示阴影。数据类型：Boolean默认值：true注: 3.5版本开始支持。28.allowPreviewEmoticonstrue或false，true时鼠标放在表情上可以预览表情。数据类型：Boolean默认值：true注: 3.5版本开始支持。29.useContextmenutrue或false，true时使用自定义右键菜单，false时屏蔽自定义右键菜单。数据类型：Boolean默认值：true注: 3.5.3版本开始支持。30.syncType同步数据的方式，可设置"","auto","form"，值为"auto"时每次修改时都会同步，"form"时提交form时同步，空时不会自动同步。数据类型：String默认值："form"注: 3.5.3版本开始支持。31.tabIndex编辑器的tabindex。数据类型：Int默认值：TEXTAREA输入框的tabindex注: 3.5.3版本开始支持。32.afterChange编辑器内容发生变化后执行的回调函数。数据类型：Function默认值：无注: 3.5.3版本开始支持。33.afterTab按下TAB键后执行的的回调函数。数据类型：Function默认值： function(id) { KE.util.setSelection(id); KE.util.insertHtml(id, ' ');}注: 3.5.3版本开始支持。34.afterFocus编辑器聚焦(focus)时执行的回调函数。数据类型：Function默认值：无注: 3.5.3版本开始支持。35.afterBlur编辑器失去焦点(blur)时执行的回调函数。数据类型：Function默认值：无注: 3.5.3版本开始支持。参数设置例子： KE.show({ id : "content_1", width : "70%", //编辑器的宽度为70% height : "200px", //编辑器的高度为100px filterMode : false, //不会过滤HTML代码 resizeMode : 1 //编辑器只能调整高度});一、添加"你好"插件1. 定义KE.lang['hello'] = "你好"。 KE.lang['hello'] = "您好";&2.定义KE.plugin['hello']，所有逻辑都在这个对象里，点击图标时默认执行click方法。 KE.plugin['hello'] = { click : function(id) { alert("您好"); }};&3.页面里添加图标定义CSS。 .ke-icon-hello { background-image: url(./skins/default.gif); background-position: 0px -672 width: 16 height: 16}&4.最后调用编辑器时items数组里添加hello。 KE.show({ id : 'content1', items : ['hello']}); 演示地址：在新窗口打开二、添加插入远程图片的插件1. 定义KE.lang['remote_image'] = "插入远程图片"。 KE.lang['remote_image'] = "插入远程图片";&2.定义KE.plugin['remote_image']。 KE.plugin['remote_image'] = { click : function(id) { KE.util.selection(id); var dialog = new KE.dialog({ id : id, cmd : 'remote_image', width : 310, height : 90, title : KE.lang['image'], yesButton : KE.lang['yes'], noButton : KE.lang['no'] }); dialog.show(); }, check : function(id) { var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog); var url = KE.$('url', dialogDoc). var title = KE.$('imgTitle', dialogDoc). var width = KE.$('imgWidth', dialogDoc). var height = KE.$('imgHeight', dialogDoc). var border = KE.$('imgBorder', dialogDoc). if (url.match(/\.(jpg|jpeg|gif|bmp|png)$/i) == null) { alert(KE.lang['invalidImg']); window.focus(); KE.g[id].yesButton.focus(); } if (width.match(/^\d+$/) == null) { alert(KE.lang['invalidWidth']); window.focus(); KE.g[id].yesButton.focus(); } if (height.match(/^\d+$/) == null) { alert(KE.lang['invalidHeight']); window.focus(); KE.g[id].yesButton.focus(); } if (border.match(/^\d+$/) == null) { alert(KE.lang['invalidBorder']); window.focus(); KE.g[id].yesButton.focus(); } }, exec : function(id) { KE.util.select(id); var iframeDoc = KE.g[id].iframeD var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog); if (!this.check(id)) var url = KE.$('url', dialogDoc). var title = KE.$('imgTitle', dialogDoc). var width = KE.$('imgWidth', dialogDoc). var height = KE.$('imgHeight', dialogDoc). var border = KE.$('imgBorder', dialogDoc). this.insert(id, url, title, width, height, border); }, insert : function(id, url, title, width, height, border) { var html = '&img src="' + url + '" '; if (width & 0) html += 'width="' + width + '" '; if (height & 0) html += 'height="' + height + '" '; if (title) html += 'title="' + title + '" '; html += 'alt="' + title + '" '; html += 'border="' + border + '" /&'; KE.util.insertHtml(id, html); KE.layout.hide(id); KE.util.focus(id); }};&3.页面里添加图标定义CSS。 .ke-icon-remote_image { background-image: url(./skins/default.gif); background-position: 0px -496 width: 16 height: 16}&4.最后调用编辑器时items数组里添加remote_image。 KE.show({ id : 'content1', items : ['remote_image']});一、变量1.KE.scriptPathkindeditor.js的路径。数据类型：String2.KE.browser浏览器类型和版本，分别为KE.browser.IE、KE.browser.WEBKIT、KE.browser.GECKO、KE.browser.OPERA、KE.browser.VERSION。数据类型：Object注：3.4以前版本直接返回字符串，分别为"IE"、"WEBKIT"、"GECKO"、"OPERA"。3.KE.g[id].iframeDoc编辑区域的iframe对象。数据类型：Element4.KE.g[id].keSel当前选中信息的KE.selection对象，id为编辑器ID。数据类型：Object5.KE.g[id].keRange当前选中信息的KE.range对象，id为编辑器ID。数据类型：Object6.KE.g[id].sel当前选中信息的浏览器原生selection对象，id为编辑器ID。数据类型：Object7.KE.g[id].range当前选中信息的浏览器原生range对象，id为编辑器ID。数据类型：Object二、函数1.KE.show(config)初始化并创建编辑器。执行本函数时先调用KE.init设置初始化参数，然后在DOM加载完成后执行KE.create。参数：config：Object，编辑器属性集合，具体请参考编辑器属性返回值：无2.KE.init(config)设置编辑器的初始化参数，loadStyleMode为true时自动加载CSS文件。参数：config：Object，编辑器属性集合，具体请参考编辑器属性返回值：无3.KE.create(id, mode)创建编辑器。参数：id：String，编辑器的IDmode：Int，可选参数，指定1时在body下面创建编辑器，0或未指定时在TEXTAREA前面创建编辑器。返回值：无4.KE.remove(id, mode)移除编辑器。参数：id：String，编辑器的IDmode：Int，可选参数，指定1时移除在body下面的编辑器，0或未指定时移除在TEXTAREA前面的编辑器。返回值：无5.KE.html(id)取得编辑器的HTML内容。参数：id：String，编辑器的ID返回值：String，HTML字符串注: 3.5版本开始支持，旧版本可以使用KE.util.getData(id)。6.KE.html(id, val)设置编辑器的HTML内容。参数：id：String，编辑器的IDval: String，HTML字符串返回值：无注: 3.5版本开始支持，旧版本可以使用KE.util.setFullHtml(id, val)。7.KE.text(id)取得编辑器的纯文本内容。参数：id：String，编辑器的ID返回值：String，去除HTML代码后的文本注: 3.5版本开始支持。8.KE.text(id, val)设置编辑器的内容，直接显示HTML代码。参数：id：String，编辑器的IDval: String，文本返回值：无注: 3.5版本开始支持。9.KE.selectedHtml(id)取得当前被选中的HTML内容。参数：id：String，编辑器的ID返回值：String，HTML字符串注: 3.5版本开始支持。10.KE.count(id, mode)取得编辑器内容的文字数量。参数：id：String，编辑器的IDmode：String，可选参数，默认值也"html"，mode为"html"时取得字数包含HTML代码，mode为"text"时只包含纯文本、IMG、EMBED。返回值：Int，文字数量注: 3.5版本开始支持。11.KE.isEmpty(id)判断编辑器是否有可见内容，比如文本、图片、视频。参数：id：String，编辑器的ID返回值：Boolean注: 3.5版本开始支持，旧版本可以使用KE.util.isEmpty(id)。12.KE.insertHtml(id, val)将指定的HTML内容插入到编辑区域里的光标处。参数：id：String，编辑器的IDval: String，HTML字符串返回值：无注: 3.5版本开始支持，旧版本可以使用KE.util.insertHtml(id, val)。13.KE.appendHtml(id, val)将指定的HTML内容添加到编辑区域最后位置。参数：id：String，编辑器的IDval: String，HTML字符串返回值：无注: 3.5版本开始支持。14.KE.focus(id)编辑器聚焦。参数：id：String，编辑器的ID返回值：无注: 3.5版本开始支持。15.KE.blur(id)编辑器失去焦点。参数：id：String，编辑器的ID返回值：无注: 3.5.3版本开始支持。16.KE.sync(id)将编辑器的内容设置到原来的TEXTAREA控件里。参数：id：String，编辑器的ID返回值：无注: 3.5.3版本开始支持，旧版本可以使用KE.util.setData(id)。常见问题1.编辑器好像是UTF-8编码的，可以在GB2312页面上使用吗？2.我想通过ajax方式加载编辑器，但是加KE.show后没有效果。3.为什么会丢失某些HTML标签，是不是编辑器的BUG？4.调用编辑器后显示不正常，怎么调整才能不和我的页面的CSS冲突？5.跨域调用后，点击插入图片或超级链接会报错。6.我取不到编辑器数据，直接取得textarea的value也没用。7.上传图片为什么出现"服务器发生故障。"？1. 编辑器好像是UTF-8编码的，可以在GB2312页面上使用吗？可以使用。有两种方法，一种方法是引入kindeditor.js文件时将script的charset属性设置成utf-8。 还有一种方法是直接将html/js/css文件编码都转换成GB2312编码（用Notepad++、editPlus等文本编辑器就可以转换编码），不过转换格式后升级比较困难，建议使用第一种方法。 &script charset="utf-8" src="/editor/kindeditor.js"&&/script&2. 我想通过ajax方式加载编辑器，但是加KE.show后没有效果。这个需要理解KE.show和KE.create的区别。KE.show的原理是先执行KE.init设置一些变量，等DOM全部创建以后才开始执行KE.create创建编辑器。 如果浏览器不触发DOMContentLoaded事件（例如：点击某个按钮，通过innerHTML插入HTML等），则不能使用KE.show，需要直接调用KE.init和KE.create。还有我发现很多同学直接把javascript代码放在ajax返回的HTML页面里执行，这么做可能出现不可预测的错误，最好的方法是ajax只返回纯HTML，返回成功后在该ajax方法的回调函数（callback function）里执行javascript。 //ajax请求之前执行KE.initKE.init({ id : 'textarea_id'});//ajax返回HTML后执行KE.create创建编辑器KE.create('textarea_id');3. 为什么会丢失某些HTML标签，是不是编辑器的BUG？这是因为3.4版本以前编辑器默认开启了过滤模式（filterMode:true）。当filterMode为true时，编辑器会根据htmlTags设定自动过滤HTML代码，主要是为了生成干净的代码。如果想保留所有HTML，请将filterMode设置成false。如果想保留特定HTML，请将filterMode设置成true后，配置htmlTags属性。从3.4版本开始默认关闭过滤模式，所以要过滤HTML，需要将filterMode设置成true。 KE.show({ id : 'textarea_id', filterMode : true // true:开启过滤模式, false:关闭过滤模式});4. 调用编辑器后显示不正常，怎么调整才能不和我的页面的CSS冲突？KindEditor所有CSS选择器都用ke开头的名字，所以名字是不会直接冲突的，一般页面显示不正常的原因是你的页面使用了全局标签的CSS定义。解决方式是为编辑器的div、table、td等标签重新设置一遍CSS。首先将skins/default.css文件放在你的CSS文件后面，default.css文件后面再定义一遍发生冲突的CSS。&style&/* 你的全局CSS定义 */img { border: 1px solid #555555; padding: 10}&/style&&!-- 编辑器的CSS文件 --&&link rel="stylesheet" type="text/css" href="./skins/default.css" /&&style&/* 重新设置全局CSS定义 */img { border: 0; padding: 0;}&/style&&!-- 通过style标签包含CSS时，需要将loadStyleMode属性设置成false --&&script&KE.show({ id : 'textarea_id', loadStyleMode : false});&/scirpt&5. 跨域调用后，点击插入图片或超级链接会报错。3.x版本的弹出框是用iframe加载HTML文件后显示的，跨域后2个document的域名不一样，无法进行跨页面js调用。正在开发中的4.0开始支持跨域调用，敬请期待。6. 我取不到编辑器数据，直接取得textarea的value也没用。KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要将HTML数据设置到原来的textarea，KE.sync函数会完成这个动作。 KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加KE.sync函数，所以用form方式提交数据，不需要手动执行KE.sync函数。 //将编辑器的HTML数据设置到textarea，KE.sync是KE.util.setData的别名KE.sync(id);//KE.sync等价于以下代码KE.g[id].srcTextarea.value = KE.html(id);7. 上传图片为什么出现"服务器发生故障。"？出现这个提示的根本原因是没有正确返回JSON数据。具体原因有很多，imageUploadJson参数设置错误，upload_json.xxx程序出错都会出现这个提示。这时用Firefox的Firebug插件调试比较方便，上传图片后在Firebug的"网络" & "HTML"里能看到"POST upload_json.xxx"，正常情况下HTTP状态为200，并返回正确的JSON格式，如图所示。
TA的推荐TA的最新馆藏[转]&[转]&