xhEditor_xheditor - CSDN
精华内容
参与话题
  • java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.MultipartRequest com.wa.editor.xheditor.controller.UploadController.uploa
    java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.MultipartRequest
    	com.wa.editor.xheditor.controller.UploadController.upload(UploadController.java:28)
    	sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    	sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    	sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    	java.lang.reflect.Method.invoke(Method.java:597)
    	org.springframework.web.method.support.InvocableHandlerMethod.invoke(InvocableHandlerMethod.java:219)
    	org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:132)
    	org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:104)
    	org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandleMethod(RequestMappingHandlerAdapter.java:745)
    	org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:686)
    	org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:80)
    	org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:925)
    	org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:856)
    	org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:936)
    	org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:838)
    	javax.servlet.http.HttpServlet.service(HttpServlet.java:643)
    	org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:812)
    	javax.servlet.http.HttpServlet.service(HttpServlet.java:723)
    	org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:88)
    	org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
    
    
    在xhEditor中上传图片,ie测试可以上传成功,但是FireFox却不行,抛出以上异常。不知道什么情况...
    展开全文
  • 但是xheditor只支持ie下播放。专业的说法是视频通过插件上传之后编译到embed标签下。支持application/x-mplayer2。但是新版的谷歌、火狐并不鸟它。谷需要修改! 下载地址(官网):...

    目前有一个陈年项目,需要支持视频上传。但是xheditor只支持ie下播放。专业的说法是视频通过插件上传之后编译到embed标签下。支持application/x-mplayer2。但是新版的谷歌、火狐并不鸟它。谷需要修改!


    下载地址(官网):http://xheditor.com/download.html

    不过到2015年之后就不更新了。可惜了,虽然觉得这个style蛮清爽的。但是功能全面性、安全性麽,推荐百度的ueditor。地址:http://ueditor.baidu.com/website/download.html


    代码全面的不上了。(吐槽一下,xheditor-1.2.2.min.js这个玩意坑,需要自行格式化一下,因为,顺序完全打乱。)

    上步骤:

    1、找到对应视频方法“media”

    case "media":
        _this.showEmbed("Media", htmlMedia, "application/x-mplayer2", "clsid:6bf52a52-394a-11d3-b153-00c04f79faa6", ' enablecontextmenu="false" autostart="false"', settings.upMediaUrl, settings.upMediaExt);
        break;
    2、原始代码

     else 1 === u.length && (e = u[0].split("||"), 0 === r.length && (_this.pasteHTML(l.replace("xhe_tmpurl", e[0] + "#xhe_tmpurl") + " />"), r = $('embed[src$="#xhe_tmpurl"]', _doc)), xheAttr(r, "src", e[0]), r.attr("width", e[1] ? e[1] : t), r.attr("height", e[2] ? e[2] : n))
    }
    修改之后

    var url=e;
    var tempFlvCode='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="'+t+'" height="'+n+'">      <param name="movie" value="/flvplayer.swf" />      <param name="quality" value="high" />      <param name="allowFullScreen" value="true" />      <param name="FlashVars" value="vcastr_file='+url+'&LogoText=description&BufferTime=3&IsAutoPlay=1">      <embed src="/flvplayer.swf" allowfullscreen="true" flashvars="vcastr_file='+url+'&IsAutoPlay=1&LogoUrl=/logo.jpg" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="'+t+'" height="'+n+'"></embed>  </object>';
    _this.pasteHTML(tempFlvCode);
    原理:

    flvplayer.swf
    通过此控件播放(具体请baidu、google)

    展开全文
  • xheditor使用方法

    千次阅读 2013-04-10 15:40:19
    但是getElementById方法只能取得单个对象,而对于CheckBox数组则无能为力。 1. 下载xhEditor最新版本。下载地址:http://xheditor.com/download ...2. 解压zip文件,将其中的xheditor.js以及xhedit
    为了同时支持Firefox和IE,我们常常用document.getElementById(id)方法来取得HTML对象。但是getElementById方法只能取得单个对象,而对于CheckBox数组则无能为力。
    
    1. 下载xhEditor最新版本。下载地址:http://xheditor.com/download

    2. 解压zip文件,将其中的xheditor.js以及xheditor_emot和xheditor_skin两个文件夹上传到网站相应目录

    3. 在相应html文件的head标签结束之前添加

    <script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>
    4. 调用方法有两种:

    方 法1:在textarea上添加属性: class="xheditor"(设置为xheditor-mini和xheditor-simple,分别默认加载迷你和简单工具栏)方法2:在您的 页面初始JS代码里加上: $('#elm1').xheditor(true);例如:$({$('#elm1').xheditor(true);});相应的隐藏编辑的代码 为:$('#elm1').xheditor(false);
    初始化参数说明
    初始化示例代码:

    $('#elm1').xheditor(true,{tools:'full',skin:'default',showBlocktag:true,readonly:false,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://jb51.net/test.css',fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif,png",keepValue:true,plugins:{}});
    tools:自定义工具按钮

    参数值:full(完全),simple(简单),mini(迷你)或者自定义字符串,例 如:'GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,GStart,Source,Preview,Fullscreen,About,GEnd' 完整按钮表:GStart:组开始GEnd:组结束Separator:分隔符Cut:剪切Copy:复制Paste:粘贴Pastetext:文本粘贴 Blocktag:段落标签Fontface:字体FontSize:字体大小Bold:粗体Italic:斜体Underline:下划线 Strikethrough:中划线FontColor:字体颜色BackColor:字体背景色Removeformat:删除文字格式Align:对 齐List:列表Outdent:减少缩进Indent:增加缩进Link:超链接Unlink:删除链接Img:图片Flash:Flash动画 Media:Windows media player视频Emot:表情Table:表格Source:切换源代码模式Preview:切换预览模式Fullscreen:切换全屏模式 About:关于xhEditor
    skin:皮肤风格选择

    参数值:default(默认风格),o2007blue(Office 2007 蓝色),o2007silver(Office 2007 银色)
    showBlocktag:显示段落标签

    参数值:true(显示段落标签),false(不显示)
    internalScript:内部JS代码保留状态

    参数值:true(保留内部JS代码),false(清理内部JS代码)
    inlineScript:内联JS代码保留状态

    参数值:true(保留内联JS代码),false(清理内联JS代码)
    internalStyle:内部样式保留状态

    参数值:true(保留内部样式),false(清理内部样式)
    inlineStyle:内联样式保留状态

    参数值:true(保留内联样式),false(清理内联样式)
    width:编辑器宽度

    参数值:不带单位的数字,例:300
    height:编辑器高度

    参数值:不带单位的数字,例:100
    loadCSS:加载样式

    参数值:样式表网址,例如:'http://www.jb51.net/css/global.css'
    fullscreen:默认全屏显示

    参数值:true(全屏大小),false(标准大小)
    readonly:默认只读模式

    参数值:true(只读模式),false(可编辑模式)
    sourceMode:默认源代码模式

    参数值:true(源代码模式),false(编辑模式)
    forcePtag:强制P标签

    参数值:true(强制使用P标签),false(不强制)
    keepValue:自动保存src和href属性值

    参数值:true(保存),false(不保存)说明:在IE等浏览器下使用编辑器,插入的图片和链接地址都会被浏览器自动转为绝对地址,比如输入:a.gif,自动会转为:http://test.com/a.gif
    modalWidth:showModal弹出窗口的默认宽度

    参数值:数值,默认为350说明:弹出窗口的默认宽度
    modalHeight:showModal弹出窗口的默认高度

    参数值:数值,默认为220说明:弹出窗口的默认高度
    modalTitle:showModal弹出窗口是否显示上方的标题栏

    参数值:true(显示),false(不显示)说明:控制弹出窗口是否显示上方的标题栏,默认为显示,若需要显示一个更定制个性化的iframe窗口,可通过此参数隐藏上方的标题栏
    upLinkUrl:超链接文件上传接收URL

    参数值:接收用户上传的服务器端程序URL,默认留空为禁用超链接上传功能,具体使用方法请参考demo8演示文件
    upLinkExt:超链接上传前限制本地文件扩展名

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

    参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件
    upImgExt:图片上传前限制本地文件扩展名

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

    参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件
    upFlashExt:动画上传前限制本地文件扩展名

    参数值:动画上传前限制的文件扩展名列表,默认为:swf,建议与服务端扩展名检查列表一致
    upMediaUrl:视频文件上传接收URL

    参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考demo8演示文件
    upMediaExt:视频上传前限制本地文件扩展名

    参数值:视频上传前限制的文件扩展名列表,默认为:avi,建议与服务端扩展名检查列表一致
    上传接口使用注意事项:

    demos 目录中的upload.php仅为演示代码,若您使用的是其它的服务器脚本语言,请自行对初始化参数中的upLinkUrl、upImgUrl、 upFlashUrl和upMediaUrl进行修改,并开发相应服务器上传接收程序。若您希望在自己的项目中实际使用,请自行修改代码或者重新开发,开 发过程中请注意上传文件的格式及大小限制,注意服务器安全问题。 上传接收程序开发规范:1,上传文件域名字为:upload2,返回结构必需为json,并且结构如下: {"err":"","msg":"200906030521128703.gif"}若上传出现错误,请将错误内容保存在err变量中;若上传成功,请 将服务器上的绝对或者相对地址保存在msg变量中。编辑器若发现返回的err变量不为空,则弹出窗口显示返回的错误内容。上传管理方案建议:1,在编辑器 初始化时在upload.php后面跟上一个服务器生成的绝对唯一的跟踪值,例如:upload.php?infoid=1213121212,在服务器 接收程序中以这个跟踪值保存到数据库中,同时也可以限制单个跟踪值下总上传文件数或者总文件大小,否则就是一个可以上传无限个文件的漏洞了3,最终当前表 单提交时,再根据编辑器提交的HTML内容和数据库中上传内容进行比较,删除所有没有使用的上传文件4,定期由服务器脚本删除上传数据库中没提交的文件记 录,这样就能防止别人将您的网站作为免费相册空间了
    plugins:自定义按钮之插件扩展

    插件对象的属性解释:c:样式表名 称 t:插件名字(鼠标在按钮上方时显示) s:快捷方式 e:按钮点击后需要执行的代码特别说明:如果您希望样式表存储在系统自带的模板目录 ui.css中,请将插件对象的样式名留空,则会自动按照插件名来调用相应的样式,例如:xhEdtBtnCut、xhEdtBtnCopy,其中的 Cut和Copy是插件名具体调用方法请参考演示文件夹中的demo9
    JS接口说明
    JS接口示例代码:

    var editor=$('#elm1').xheditor(true,{tools:'full',skin:'default',internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://jb51.net/test.css',fullscreen:true,beforeSetSource:ubb2html,beforeGetSource:html2ubb,focus:focusAction,blur:blurAction})[0].xheditor;editor.focus();editor.setSource('str')sHtml=editor.getSource()editor.appendHTML('<p>aaa</p>')editor.pasteHTML('<p>aaa</p>')editor.pasteText('str')sHtml=editor.formatXHTML('<b>aaa</b>')editor.toggleSource()editor.togglePreview()editor.toggleFullscreen()editor.toggleReadonly()alert(editor.settings.upImgExt);editor.settings.upImgExt='txt,doc';
    focus:使编辑器获得焦点

    无参数
    setSource:设置编辑器源代码

    参数1:要设置的源代码内容,例:'<p>aaa</p>'
    getSource:返回编辑器格式后的源代码

    无参数
    appendHTML:粘贴HTML内容到编辑器结尾处

    参数1:要粘贴的HTML代码,例:'<p>uuu</p>'注:0.9.5版添加
    pasteHTML:粘贴HTML内容到编辑器当前光标处

    参数1:要粘贴的HTML代码,例:'<p>uuu</p>'
    pasteText:粘贴文本到编辑器当前光标处

    参数1:要粘贴的文本,例:'这里的内容完全原样显示<strong>aaa</strong>'
    formatXHTML:格式化XHTML代码

    参数1:需要格式化的HTML代码,例:'<b>aaa</b>',返回'<strong>aaa</strong>'
    toggleSource:在源代码模式和编辑模式之间切换

    参数1:空(切换),true(显示源代码模式),false(显示编辑模式)
    togglePreview:在预览模式和编辑模式之间切换

    参数1:空(切换),true(显示预览模式),false(显示编辑模式)
    toggleFullscreen:在全屏模式和标准大小之间切换

    参数1:空(切换),true(显示全屏模式),false(显示标准模式)
    toggleReadonly:在只读模式和可编辑模式之间切换

    参数1:空(切换),true(切换为只读模式),false(切换为可编辑模式)
    settings:获取或者修改编辑器内部参数

    internalScript: 是否清除内部代码inlineScript:是否清除内联代码internalStyle:是否清除内部样式inlineStyle:是否清除内联样式 forcePtag:强制使用P标签keepValue:保持属性值upLinkUrl:超链接上传接口地址upLinkExt:超链接本地上传扩展限制 upImgUrl:图片上传接口地址upImgExt:图片本地上传扩展限制upFlashUrl:动画上传接口地址upFlashExt:动画本地上传 扩展限制upMediaUrl:视频上传接口地址upMediaExt:视频本地上传扩展限制beforeSetSource:在设置源代码到编辑器前调 用此函数beforeGetSource:从编辑器返回源代码前调用此函数focus:编辑器获得焦点时回调此函数blur:编辑器失去焦点时回调此函数 注:修改有效变量仅限以上,其它的变量都仅在编辑器初始化时使用
    编辑器初始化回调函数列表:

    beforeSetSource和beforeGetSource是编辑器回调函数,分别在设置源代码和取回源代码之前调用,详细使用方法可参考UBB代码演示页面focus和blur是编辑器聚焦和失去焦点时的回调函数

     

    展开全文
  • xheditor可视化富文本编辑器

    千次阅读 2019-01-22 11:27:53
    简洁易用的基于jQuery的富文本编辑器xheditor从CSDN上已经改版退出了,新版的Markdown编辑器将原版的编辑文章相关SEO的设置也设为自动获取了,总的感觉现在的编辑器没有原来那么方便了。本文来自...

    简洁易用的基于jQuery的富文本编辑器xheditor从CSDN上已经改版退出了,新版的Markdown编辑器将原版的编辑文章相关SEO的设置也设为自动获取了,总的感觉现在的编辑器没有原来那么方便了。本文来自http://xheditor.com/,纪念在CSDN上用过感觉最好的富文本编辑器。最新版本下载地址

    xheditor 富文本编辑器
    xheditor 富文本编辑器

    1. xhEditor入门基础

    1.1. 在线可视化HTML编辑器概述

    1.2. 获取xhEditor

    1.3. xhEditor运行环境

    1.4. xhEditor基本使用指南

     

    1.1. 在线可视化HTML编辑器概述

    在Web程序应用中,最常见的一种行为是信息和言论的发布和交流。而在信息发布的同时,往往会有对信息发布的格式、类型和功能上的需求,比如:加粗、下划线等等,以使文字信息能够更形象更美观的传达给阅读者,同时也提高信息发布的工作效率。在这个需求的背景下,HTML在线编辑器就应运而生了。

    顾名思义,在线HTML编辑器就是在线编辑HTML代码的工具,它经常被应用于留言板留言、论坛发贴、Blog编写日志或等需要用户输入HTML的地方,是Web应用的常用模块之一。在线HTML编辑器可以实现对编辑内容添加各种丰富多彩的文字效果,以及提供各种方便快捷的操作功能,最大的提高编辑工作效率。在线HTML编辑器是任何网站不可或缺的重要功能组件,是互联网用户得心应手的驰骋网络的有力工具。

     

    1.2. 获取xhEditor

    您可以访问xhEditor官方网站下载最新版本的xhEditor编辑器,xhEditor官方网站地址为:http://xheditor.com/,打开右上角的免费下载 | 参数向导链接,即可找到最新版本的下载地址。

    xhEditor无需任何安装,无需任何设置,直接解压缩并拷贝到你的网站相应文件夹下面即可直接调用。

     

    1.3. xhEditor运行环境

    xhEditor是基于浏览器的HTML、CSS和Javascript环境开发的,因此原则上市场上绝大部分浏览器我们都能完美的运行,目前已测试的浏览器兼容列表如下:IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+ (+号代表往后所有新版本)。xhEditor是完全基于浏览器环境的,因此不存在操作系统选择性,是完全跨平台的。xhEditor同时也可以应用在任何的服务端语言环境下,例如:PHP、ASP、ASP.NET、JAVA等,可以在您的CMS、博客、论坛、商城等互联网平台上完美的嵌入运行,能够非常灵活简单的和您的系统实现完美的无缝衔接。

     

    1.4. xhEditor基本使用指南

    您只需按照以下简单步骤即可学会使用xhEditor:

    1. 下载最新版本xhEditor:http://xheditor.com/download.html
    2. 将下载的压缩文件解压缩,上传其中的xheditor.min.js以及xheditor_lang、xheditor_emot、xheditor_plugins和xheditor_skin四个文件夹到网站相应文件夹中。
      注:如果您网站中没有使用jQuery框架,也请一并上传jquery文件夹中的jquery-1.4.4.min.js
    3. 在需要调用xhEditor编辑器的网页head标签结束之前添加以下代码:
      <script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
      <script type="text/javascript" src="/js/xheditor.min.js"></script>
      <script type="text/javascript" src="/js/xheditor_lang/zh-cn.js"></script>
      注:jQuery和xhEditor的js文件路径请根据你网站具体路径情况相应修改
    4. 在需要实现可视化的文本框textarea属性中添加:
       class="xheditor"
      例如:<textarea name="content" class="xheditor">test</textarea>

    经过以上步骤,你就已经成功的将xhEditor编辑器安装在你的网页中。若需要学习更多xhEditor编辑器的使用技术,请参阅:xhEditor进阶使用

    2. xhEditor进阶使用

    2.1. 进阶使用指导

    2.2. 初始化参数列表

    2.3. API函数接口列表

    2.4. 上传程序开发规范

    2.5. 插件开发指南

    2.6. 皮肤设计指南

    2.7. 关于二次开发

     

    2.1. 进阶使用指导

    阅读本章节请先阅读:xhEditor入门基础,若你已经熟悉xhEditor的基本使用,请往下继续。

    xhEditor提供两种方式初始化编辑器:

    • 方法1:利用class属性来初始化和传递各种初始化参数,例:
       class="xheditor {skin:'default'}"
    • 方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例:
      $('#elm1').xheditor();
      或者
      $('#elm1').xheditor({tools:'mini'});

    特别说明:两种初始化方法只能选择其中一种使用,如果两种方法的代码同时存在页面中,方法2的代码不会有任何效果。

    我们更倾向于推荐大家使用方法1,因为更简单易用,不涉及任何的Javascript代码。通过简单的参数设置即可定制各种效果的编辑器界面,简单易用且功能强大。

    如果想实现更加复杂的交互应用,或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问,那么你可以选择使用方法2,相对具有更大的自由空间。

    xhEditor也提供了即时的卸载编辑器方法:

    $('#elm1').xheditor(false);

     

    2.2. 初始化参数列表

    初始化参数示例代码:

    $('#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新添加

     

    2.3. API函数接口列表

    API接口示例代码:

    var editor=$('#elm1').xheditor({tools:'full',skin:'default'});
    editor.focus();
    editor.setSource('str')
    sHtml=editor.getSource()
    editor.appendHTML('<p>aaa</p>')
    editor.pasteHTML('<p>aaa</p>')
    editor.pasteText('str')
    sHtml=editor.formatXHTML('<b>aaa</b>')
    editor.toggleSource()
    editor.toggleFullscreen()
    alert(editor.settings.upImgExt);
    editor.settings.upImgExt='txt,doc';

    API接口列表:

    1. focus:使编辑器获得焦点

      无参数
    2. setSource:设置编辑器源代码

      参数1:要设置的源代码内容,例:'<p>aaa</p>'
    3. getSource:返回编辑器格式后的源代码

      无参数
    4. appendHTML:粘贴HTML内容到编辑器结尾处

      参数1:要粘贴的HTML代码,例:'<p>uuu</p>'
      注:0.9.5版添加
    5. getSelect:返回当前选中的内容

      参数1:返回格式,可选'text'返回文本格式,其它所有值都返回HTML格式
    6. pasteHTML:粘贴HTML内容到编辑器当前光标处

      参数1:要粘贴的HTML代码,例:'<p>uuu</p>'
      参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后)
    7. pasteText:粘贴文本到编辑器当前光标处

      参数1:要粘贴的文本,例:'这里的内容完全原样显示<strong>aaa</strong>'
      参数2:是否覆盖粘贴,留空(覆盖粘贴)、true(粘贴在光标选择区域之前)、false(粘贴在光标选择区域之后)
    8. formatXHTML:格式化XHTML代码

      参数1:需要格式化的HTML代码,例:'<b>aaa</b>',返回'<strong>aaa</strong>'
      参数2:是否代码缩进换行,true(执行缩进格式化),false(不执行缩进格式化),默认为false
    9. toggleSource:在源代码模式和编辑模式之间切换

      参数1:空(切换),true(显示源代码模式),false(显示编辑模式)
    10. toggleFullscreen:在全屏模式和标准大小之间切换

      参数1:空(切换),true(显示全屏模式),false(显示标准模式)
    11. toggleShowBlocktag:切换块标签显示状态

      参数1:空(切换),true(切换为显示块标签),false(切换为不显示块标签)
    12. addShortcuts:添加快捷键

      参数1:快捷键值,例:'ctrl+enter'
      参数2:用户按下快捷键后需要响应的程序代码,例:function(){$('#frmTest').submit();}
      说明:允许为某个相同快捷键值重复添加多个响应代码
      备注:1.0.0 beta2新添加
    13. delShortcuts:删除快捷键

      参数1:快捷键值,例:'ctrl+enter'
      
      备注:1.0.0 Final新添加
    14. exec:立即执行按钮及插件

      参数1:工具按钮名称(不区分大小写),例:Link、img
      说明:此函数可以在插件内部或者外部Javascript代码中进行调用
    15. showModal:显示模式窗口

      参数1:模式窗口的标题title
      参数2:模式窗口的内容content
      参数3:模式窗口的宽度w
      参数4:模式窗口的高度h
      参数5:模式窗口关闭时的回调函数onRemove
    16. showIframeModal:显示iframe式的模式窗口

      参数1:模式窗口的标题
      参数2:iframe的地址ifmurl,可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}xheditor_plugins/test.html
      参数3:提供给目标iframe页面回调用的回调函数,可以在iframe页面中以这样的形式调用:callback('1.gif');
      参数4:模式窗口的宽度w
      参数5:模式窗口的高度h
      参数6:模式窗口关闭时的回调函数onRemove
    17. settings:获取或者修改编辑器内部参数

      internalScript:是否清除内部代码
      inlineScript:是否清除内联代码
      internalStyle:是否清除内部样式
      inlineStyle:是否清除内联样式
      forcePtag:强制使用P标签
      upLinkUrl:超链接上传接口地址
      upLinkExt:超链接本地上传扩展限制
      upImgUrl:图片上传接口地址
      upImgExt:图片本地上传扩展限制
      upFlashUrl:动画上传接口地址
      upFlashExt:动画本地上传扩展限制
      upMediaUrl:视频上传接口地址
      upMediaExt:视频本地上传扩展限制
      beforeSetSource:在设置源代码到编辑器前调用此函数
      beforeGetSource:从编辑器返回源代码前调用此函数
      focus:编辑器获得焦点时回调此函数
      blur:编辑器失去焦点时回调此函数
      
      注:修改有效变量仅限以上,其它的变量都仅在编辑器初始化时使用

     

    2.4. 上传程序开发规范

     

    上传接收程序开发必读:

    • 上传程序分标准HTML4上传和HTML5上传两种情况处理:
      1, HTML4上传使用标准的表单上传域,上传文件域的name为:filedata
      2, HTML5上传的整个POST数据流就是上传的文件完整数据,而本地文件名等信息储存于HTTP_CONTENT_DISPOSITION这个服务器变量中
    • 返回内容必需是标准的json字符串,结构可以是如下:{"err":"","msg":"200906030521128703.gif"} 或者 {"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}} 注:若选择结构2,则url变量是必有

    需了解更多细节,请参考发行包中的demos文件夹。其中upload.php、upload.asp、upload.aspx仅为演示参考代码,若您使用的是其它的服务器脚本语言,请自行对初始化参数中的upLinkUrl、upImgUrl、upFlashUrl和upMediaUrl进行修改,并开发相应服务器上传接收程序。若您希望在自己的项目中实际使用,请自行修改代码或者重新开发,开发过程中请注意上传文件的格式及大小限制,注意服务器脚本安全问题。

     

    上传文件管理建议方案:

    • 在编辑器初始化时在upload.php后面跟上一个服务器生成的绝对唯一的跟踪值,例如:upload.php?infoid=123
    • 在服务器接收程序中以这个跟踪值保存到数据库中,同时也可以限制单个跟踪值下总上传文件数或者总文件大小,否则就是一个可以上传无限个文件的漏洞了
    • 最终当前表单提交时,再根据编辑器提交的HTML内容和数据库中上传内容进行比较,删除所有没有使用的上传文件
    • 定期由服务器脚本删除上传数据库中没提交的文件记录,这样就能防止别人将你的网站作为免费相册空间了

     

    2.5. 插件开发指南

    标准插件开发流程:

    1. 设计插件图标并在页面中定义好CSS
    2. 定义插件参数并写入初始化参数plugins
    3. 编写插件调用时要执行的代码

    下面我们就demo09中的一个最简单插件作介绍:

    <style type="text/css">
    .testClassName {
            background:transparent url(img/plugin.gif) no-repeat 20px 20px;
            background-position:3px 3px;
    }
    </style>
    test7:{c:'testClassName',t:'测试7:showIframeModal (Ctrl+7)',s:'ctrl+7',i:function(editor){
        editor.setSource('test');
    },e:function(){
        var _this=this;
        _this.saveBookmark();
        _this.showIframeModal('测试showIframeModal接口','uploadgui.html',function(v){
            _this.loadBookmark();
            _this.pasteText('返回值:\r\n'+v);
        },500,300);
    }}

    这个插件实现的功能是打开一个iframe,并将iframe返回的参数字符串插入到当前编辑器光标处。

    • 其中test7为插件的name,用来在tools初始化参数中调用
    • c:'testClassName'为插件的样式名称
    • t:'测试7:showIframeModal (Ctrl+7)'是鼠标放在按钮上显示的提示文字
    • s:'ctrl+7'是定义插件的快捷方式,在编辑器区域里按设置的快捷方式就会执行此插件事件;
    • i:function(){}为插件初始化函数,编辑器初始化完成后会调用此函数
    • e:function(){}为插件点击后要执行的代码

    特别说明:

    1. 插件执行函数中可以用this.的方式调用2.3.章节中所有的API接口函数。如果使用回调函数,请将this变量保存在临时变量中,例如_this;
    2. 在某些浏览器下,打开会转移焦点的操作界面,会导致编辑区域焦点丢失。例如:showIframeModal,在showIframeModal之前要先执行saveBookmark保存焦点,再在回调函数中执行loadBookmark函数恢复焦点,之后才能调用pasteHTML等函数;
    3. 如果希望样式表存储在系统自带的模板目录ui.css中,请将插件对象样式名留空,则会自动按照插件名来调用相应的样式,例如:xhEdtBtnCut、xhEdtBtnCopy,其中的Cut和Copy是插件名;

    2.6. 皮肤设计指南

    xhEditor的皮肤保存在xheditor_skin文件夹中,每个皮肤一个子文件夹,文件夹结构如下:

    xheditor_skin
      └─default
          ├─ui.css
          ├─iframe.css
          └─img
              ├─icons.gif
              ├─...
              └─loading.gif
    • 编辑器按钮、面板、模式窗口等样式全部统一存储在ui.css文件中
    • 编辑区域的样式存储在iframe.css文件中
    • 编辑器内核用到的图片及css文件中用到的所有图片统一存储在img文件夹中

    ui.css文件简单解析

    xheLayout:编辑器table样式;xheTool:工具按钮所在区域的样式;xheButton:按钮样式;xhePanel:操作面板的样式;xheMenu:菜单样式;xheEmot:表情样式;xheColor:颜色选择器的样式;xheDialog:面板上的对话框样式;xheModal:模式窗口样式;

    xhEditor皮肤结构相对非常简单,有一定的HTML和CSS设计基础即可完成设计工作。

    展开全文
  • xhEditor入门基础

    千次阅读 多人点赞 2014-08-12 09:10:26
     (官网无法下载,CSDN提供下载:xxx)二、将下载的压缩文件解压缩,上传其中的xheditor.min.js以及xheditor_lang、xheditor_emot、xheditor_plugins和xheditor_skin 四个文件夹到网站相应文件夹中。 注:如果您没有
  • xheditor-1.1.14

    2020-07-29 14:20:57
    2. xhEditor进阶使用 2.1. 进阶使用指导 2.2. 初始化参数列表 2.3. API函数接口列表 2.4. 上传程序开发规范 2.5. 插件开发指南 2.6. 皮肤设计指南 2.7. 关于二次开发 2.1. 进阶使用指导 阅读本章节请先阅读:...
  • 开源HTML编辑器xhEditor用法详解

    千次阅读 2018-06-26 09:29:54
    在本月的MIS开发任务中,有一项是完善帮助信息的开发...不支持,所以我只能从网上找到能够代替的,在浏览当中我觉得xhEditor不错,它是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器,而且兼容很多浏...
  • xheditor使用

    千次阅读 2018-07-26 10:16:26
    xheditor  xheditor是一个基于JQuery开发的简单迷你并且高效的可视化XHTML编辑器 1、下载xheditor 下载地址:https://pan.baidu.com/s/1-MwXR_L00lOtD7523FDetA 密码:f1mu 2、下载后解压,将整个文件放入站点...
  • xheditor HTML编辑器简单使用

    千次阅读 2009-10-25 15:50:00
    下载xhEditor最新版本。下载地址:http://code.google.com/p/xheditor/downloads/list2. 解压zip文件,将其中的xheditor.js以及xheditor_emot和xheditor_skin两个文件夹上传到网站相应目录3. 在相应html文件的head...
  • 修改xheditor表情图片路径为绝对路径

    万次阅读 2015-04-19 15:38:41
     对于xheditor,它的表情图片路径为webroot的路径,而不是绝对路径。这导致一个问题。当编辑表情的页面与查看的页面不再同一级文件夹下时,会出现表情图片找不到的问题。对此。修改js。  找到js中的“getLocalUrl...
  • xheditor在线编辑器的使用

    千次阅读 2012-04-28 14:10:51
    在网上看了很多的资料,终于知道xheditor 怎么使用,现将我的总结如下: 在你所需要在线编辑器的工程目录下,导入xheditor_emot、xheditor_plugins和xheditor_skin、jquery四个文件夹,然后在textarea标签中...
  • xheditor编辑器很好用,但是图片上传几个
  • 关于使用xheditor实现图片上传

    千次阅读 2016-05-17 10:18:11
    最近做项目用了xheditor这个在线编辑器,其他功能还好,需要用到图片上传功能的时候,按照文档和网上一些配置 $('#elm1').xheditor({ upImgUrl:"upload.php", upImgExt:"jpg,jpeg,gif,png" }); 上传接收程序...
  • xheditor用法

    千次阅读 2011-06-01 21:14:00
    等很多现成的工具,但是为了相对的轻量级设计,选择了xhEditor 。苦于网上很难找到相关的基于Java 的后台实现,故花了点时间做了个编辑器的小demo ,主要是解决图片上传的问题。 以下是对xhEditor 使用的...
  • jsp中如何设置使用xheditor

    千次阅读 2013-01-13 17:17:38
    首先下载xheditor-1.1.13.zip包 在这个链接可下载到 http://download.csdn.net/detail/yy19900811/4990637 解压该包获得xheditor-1.1.13文件夹 将xheditor-1.1.13文件夹下的xheditor_emot、xheditor_...
  • 基于jquery的在线编辑器XHEditor

    千次阅读 2009-09-01 19:06:00
    下载xhEditor最新版本。 下载地址:http://code.google.com/p/xheditor/downloads/list2. 解压zip文件,将其中的xheditor.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹上传到网站相应目录3. ...
  • csdn上的blog 编辑器-xhEditor编辑器

    千次阅读 2011-07-20 19:35:17
    csdn上的blog 编辑器-xhEditor编辑器
  • xheditor html编辑器非标准submit提交

    千次阅读 2012-06-04 10:48:30
    默认设置时非标准submit提交时无法同步编辑... class="xheditor {submitID:'save'}" Javascript初始化 $('#elem1').xheditor({submitID:'save'});   使用方法 1. 下载xhEditor最新版本。  下载地址:http://xh
  • xheditor是一个很实用的编辑器,不过有时却会出现wuf
  • xheditor编辑器的使用

    千次阅读 2014-09-10 20:36:38
    1、将xheditor加入到项目中 2、引入xheditor编辑器的js库 3、html页面(将xheditor加载在textarea上) 4、js中初始化xheditor //初始化编辑器 var Sys = {}; if(navigator.userAgent.indexOf...
1 2 3 4 5 ... 20
收藏数 1,360
精华内容 544
关键字:

xhEditor