当前位置:文档之家› KindEditor在线HTML编辑器的使用方法

KindEditor在线HTML编辑器的使用方法

KindEditor在线HTML编辑器的使用方法
KindEditor在线HTML编辑器的使用方法

KindEditor是一款用Javascript编写的开源在线HTML编辑器,主要用户是让用户在网站上获得可见即可得的编辑效果,开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。你可以在其官网了解更多信息,包括演示、文档、下载等。

KindEditor的使用方法也非常简单,下面言小鱼就简单介绍一下其用法,这些内容你可以在KindEditor官网找到。

1、你要把所需的文件下载下来,下载地址去官网找。

2、你要把所需要的文件上传到你的网站,接下来就是引用了。在需要显示编辑器的位置添加textarea输入框,注意ID在页面中应该是唯一的,不说你也知道。

3、在该HTML页面添加以下脚本:

TIP:第一个参数可用其它CSS选择器,匹配多个textarea时只在第一个元素上加载编辑器。通过K.create函数的第二个参数,可以对编辑器进行配置,具体参数请参考编辑器初始化参数(官网有详细介绍)。

4、如果你想获得编辑器中的数据,可以用下面的代码:

KindEditor的使用方法就介绍到这里了,如果您还有不明白的地方可以去官网查找详细资料,相信一定能找到您想要的答案!

kindeditor使用方法==

kindeditor详细使用说明 1.下载KindEditor 最新版本。打开下载页面 2. 解压zip文件,将所有文件上传到您的网站程序目录下。例如:http://您的域名/editor/ 3.在需要显示编辑器的位置添加TEXTAREA输入框。 id在当前页面必须是唯一的值,还有,在有些浏览器上不设宽度和高度可能显示有问题,所以最好设一下宽度和高度。宽度和高度可用inline样式设置,也可用编辑器初始化参数设置。 在TEXTAREA里设置HTML内容即可实现编辑,在这里需要注意的是,如果从服务器端程序(ASP、PHP、https://www.doczj.com/doc/448544038.html,等)直接显示内容,则必须转换HTML特殊字符(>,<,&,")。具体请参考各语言目录下面的demo.xxx程序,目前支持ASP、https://www.doczj.com/doc/448544038.html,、PHP、JSP。 4.在该HTML页面添加以下脚本。注: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之外还可以设置其它的参数,具体属性请参考编辑器初始化参数。

HTML网页编辑代码大全详细使用方法

html网页编辑代码大全详细使用方法 添加音乐 注册会员登录首页开通窝窝QQ-交流群站内娱乐颜色代码搜索帖子《声色具全》Summer°啦啦之乖乖宝贝啦啦&毛毛《简粉粉色》莫晓晓《简约蓝色》莫晓晓rose.《简约灰色》莫晓晓圣诞女孩【星期⒏音乐论坛】用心聆听,这里有你想要的声音。?【资源共享】?【论坛HTML帖子常用代码】-发现代码贴好看,不懂的,有兴趣的可以研究下。 网页搜索站内搜索搜索 返回列表回复发帖 发新话题发布投票发布悬赏发布辩论发布活动发布视频发布商品沵旳"唯1。发短消息 加为好友 沵旳"唯1。(只能a1自己。)当前离线 那些所谓d2情〃 UID21618帖子866精华42积分9318威望976金钱3587贡献1450阅读权限150性别女来自寂’在线时间248小时注册时间2009-11-29最后登录2010-3-1 ?星期⒏管理版主? UID21618帖子866精华42积分9318威望976金钱3587贡献1450阅读权限150性别女来自寂’在线时间248小时注册时间2009-11-29最后登录2010-3-1 【楼主】 打印字体大小:tT发表于2010-1-2114:53|只看该作者踩窝 窝送礼物问候Ta【论坛HTML帖子常用代码】-发现代码贴好看,不懂的,有兴趣的可以研究下。 关于“html图片移动...”的内容 本站搜索更多关于“html图片移动代码”的内容 本帖最后由沵旳"唯1。于2010-1-2114:54编辑 一、文字标记 基本代码如下:

