梦相随1006

版权归 梦相随1006 所有,未经 https://www.cnblogs.com/xin1006 作者许可,严禁转载

导航

Html在线编辑器--基于Jquery的xhEditor轻量级编辑器

 

xhEditor V1.2.2 下载地址 

 

开源中国社区: http://www.oschina.net/p/xheditor

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0、Firefox 3.0、Opera 9.6、Chrome 1.0、Safari 3.22

 

 

Features(特点):

  • Small:初始加载5个文件,包括:1个js(36k)+2个css(6k)+2个图片(4k),总共46k。若js和css文件进行gzip压缩,可以进一步缩减为18k左右。
  • Fast:基于jQuery引擎开发,提供高效的代码执行效率
  • Simple:简单的调用方式,加一个class属性就能将您的textarea立马变成一个功能丰富的可视化编辑器。
  • Word:实现Word代码自动检测并清理,提供高效完美的Word代码过滤方案,生成代码最优化精简,但是却不丢失任何细节效果。
  • UBB: 提供完美的UBB可视化编辑解决方案,在您获得安全高效代码存储的同时,又能享受可视化编辑的便捷

 

 

xhEditor技术手册http://www.cnblogs.com/xionghui/archive/2012/05/05/2485412.html

 

 常见问题:

xhEditor,读取textarea的value值,取不到最新编辑结果

 

正常加载了xhEditor,读取textarea的value值,为什么读取不到最新编辑结果?

目前网络中所有的在线编辑器都是利用新创建的iframe来实现可视化编辑功能,xhEditor也不例外,所以在提交前必需要将最新的编辑结果重新同步到原来的textarea。

xhEditor默认会在textarea所在的form对象中绑定onsubmit事件,当用户点击submit按钮时,xhEditor就会将最新结果同步回textarea,随后随表单中的其它表单项一同提交到服务端脚本。因此,如果不需要用Javascript额外处理,普通的表单式提交是没任何问题的。

如果网页中需要用Javascript额外处理编辑结果,比如ajax提交表单,则有三种解决方案:

  1. 使用jQuery的事件绑定或者标准DOM绑定方法在form上绑定submit事件(绑定代码必需在xhEditor初始化代码后面),即是在xhEditor把值回传后再读取,在相应绑定的函数中读取textarea的value值即是最新编辑结果;
  2. 使用jQuery的标准取值方法:$('#textarea_id').val();
  3. 使用xhEditor提供的专用读值API接口:editor.getSource();

 

Spring HtmlUtils把HTML编码转义,可将HTML标签互相转义


org.springframework.web.util.HtmlUtils 可以实现HTML标签及转义字符之间的转换。

/** HTML转义 **/
String s = HtmlUtils.htmlEscape("<div>hello world</div><p>&nbsp;</p>");
System.out.println(s);
String s2 = HtmlUtils.htmlUnescape(s);
System.out.println(s2);
输出的结果如下:
&lt;div&gt;hello world&lt;/div&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;

<div>hello world</div><p>&nbsp;</p>

 

  xheditor,怎样单独去掉 "about" 按钮

 

在xheditor-1.1.14-zh-cn.js里有个变量叫 
var arrTools={Cut:{t:'剪切 (Ctrl+X)'},Copy:{t:'复制 (Ctrl+C)'},Paste:{t:'粘贴 (Ctrl+V)'},Pastetext:{t:'粘贴文本',h:isIE?0:1},Blocktag:{t:'段落标签',h:1},Fontface:{t:'字体',h:1},FontSize:{t:'字体大小',h:1},Bold:{t:'加粗 (Ctrl+B)',s:'Ctrl+B'},Italic:{t:'斜体 (Ctrl+I)',s:'Ctrl+I'},Underline:{t:'下划线 (Ctrl+U)',s:'Ctrl+U'},Strikethrough:{t:'删除线'},FontColor:{t:'字体颜色',h:1},BackColor:{t:'背景颜色',h:1},SelectAll:{t:'全选 (Ctrl+A)'},Removeformat:{t:'删除文字格式'},Align:{t:'对齐',h:1},List:{t:'列表',h:1},Outdent:{t:'减少缩进'},Indent:{t:'增加缩进'},Link:{t:'超链接 (Ctrl+L)',s:'Ctrl+L',h:1},Unlink:{t:'取消超链接'},Anchor:{t:'锚点',h:1},Img:{t:'图片',h:1},Flash:{t:'Flash动画',h:1},Media:{t:'多媒体文件',h:1},Hr:{t:'插入水平线'},Emot:{t:'表情',s:'ctrl+e',h:1},Table:{t:'表格',h:1},Source:{t:'源代码'},Preview:{t:'预览'},Print:{t:'打印 (Ctrl+P)',s:'Ctrl+P'},Fullscreen:{t:'全屏编辑 (Esc)',s:'Esc'},About:{t:'关于 xhEditor'}}; 

把这里面的最后About:{t:'关于 xhEditor'}删除即可

 

 

 其它介绍xhEditor比较好的文章:

 

xhEditor用法

xheditor的使用方法

 

我的代码:

 

 

 

posted on 2016-03-19 15:47  梦相随1006  阅读(599)  评论(0编辑  收藏  举报