xhEditor用法

官网：http://xheditor.com

原文：http://kms.lenovots.com/kb/article.php?id=13203

在本月的MIS开发任务中，有一项是完善帮助信息的开发任务，因为设计到对文字大小，样式及图片的处理等我想到了HTML编辑器CKEditor， 但最近的版本使用中需要在jsp页面嵌入tablib标签，但现MIS系统中的JSP版本过于太低，不支持，所以我只能从网上找到能够代替的，在浏览当中我觉得xhEditor不错，它是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器，而且兼容很多浏览器，所以就选它了，具体使用如下：

1 、下载xhEditor 最新版本

下载地址：http://xheditor.com/download

2 、解压压缩文件 【demo 文件夹中可以查看各种形式的配置实例】，将其中的jquery- 1.4.2.min.js 、xheditor-zh-cn.min.js 【这里暂时使用中文版】以及 xheditor_emot、xheditor_plugins 和xheditor_skin 三个文件夹拷贝到项目的相应目录。

3 、在相应html 文件的head 标签结束之前添加： 
<script src="jquery-1.4.2.min.js"  type="text/javascript"></script>
<script src="xheditor-zh-cn.min.js"  type="text/javascript"></script>

4 、调用方法有两种： 
方法1 ：在textarea 上添加属性： class="xheditor {skin:‘default‘}" ，前面主参数也可以是xheditor-mini 和xheditor-simple ，分别加载迷你和简单工具栏，后面详细参数可以省略。
【推荐使用】方法2 ： 在您的页面初始JS 代码里加上： $(“#helpInfo”).xheditor();


<script type="text/javascript">
      $(document).ready(function(){
    //初始化xhEditor编辑器插件
    $("#helpInfo").xheditor({
     tools:‘simple‘,
     skin:‘default‘,
     upMultiple:true,
     upImgUrl: ‘{editorRoot}/upload.jsp‘,
     upImgExt: "jpg,jpeg,gif,bmp,png",
     onUpload:insertUpload
    });
    //xbhEditor编辑器图片上传回调函数
    function insertUpload(msg) {
     var _msg = msg.toString();
     var _picture_name = _msg.substring(_msg.lastIndexOf("/")+1);
     var _picture_path = Substring(_msg);
     var _str = "<input type=‘checkbox‘ name=‘_pictures‘ value=‘"+_picture_path+"‘ checked=‘checked‘ onclick=‘return false‘/><label>"+_picture_name+"</label><br/>";
     $("#helpInfo").append(_msg);
     //$("#uploadList").append(_str);
    }
    //处理服务器返回到回调函数的字符串内容,格式是JSON的数据格式.
    function Substring(s){
     return s.substring(s.substring(0,s.lastIndexOf("/")).lastIndexOf("/"),s.length);
    }
   });
  </script>

5、初始化参数列表

初始化参数示例代码：

$(‘#elm1‘).xheditor({tools:‘full‘,skin:‘default‘,showBlocktag:true,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:‘http://xheditor.com/test.css‘,fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif,png"});

初始化参数列表：

  1. tools：自定义工具按钮

    参数值：full(完全),mfull(多行完全),simple(简单),mini(迷你)或者自定义字符串，例如：‘Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About‘

完整按钮表：|：分隔符/：强制换行Cut：剪切Copy：复制Paste：粘贴Pastetext：文本粘贴Blocktag：段落标签Fontface：字体FontSize：字体大小Bold：粗体Italic：斜体Underline：下划线Strikethrough：中划线FontColor：字体颜色BackColor：字体背景色SelectAll：全选Removeformat：删除文字格式Align：对齐List：列表Outdent：减少缩进Indent：增加缩进Link：超链接Unlink：删除链接Anchor：锚点Img：图片Flash：Flash动画Media：Windows media player视频Hr：插入水平线Emot：表情Table：表格Source：切换源代码模式Preview：预览当前代码Print：打印Fullscreen：切换全屏模式About：关于xhEditor

  2. skin：皮肤风格选择

    参数值：default(默认风格),o2007blue(Office 2007 蓝色),o2007silver(Office 2007 银色),vista(Vista),nostyle(NoStyle)

  3. layerShadow：阴影的深度(按钮面板和模式窗口的背景阴影)

    参数值：0(不显示阴影),大于0的数值(显示阴影并设置阴影的深度)

  4. clickCancelDialog：点击任意位置取消按钮面板功能

    参数值：默认true(开启点击取消功能),false(关闭点击取消功能，必需要点击“取消”按钮才能关闭按钮面板)

  5. showBlocktag：显示段落标签

    参数值：true(显示段落标签),false(不显示)

  6. linkTag：样式链接link标签保留状态

    参数值：true(保留样式链接link标签),false(清理样式链接link标签)

  7. internalScript：内部JS代码保留状态

    参数值：true(保留内部JS代码),false(清理内部JS代码)

  8. inlineScript：内联JS代码保留状态

    参数值：true(保留内联JS代码),false(清理内联JS代码)

  9. internalStyle：内部样式保留状态

    参数值：true(保留内部样式),false(清理内部样式)

  10. inlineStyle：内联样式保留状态

    参数值：true(保留内联样式),false(清理内联样式)

  11. width：编辑器宽度

    参数值：不带单位的数字，例：300

  12. height：编辑器高度

    参数值：不带单位的数字，例：100

  13. background：编辑器背景

    参数值：字符串，例：url(test.gif) no-repeat，设置编辑器背景，格式同CSS同名参数一致。建议直接设置textarea的css背景备注：v1.1.1新添加

  14. loadCSS：加载样式

    参数值：URL地址、URL数组以及直接内部样式，例如：‘1.css‘、[‘1.css‘,‘2.css‘]、‘<style>body{font-size:20px;}</style>‘<br />备注：1.0.0 RC3新添加加载内部样式功能

  15. fullscreen：默认全屏显示

    参数值：true(全屏大小),false(标准大小)

  16. sourceMode：默认源代码模式

    参数值：true(源代码模式),false(编辑模式)

  17. forcePtag：强制P标签

    参数值：true(强制使用P标签),false(不强制),默认true

  18. cleanPaste：是否清理粘贴的HTML代码

    参数：0(不做任何清理),1(简单清理Word),2(深入清理Word),3(强制转文本),默认为1简单清理Word说明：若网站应用需要保留更多的Word样式效果，请设置此值为1，不过产生的HTML代码体积会大大增大备注：1.1.4版本中新变更，原为wordDeepClean和forcePasteText两个参数

  19. disableContextmenu：禁用编辑区的右键菜单

    参数值：true(禁用右键菜单),false(不禁用),默认false备注：v1.1.0新添加

  20. editorRoot：编辑器JS文件所在的根路径

    参数值：编辑器所在的根路径，用在某些特殊情况下定位编辑器的根路径，默认为空，读取默认的编辑器根路径备注：v1.1.0新添加

  21. shortcuts：自定义键盘快捷方式

    参数：快捷键对应事件代码的对象数组示例：{‘ctrl+enter‘:function(){$(‘#frmTest‘).submit();}}备注：1.0.0 beta2新添加

  22. urlBase：相对URL地址的基地址

    参数：字符串的URL地址，用以解决前后台不在同一路径的资源定位问题备注：1.1.0新添加

  23. urlType：本地URL地址强制转换方式选择

    参数：abs(绝对路径),root(根路径),rel(相对路径)备注：1.0.0 beta2新添加,v1.1.0版中名字由localUrl变更为urlType

  24. emotPath：修改表情图片的URL根路径

    参数：字符串的URL地址，默认为空，指向编辑器路径下的默认表情备注：1.1.0新添加

  25. emotMark：是否在表情img标签上标注emot属性

    参数：true(标注),false(不标注),默认为false说明：若使用了ubb插件，请设置此属性为true备注：1.0.0 beta2新添加

  26. emots：添加自定义表情

    参数：可定义多个JSON对象数组，示例如下：{qq:{name:‘QQ‘,count:55,width:25,height:25,line:11},msn:{name:‘MSN‘,count:40,width:22,height:22,line:8}}        name：表情分组名        count：表情数量        list：表情列表，例：{test1:‘表情1‘,test2:‘表情2‘}，键名代表文件名，扩展名必需为gif，键值代表alt信息        width：单个表情区域宽度，必需大于或等于表情最大宽度        height：单表情区域高度，必需大于或等于表情最大高度        line：单行显示表情数量        说明：count和list必需选其中一个值，注意count模式插入表情img的alt为空备注：1.0.0 beta2新添加

  27. hoverExecDelay：悬停自动执行延迟的时间

    参数：数值(单位毫秒)，默认为100，设置为-1关闭此功能备注：1.0.0 rc2新添加

  28. defLinkText：超链接的默认文字

    参数值：字符串(默认值：“点击打开链接”)说明：只在不选择任何内容的情况下才会用到这个参数值

  29. modalWidth：showModal弹出窗口的默认宽度

    参数值：数值，默认为350说明：弹出窗口的默认宽度

  30. modalHeight：showModal弹出窗口的默认高度

    参数值：数值，默认为220说明：弹出窗口的默认高度

  31. modalTitle：showModal弹出窗口是否显示上方的标题栏

    参数值：true(显示),false(不显示)说明：控制弹出窗口是否显示上方的标题栏，默认为显示，若需要显示一个更定制个性化的iframe窗口，可通过此参数隐藏上方的标题栏

  32. upBtnText：上传按钮的文字

    参数值：任意字符串,默认值：“上传”备注：1.0.0 beta2新添加

  33. html5Upload：是否开启HTML5上传支持

    参数值：true(允许),false(不允许),默认为true允许说明：本功能需要浏览器支持HTML5上传备注：1.0.0 Final新添加

  34. upMultiple：允许一次上传多少个文件

    参数值：大于0的数值,默认：99,设置为1关闭多文件上传说明：本功能需要浏览器支持HTML5上传备注：1.0.0 RC3新添加

  35. upLinkUrl：超链接文件上传接收URL

    参数值：接收用户上传的服务器端程序URL，默认留空为禁用超链接上传功能，具体使用方法请参考demo8演示文件注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php

  36. upLinkExt：超链接上传前限制本地文件扩展名

    参数值：超链接上传前限制的文件扩展名列表，默认为：zip,rar,txt，建议与服务端扩展名检查列表一致

  37. upImgUrl：图片文件上传接收URL

    参数值：接收用户上传的服务器端程序URL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php

  38. upImgExt：图片上传前限制本地文件扩展名

    参数值：图片上传前限制的文件扩展名列表，默认为：jpg,jpeg,gif,png，建议与服务端扩展名检查列表一致

  39. upFlashUrl：动画文件上传接收URL

    参数值：接收用户上传的服务器端程序URL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php

  40. upFlashExt：动画上传前限制本地文件扩展名

    参数值：动画上传前限制的文件扩展名列表，默认为：swf，建议与服务端扩展名检查列表一致

  41. upMediaUrl：视频文件上传接收URL

    参数值：接收用户上传的服务器端程序URL，默认留空为禁用上传功能，具体使用方法请参考demo8演示文件注：可使用内置变量：{editorRoot}，代表当前编辑器的根路径，例：{editorRoot}upload.php

  42. upMediaExt：视频上传前限制本地文件扩展名

    参数值：视频上传前限制的文件扩展名列表，默认为：avi，建议与服务端扩展名检查列表一致

  43. onUpload：文件上传成功回调函数

    参数值：成功后需要执行的函数说明：这个函数执行时返回的值为上传程序返回的msg变量，可能为字符串或者数组，若为字符串则直接代表url，若是数组，则必需包含一个url的变量，其它可由可开发者自定义备注：1.0.0 beta2新添加

  44. plugins：自定义按钮之插件扩展

    插件对象的属性解释：c：样式表名称t：插件名字(鼠标在按钮上方时显示)s：快捷方式，例："ctrl+enter"h：是否鼠标悬停直接执行,1:直接执行(省略当前值代表不直接执行)e：按钮点击后需要执行的代码(省略执行代码，则把当前的插件名作为参数，调用浏览器的execCommand函数)

特别说明：如果您希望样式表存储在系统自带的模板目录ui.css中，请将插件对象的样式名留空，则会自动按照插件名来调用相应的样式，例如：xhEdtBtnCut、xhEdtBtnCopy，其中的Cut和Copy是插件名

具体调用方法请参考演示文件夹中的demo9

  45. submitID：触发表单提交的按钮ID值

    参数值：表单提交按钮的ID值，默认在form表单上绑定submit以同步结果说明：通过本参数，在非标准submit提交环境下，比如AJAX提交，可以由用户点击提交按钮以触发编辑器最新值的同步备注：v1.1.7新添加

  46. onPaste：剪切板粘贴回调函数

    参数值：用户粘贴后需要执行的函数说明：此函数用来过滤用户粘贴的代码，若返回false禁用粘贴备注：v1.1.8新添加

  47. localUrlTest：非本站域名测试正则表达式

    参数值：正则表达式说明：本参数用来测试某些组件中测试URL是否属于本站域名备注：v1.1.8新添加

  48. remoteImgSaveUrl：远程图片抓取接收程序URL

    参数值：字符串(若不设置不开启此功能)说明：当localUrlTest测试为false时，会将图片URL发往当前参数指定的服务器端上传接收程序，抓取成功后将本地URL返回并替换备注：v1.1.8新添加

  49. readTip：无障碍读屏提示

    参数值：字符串(默认为空)说明：无障碍读屏软件提示文字，可用来为残疾人士提示快捷键等信息备注：v1.1.9新添加
时间： 2024-10-25 19:36:05

xhEditor用法的相关文章

xhEditor 整理用法

1.1. 在线可视化HTML编辑器概述 在Web程序应用中,最常见的一种行为是信息和言论的发布和交流.而在信息发布的同时,往往会有对信息发布的格式.类型和功能上的需求,比如:加粗.下划线等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率.在这个需求的背景下,HTML在线编辑器就应运而生了. 顾名思义,在线HTML编辑器就是在线编辑HTML代码的工具,它经常被应用于留言板留言.论坛发贴.Blog编写日志或等需要用户输入HTML的地方,是Web应用的常用模块之一.在线HT

Html在线编辑器--基于Jquery的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:简单的调

js中获取时间new date()的用法

js中获取时间new date()的用法 获取时间:   var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份(4位,1970-????) 3 myDate.getMonth(); //获取当前月份(0-11,0代表1月) 4 myDate.getDate(); //获取当前日(1-31) 5 myDate.getDay();

20.5 Shell脚本中的逻辑判断；20.6 文件目录属性判断；20.7 if特殊用法；20.8 20.9 cace判断（上下）

扩展: select用法 http://www.apelearn.com/bbs/thread-7950-1-1.html 20.5 Shell脚本中的逻辑判断 格式1:if 条件 ; then 语句; fi 1. 创建if1.sh测试脚本: [[email protected] ~]# vi if1.sh a=5,如果a大于3,满足这个条件,显示ok 添加内容: #!/bin/bash a=5 if [ $a -gt 3 ] then echo ok fi 2. 执行if1.sh脚本: [[e

20.1 Shell脚本介绍；20.2 Shell脚本结构和执行；20.3 date命令用法；20.4 Shell脚本中的变量

20.1 Shell脚本介绍 1. shell是一种脚本语言 aming_linux blog.lishiming.net 2. 可以使用逻辑判断.循环等语法 3. 可以自定义函数 4. shell是系统命令的集合 5. shell脚本可以实现自动化运维,能大大增加我们的运维效率 20.2 Shell脚本结构和执行 1. 开头(首行)需要加: #!/bin/bash 2. 以#开头的行作为解释说明: 3. 脚本的名字以.sh结尾,用于区分这是一个shell脚本 4. 执行.sh脚本方法有两种:

shell 中seq的用法 echo -n用法

用法:seq [选项]... 尾数 或:seq [选项]... 首数 尾数 或:seq [选项]... 首数 增量 尾数 从1循环到100的两种方法(bash 其它的shell没试过)for x in `seq 1 100`;do echo $x;donefor x in {1..100};do echo $x;done echo -n 不换行输出 $echo -n "123" $echo "456" 最终输出 123456 echo -e 处理特殊字符 若字符串中

sudo的用法

su -l user -C 'COMMAND' 是用user这个用户执行命令 我们一般使用sudo 这个命令 sudo [-u] user COMMAND sudo [-k] COMMAND 清除此前用户的密码. sudo的配置文件/etc/sudoers 配置项为 users    hosts=(runas)    commands users:可以是一个用户的名称也可以是一个组,也可以是一个别名 username #UID user_alias 用户别名的用法 User_Alias NETA

几招学会 Python 3 中 PyMongo 的用法

本文和大家分享的是Python3下MongoDB的存储操作相关内容,在看本文之前请确保你已经安装好了MongoDB并启动了其服务,另外安装好了Python的PyMongo库.下面进入正题,一起来看看吧,希望对大家学习Python3有所帮助. 连接MongoDB 连接MongoDB我们需要使用PyMongo库里面的MongoClient,一般来说传入MongoDB的IP及端口即可,第一个参数为地址host,第二个参数为端口port,端口如果不传默认是27017. import pymongo cl

11 css中分组选择符的用法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> h1,span{color:red;} a:hover{color:#2EE926;} /*分组选择符的用法*/ </style> </head> <body&