几种常用网页文本编辑器总结

文本编辑器应用总结 一.lhgeditor文本编辑器 lhgeditor组件文件结构: 1. lhgeditor.js:组件的核心JS文件 2. lhgeditor.css:组件的样式表文件 3. images:组件所需的图片都在此文件夹中 以上三个文件为组件所必须的三个文件,组件包中其它以“_”开头的文件为示例的演示文件,实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件,记得加载组件前先要加载此文件。 lhgeditor组件使用说明: 1. 在调用组件的页面加载lhgcore.j s和lhgeditor.js两个文件。 2. 在window.onload函数里加入J.editor.add(编辑器的id).init(); 例:

二.nicEdit文本编辑器 再引入三个js文件ueditor.all.js、ueditor.config.js、lang/zh-cn/zh-cn.js,一定是在以上代码之后引入。 在需要使用编辑器的位置,添加代码如下: //此处的引入文件位置路径为相对于该PHP文件的位置此为demo.php Note ?第一个参数可用其它CSS选择器,匹配多个textarea时只在第一个元素上加载编辑器。 ?通过K.create函数的第二个参数,可以对编辑器进行配置,具体参数请参考编辑器初始化参数。 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图片上传后生成带域名绝对路径配置及提交空格无法保存解决方法

kindeditor图片上传后生成带域名绝对路径配置方法 kindeditor默认上传图是不带域名域名绝对路径了,如果我们希望生成之后带上域名就需要进入urlType进行设置了,我们kindeditor中的urlType有几个参数默认这空值”“、”relative”、”absolute”、”domain”了。 关键在于初始化kindeditor时指定以下参数: urlType ”“ 空为不修改URL ”relative”相对路径 ”absolute”绝对路径 ”domain”带域名的绝对路径。 ============================================================================== 关于kindeditor提交空格问题的解决办法 版本4.1.10 问题反馈:后台编辑器段首空格无法正常保存到数据库。 变通办法:早期,通知用户使用全角空格,但后面发现提交后显示正常,再次编辑时未出现空格。 最终解决办法: 修改kindeditor.js 725行 部分我公司调整后的js行数为752行 将本行修改为: var re = /([ \f\n\r\t\v]*)<(\/)?([\w\-:]+)((?:\s+|(?:\s+[\w\-:]+)|(?:\s+[\w\-:]+=[^\ s"'<>]+)|(?:\s+[\w\-:"]+="[^"]*")|(?:\s+[\w\-:"]+='[^']*'))*)(\/)?>([ \f\n\ r\t\v]*)/g; 就是把第一个和最后一个\s 替换成[ \f\n\r\t\v]

修改前请注意备份

细数几款免费好用的在线HTML编辑器

细数几款免费好用的在线HTML编辑器 先普及一下基本知识:什么叫在线HTML编辑器?说得简单点,在线HTML编辑器就是在网上发帖子、写博客的那个带编辑功能的框框,可以进行图文排版等操作。当年本菜鸟做网站的时候,曾经自己用javascript编写过一个比较简单的在线HTML编辑器,用于文本内容的排版。但是因为水平有限,很多功能都无法实现。后来有了eWebEditor,功能确实强大,但这个编辑器是个收费的软件,并且正因为功能强大,也就显得过重,一些轻量的场合不是太适用。那有没有既免费、又功能强大、还能适应轻量场合的在线HTML编辑器呢?答案肯定是有的。这首先要感谢这些年来有一批奉献精神的程序猿们不断推进共享软件的开发,让我们得以享受他们的成果。一、百度出品的UEditorUEditor是由百度web 前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。特别要说的是,头条号后台发布文章的编辑器就是用的UEditor!百度UEditorUEditor还有一个轻量版的,叫做UMeditor,简称UM。UM是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线HTML编辑器。主要特点是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了

