XHEditor编辑器使用文档

时间：2026-07-22

xhEditor 富文本编辑器：从部署到深度定制

在 Web 开发中，处理富文本编辑一直是个痛点。特别是当需要同时兼容 Firefox 和 IE 时，传统的 document.getElementById 方法往往捉襟见肘——它只能拿到单个对象，遇到 CheckBox 数组就无能为力了。而 xhEditor 的出现，恰好解决了这个困扰。

这里先给出几个核心判断：xhEditor 轻量、配置灵活，尤其适合需要自定义工具栏和上传功能的中小型项目。下面从部署到进阶定制，一步步拆解。

部署与快速上手

首先，下载最新版本。解压后，将核心文件 xheditor.js 以及 xheditor_emot 和 xheditor_skin 两个文件夹上传到网站相应目录。然后在页面的标签结束之前，引入脚本：

两种调用方式

方法一：直接在 </code> 上添加 <code>class="xheditor"</code> 属性。如果想用迷你或简单工具栏，分别设置为 <code>xheditor-mini</code> 和 <code>xheditor-simple</code> 即可。</p> <p>方法二：在页面初始化 JS 代码中调用：</p> <pre class="brush:php;toolbar:false"><code>$('#elm1').xheditor(true); // 初始化编辑器 $('#elm1').xheditor(false); // 隐藏编辑器</code></pre> <h2>初始化参数详解</h2> <p>一个典型的初始化示例长这样：</p> <pre class="brush:php;toolbar:false"><code>$('#elm1').xheditor(true, { tools: 'full', skin: 'default', showBlocktag: true, readonly: false, internalScript: false, internalStyle: false, width: 300, height: 200, loadCSS: 'http://您的域名/test.css', fullscreen: true, sourceMode: true, forcePtag: true, upImgUrl: "upload.php", upImgExt: "jpg,jpeg,gif,png", keepValue: true, plugins: {} });</code></pre> <p>这么多参数，其实核心就几类：</p> <h3>工具栏与皮肤</h3> <p><strong>tools</strong>：控制工具栏按钮组合。支持 <code>full</code>（完整）、<code>simple</code>（简单）、<code>mini</code>（迷你），也可以自定义字符串，比如只保留剪切、复制、粘贴等基础功能。按钮表从 <code>Cut</code>、<code>Copy</code> 到 <code>About</code>，覆盖了日常编辑的所有需求。</p> <p><strong>skin</strong>：三种皮肤可选——<code>default</code>（默认）、<code>o2007blue</code>（Office 2007 蓝色）、<code>o2007silver</code>（Office 2007 银色）。</p> <h3>显示与模式控制</h3> <p><strong>showBlocktag</strong>：是否显示段落标签，默认 <code>true</code>。</p> <p><strong>sourceMode</strong>：是否默认进入源代码模式，<code>true</code> 为源代码模式，<code>false</code> 为编辑模式。</p> <p><strong>fullscreen</strong>：是否默认全屏显示。</p> <p><strong>readonly</strong>：是否默认只读，适合展示已发布内容。</p> <p><strong>forcePtag</strong>：是否强制使用 <code><p></code> 标签。强烈建议开启，否则换行可能产生 <code><br></code> 标签，后续样式处理会很麻烦。</p> <h3>脚本与样式保留策略</h3> <p><strong>internalScript/internalStyle</strong>：是否保留内部 JS 和样式。出于安全考虑，一般建议设为 <code>false</code>，防止用户注入恶意代码。</p> <p><strong>inlineScript/inlineStyle</strong>：是否保留内联 JS 和样式。同样，建议关闭。</p> <h3>上传功能配置</h3> <p>上传是编辑器的核心能力之一。xhEditor 支持四种类型的文件上传：链接、图片、Flash 和视频。每个类型都有对应的上传接收 URL 和扩展名限制：</p> <ul> <li><strong>upLinkUrl/upLinkExt</strong>：超链接文件上传，默认扩展名 <code>zip,rar,txt</code></li> <li><strong>upImgUrl/upImgExt</strong>：图片上传，默认扩展名 <code>jpg,jpeg,gif,png</code></li> <li><strong>upFlashUrl/upFlashExt</strong>：Flash 动画上传，默认扩展名 <code>swf</code></li> <li><strong>upMediaUrl/upMediaExt</strong>：视频文件上传，默认扩展名 <code>a vi</code></li> </ul> <p>所有上传接口的接收程序都必须返回 JSON 格式：</p> <pre class="brush:php;toolbar:false"><code>{"err":"","msg":"200906030521128703.gif"}</code></pre> <p>如果上传出错，将错误信息放在 <code>err</code> 字段中，编辑器会自动弹出提示。上传文件域的名字固定为 <code>upload</code>。</p> <h3>其他实用参数</h3> <p><strong>keepValue</strong>：自动保存 <code>src</code> 和 <code>href</code> 属性值。在 IE 等浏览器下，插入的图片和链接地址会被自动转为绝对地址，比如输入 <code>a.gif</code> 可能变成 <code>http://test.com/a.gif</code>。开启此选项可以避免这种情况。</p> <p><strong>loadCSS</strong>：加载外部样式表，用于控制编辑器内的显示效果。</p> <p><strong>modalWidth/modalHeight/modalTitle</strong>：控制弹出窗口的宽度、高度和是否显示标题栏。</p> <h2>JS 接口：灵活操控编辑器</h2> <p>初始化后，编辑器对象暴露了一系列 JS 接口，方便在代码中动态操控：</p> <pre class="brush:php;toolbar:false"><code>var editor = $('#elm1').xheditor(true, options)[0].xheditor; editor.focus(); // 获得焦点 editor.setSource('<p>aaa</p>'); // 设置源代码 var sHtml = editor.getSource(); // 获取格式化后的源代码 editor.appendHTML('<p>uuu</p>'); // 追加内容到末尾 editor.pasteHTML('<p>uuu</p>'); // 在光标处粘贴 HTML editor.pasteText('str'); // 粘贴纯文本 editor.formatXHTML('<b>aaa</b>'); // 格式化 XHTML，返回 <strong>aaa</strong> editor.toggleSource(); // 切换源代码/编辑模式 editor.togglePreview(); // 切换预览模式 editor.toggleFullscreen(); // 切换全屏 editor.toggleReadonly(); // 切换只读/可编辑</code></pre> <p>注意 <code>settings</code> 对象可以动态修改部分参数，比如改变上传扩展名：</p> <pre class="brush:php;toolbar:false"><code>editor.settings.upImgExt = 'txt,doc';</code></pre> <h2>插件扩展与回调函数</h2> <p>xhEditor 支持自定义按钮插件。插件对象包含四个属性：<code>c</code>（样式名称）、<code>t</code>（按钮提示文字）、<code>s</code>（快捷键）、<code>e</code>（点击后执行的代码）。如果样式名留空，系统会自动按插件名调用默认样式。</p> <p>编辑器还提供了四个回调函数：</p> <ul> <li><strong>beforeSetSource</strong>：在设置源代码到编辑器之前调用</li> <li><strong>beforeGetSource</strong>：在从编辑器获取源代码之前调用</li> <li><strong>focus</strong>：编辑器获得焦点时触发</li> <li><strong>blur</strong>：编辑器失去焦点时触发</li> </ul> <p>这些回调函数是实现 UBB 代码转换、实时内容校验等高级功能的关键入口。</p> <h2>上传管理方案建议</h2> <p>最后，谈谈上传的安全性。很多项目只关注前端功能，忽略了后端管理。这里给几个建议：</p> <ul> <li>在初始化时，给上传 URL 拼接一个唯一跟踪值（如 <code>upload.php?infoid=1213121212</code>），服务端据此限制单个跟踪值的上传文件总数或总大小，防止无限上传漏洞。</li> <li>表单提交时，对比编辑器提交的 HTML 内容与数据库中上传记录，删除未使用的文件。</li> <li>定期运行<a href="https://www.fastadmin.net/go/aliyun" target="_blank">服务器</a>脚本，清理未提交的文件记录。</li> </ul> <p>做到这三点，基本上就能避免被当成免费图床了。</p> <p>话说回来，xhEditor 虽然轻量，但功能密度很高。从基础部署到深度定制，每一步都有清晰的参数控制。掌握这些，应付大多数富文本编辑场景已经绰绰有余。</p> </div> <div class="laiyuan"> 本文转载于：https://www.jb51.net/article/25815.htm 如有侵犯，请联系zhengruancom@outlook.com删除。<br/>免责声明：正软商城发布此文仅为传递信息，不代表正软商城认同其观点或证实其描述。 </div> <div class="legal_box2"> <div class="legal_title"> <h2>同类商品 <em></em></h2> <div class="clear"></div> </div> <ul class="shapo_list"> <li> <a href="https://m.zhengruan.com/news/soft69"> <div class="img_box"> <img src="https://m.zhengruan.com/uploads/20200428/cd14258f0172a172f8a80798c38c1577.jpg" alt="DAEMON Tools Lite 10"> </div> <h2> DAEMON Tools Lite 10 </h2> <p> <em>￥</em>0.00 <del>￥0.00 </del> </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/soft67"> <div class="img_box"> <img src="https://m.zhengruan.com/uploads/20200428/fbf473d4d30833324962e441c0f18265.jpg" alt="DAEMON Tools Ultra 5"> </div> <h2> DAEMON Tools Ultra 5 </h2> <p> <em>￥</em>0.00 <del>￥0.00 </del> </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/soft68"> <div class="img_box"> <img src="https://m.zhengruan.com/uploads/20200428/1ae250399abf4ff584d86d52c79b5bb6.jpg" alt="DAEMON Tools Pro 8"> </div> <h2> DAEMON Tools Pro 8 </h2> <p> <em>￥</em>0.00 <del>￥0.00 </del> </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/soft29"> <div class="img_box"> <img src="https://m.zhengruan.com/uploads/20200428/77d3c04866e1b842d9b6ff0e9368bdf8.jpg" alt="CorelDRAW X8 简体中文"> </div> <h2> CorelDRAW X8 简体中文 </h2> <p> <em>￥</em>0.00 <del>￥0.00 </del> </p> </a> </li> <div class="clear"></div> </ul> </div> <div class="legal_box2"> <div class="legal_title"> <h2>相关文章 <em></em></h2> <a href="https://m.zhengruan.com/newslist/313_1"> 更多 <em class="icon"></em></a> <div class="clear"></div> </div> <ul class="gal_article_list"> <li> <a href="https://m.zhengruan.com/news/767961"> <em class="icon"></em> <p> python 且：概念解析、环境配置与实操验证指南 </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/767960"> <em class="icon"></em> <p> python 雷达图开发环境搭建与验证：后端开发者实操指南 </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/767959"> <em class="icon"></em> <p> 如何卸载python：环境隔离、依赖清理与验证流程的避坑指南 </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/767958"> <em class="icon"></em> <p> python安装步骤：从环境检查到虚拟环境隔离的故障排查指南 </p> </a> </li> <li> <a href="https://m.zhengruan.com/news/767957"> <em class="icon"></em> <p> python设置环境变量：从原理到实操的完整验证流程 </p> </a> </li> </ul> </div> </main> <footer> <div class="main_foot"> <a href="https://m.zhengruan.com" class="foot_logo"><img src="https://m.zhengruan.com/statics/mob/zrimages/logo_b.png" alt="正软"></a> <p>联系方式: bd@zhengruan.com<br>网站备案号：苏ICP备2026018738号-1</p> <ul> <li class="one"><a href="https://m.zhengruan.com" class="cBlack"><b class="i_index"></b>首页</a></li> <li><a href="http://www.zhengruan.com" class="cBlack"><b class="i_pc"></b>电脑端</a></li> <li><span class="return_top"><b class="i_top"></b>顶部</span></li> </ul> </div> </footer> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3835539565b311d85319cd21da8fd0d9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '36']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script>  </body> <script> function countView(){ $.ajax({ type: "post", url: "/countView?&time="+new Date().getTime(), data:{'type':'news','id':"714846"}, async:false, dataType: "json", success: function(result){ console.log(result) }, error:function(){ } }); } $(function(){ countView(); }) </script> </html>