div的加载方式,以达到更快的加载速度和零加载失败率。UM的第一个使用者是百度贴吧,以经受贴吧每天几亿的pv 的考验,功能设计应当是最优化的了。当然随着代码的减少,UM的功能对于UE来说还是有所减少,但也有增加,比如拖拽图片上传,chrome的图片拖动改变大小等。百度UEditor界面二、xhEditor开源HTML编辑器xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。xhEditor完全基于Javascript 开发,可以应用在任何的服务端语言环境下,例如:PHP、ASP、https://www.doczj.com/doc/448544038.html,、JA V A等。可以在CMS、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。 主要特点:精简迷你:初始加载4个文件,包括:1个js(50k)+2个css(10k)+1个图片(5k),总共65k。若js和css文件进行gzip压缩传输,可以进一步缩减为24k左右。使用简单:简单的调用方式,加一个class属性就能将textarea变成一个功能丰富的可视化编辑器。无障碍访问:提供WAI-ARIA全面支持,全键盘精细操作,全程语音向导,提供完美无障碍访问体验,充分满足残疾人的上网需求。内置Ajax上传:内置强大的Ajax上传,包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传),剪切板上传及远程抓

HTML在线编辑器的调用方法和使用方法

HTML在线编辑器不需要懂得使用Dreamweaver,会用Word就会使用此编辑器,在文章系统或者是新闻系统需要文字编辑的web程序中非常实用。 但是如何将html编辑器嵌入到web页中和怎么取得里面的数据呢?! 首先我们假定我们所要调用得HTML在线编辑器放在一个单独得页面中,文件名是gledit.htm。 HTML在线编辑器有两种基本调用方法 一、使用object调用: 1、怎么在web页中嵌入html编辑器:我们在需要嵌入得位置加入以下html代码: 其中object标签里面得data后面接得数据就是我们所要调用得在线编辑器页得路径,id 就是我们调用object得id,后面取编辑器中得数据时就要用到这个id。Width和height就是编辑器得高度和宽度了。 2、怎么取得html编辑器中的数据:所有需要提交的内容我们都是放在一个表单里面,同样利用object调用的编辑器也放在这个表单里面,同时我们可以设置一个隐藏的文本区域()用以在提交的时候临时保存html在线编辑器的数据,因为在asp或者jsp,php中不能直接获取表单中的object的内容,所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下:

KindEditor-编辑器配置参数属性

KindEditor-编辑器配置参数属性 KindEditor编辑器的使用方法,通过使用KE.show(config)方法即可将编辑器添加到文档中。下面是一段源码: KE.show = function(args) { KE.init(args); KE.event.ready(function() { KE.create(args.id); }); }; 从源码中可以看出,有两种使用编辑器的方法: 法一:KE.show(config); 法二:KE.init(config);KE.create(id); ·无论使用哪种方式使用KindEditor编辑器,都必须进行参数配置;·可以在KE.show()和KE.init()方法中传递配置参数config; ·配置参数config是一个对象,一般使用字面量对象; ·其中,id参数是唯一必须进行配置的,其他参数可以省略。 参数设置例子 KE.show({ id : "content_1", width : "70%", //编辑器的宽度为70%

height : "200px", //编辑器的高度为100px filterMode : false, //不会过滤HTML代码 resizeMode : 1 //编辑器只能调整高度 }); 配置参数 1、id TEXTAREA输入框的ID,必须设置。 数据类型:String 2、items 配置编辑器的工具栏,其中"-"表示换行,"|"表示分隔符。 数据类型:Array 默认值: ['source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',

7款国产的在线HTML编辑器

7款国产的在线HTML编辑器 在线HTML编辑器或者是基于浏览器的所见即所得的HTML编辑器广泛用于各种类型网站的文章发布、论坛发贴等功能。例如在oschina网站上发帖、写博客、提交新闻、添加开源软件等处都会用到这种编辑器。 目前有非常多非常优秀的在线HTML编辑器,而且这些编辑器大多数都是开源的,而国产的编辑器也已成熟,雄踞一方,本文罗列一些非常优秀的出自国内程序员之手的HTML 编辑器,如有不足请大家补充,请看具体列表(排名不分先后顺序): KindEditor KindEditor可以说是目前最为优秀、成熟的编辑器,加载速度非常快,文档全面,支持扩展开发,为众多网站所使用(本站也部分采用了KindEditor编辑器,将来将会全面使用)。 xhEditor xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0、Firefox 3.0、Opera 9.6、Chrome 1.0、Safari 3.22。xhEditor文档也非常全面,支持插件开发。

SinaEditor 新浪编辑器应该算是最贴近网友体验的编辑器,简洁、大方,并且使用方便、功能强大。贴图为证: eWebEditor

eWebEditor是基于浏览器的、所见即所得的在线HTML编辑器。她能够在网页上实现许多桌面编辑软件(如:Word)所具有的强大可视编辑功能。WEB开发人员可以用她把传统的多行文本输入框textarea替换为可视化的富文本输入框,使最终用户可以可视化的发布HTML格式的网页内容。eWebEditor!已基本成为网站内容管理发布的必备工具! TQEditor 这是国内第一个兼容IE9的在线编辑器,也是一个功能体积比最优的的在线编辑器 uuHEdt uuHEdt(在线网页编辑器)是基于Web的所见即所得的HTML网页编辑器。可以非常简单的在您的网站中嵌入可见即所得的网页编辑功能。广泛的支持常见的浏览器如 IE,Opera,Firefox,Google Chrome and Safari。

基于thinkphp的在线编辑器kindeditor

首先,去官网下载最新版的kindeditor,然后把里面asp,jsp,net,example的全删除,然后改名为editor放进public(最外层目录的public)文件夹里面。 在目录lib目录建立ORG文件夹(个人习惯用ORG存储公用类),建立一个共用类,editor.class.php 下面是这个类的具体代码 欢迎使用编辑器
” * */ function editor($Height="500px",$Width="700px",$V alue="

欢迎使用编辑器


") { $this->Value = $Value; $this->Height = $Height; $this->Width = $Width; } /*此方法是在线编辑器的调用 * 在需要编辑器的地方调用此函数 */ function createEditor(){ return ""; } /*使用在线编辑器必须在html之间调用此方法,才能正确调用, * 内容主要都是script */ function usejs(){ $str=<<

miniUI_KindEditor使用

KindEditr在miniUI中的应用 系统:Win7 开发环境:Java 框架:OSGI 前台jsp先定义一个textarea,如下: 我把它的取值和赋值都放在了js中,如下: var editorId = "editor_id";//定义变量为富文本ID var editor = null;//定义富文本 //写一个调用方法showeditor function showeditor() { //KindEditor.ready();方法用了之后在FireFox中无法编辑,所以用 了.create试试 editor = KindEditor.create('#' + editorId/*这里是富文本ID*/, { resizeType: 1,//设置只能改变高度 allowPreviewEmoticons: false, allowImageUpload: true, afterBlur:function(){this.sync();},//失去焦点(blur)时执 行的回调函数。在画面编辑富文本时,同步数据,如果不写,无法用时取到最 新的值,那么保存到数据库的值就是旧的 afterCreate:function(){this.sync();}//当我不点击富文本直接进行其他操作时,就靠这个方法同步数据,用a fterBlur是无法同步的items: []//,//控制工具栏显示哪些按钮,不写时默认成全部显示 }); } 新建,要将富文本设置为空时,如下: KindEditor.html("#editor_id",""); 有试过miniUI提供的editor.html("");,editor.html(null) ;,但是都不行,赋值不成功,在网上看到有大拿用这种写法的,试了发现好用,特别开心。

相关主题
文本预览
相关文档 最新文档