yaniswang / xheditor Goto Github PK

View Code? Open in Web Editor NEW

242.0 27.0 80.0 2 MB

xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器。

Home Page: http://xheditor.com/

License: GNU Lesser General Public License v3.0

HTML 12.29% PHP 31.81% JavaScript 44.71% CSS 6.41% ASP 4.78%

xheditor's Introduction

xhEditor

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

xhEditor完全基于Javascript开发，您可以应用在任何的服务端语言环境下，例如：PHP、ASP、ASP.NET、JAVA等。

xhEditor可以在您的CMS、博客、论坛、商城等互联网平台上完美的嵌入运行，能够非常灵活简单的和您的系统实现完美的无缝衔接。

自2009年4月首个版本发布以来，凭借我们人性化的用户体验和不断持续完善的态度，越来越多的网站选择了使用xhEditor。

我们不是最好的，但是我们会努力做的更好，我们愿意倾听和接受所有用户的心声，长期坚持的开发和完善下去。

主要特点：

精简迷你：初始加载4个文件，包括：1个js(50k)+2个css(10k)+1个图片(5k)，总共65k。若js和css文件进行gzip压缩传输，可以进一步缩减为24k左右。
使用简单：简单的调用方式，加一个class属性就能将您的textarea立马变成一个功能丰富的可视化编辑器。
无障碍访问：提供WAI-ARIA全面支持，全键盘精细操作，全程语音向导，提供完美无障碍访问体验，让残疾人也能够谱写精彩人生。
内置Ajax上传：内置强大的Ajax上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，剪切板上传及远程抓取上传，追求完美的用户上传体验。
Word自动清理：实现Word代码自动检测并清理，提供高效完美的Word代码过滤方案，生成代码最优化精简，但是却不丢失任何细节效果。
UBB可视化编辑：提供完美的UBB可视化编辑解决方案，在您获得安全高效代码存储的同时，又能享受可视化编辑的便捷。

兼容以下浏览器：

IE6, IE7, IE8, IE9
Firefox 3.0 +
Chrome 1.0 +
Opera 9.6 +
Safari 3.22 +

许可协议：

xhEditor默认基于LGPL开源许可协议发布，您只需遵守LGPL开源协议，即可永久免费使用xhEditor编辑器。以下为LGPL开源许可概要：

如果您不对源代码进行任何修改，直接调用组件，可以以任意方式自由使用：开源、非开源、商业及非商业；
如果您对源代码进行任何的修改或者衍生，涉及修改部分的额外代码和衍生的代码都必须采用LGPL协议开放源代码；
无论您对源代码的修改程度如何，版权都归xhEditor开发团队所有，我们保留所有权利；
无论您对源代码如何修改，都必需在明显和恰当地位置宣告版权声明 ( 请将版权信息留于关于按钮中 )；

使用方法：

下载xhEditor最新版本。

下载地址：http://xheditor.com/download.html
解压并上传

解压压缩文件，将其中的xheditor.min.js以及xheditor_lang、xheditor_emot、xheditor_plugins和xheditor_skin四个文件夹上传到网站相应目录

注：如果您网站中没有使用jQuery框架，也请一并上传jquery文件夹中的jquery-1.4.4.min.js

引用JS代码

在相应html文件的之前添加

 <script type="text/javascript" src="http://static.xxx.com/js/jquery.js"></script>
 <script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>
 <script type="text/javascript" src="http://static.xxx.com/js/xheditor_lang/zh-cn.js"></script>

注：如果jQuery之前已经在项目页面中使用，请勿重复添加引用代码

初始化编辑器

方法1：在textarea上添加属性： class="xheditor"
```
 <textarea name="content" class="xheditor">test</textarea>
```
方法2：在您的页面初始JS代码里加上： $('#elm1').xheditor();
```
 $({
     $('#elm1').xheditor()；
 });
```
相应的卸载编辑器的代码为
```
 $('#elm1').xheditor(false)；
```
重要说明：2种初始化方法只能选择其中一种，不能混合使用，优先级分别是：class初始化>JS初始化，如果页面中使用了class初始化模式，JS初始化代码就无效了

如何开发构建xhEditor：

安装nodejs：

http://nodejs.org/

获取代码：

git clone git://github.com/yaniswang/xhEditor.git

安装grunt：

npm install grunt-cli -g
cd xhEditor && npm install
grunt -version

开发调试

open wizard.html
edit src/**

构建并打包zip:

grunt

链接向导：

官方网站：http://xheditor.com/
软件下载：http://xheditor.com/download.html
技术手册：http://xheditor.com/manual.html
问题反馈：https://github.com/yaniswang/xhEditor/issues

xheditor's People

Contributors

Stargazers

Watchers

Forkers

lulj chekun dodgepudding jiangkaijian dospole thtinh haiganhongyi delver-net huqingliang changyuefeng qyqx ijumps luozhihua vvgr lovenets laoshu133 fhmob qingfoo sumzz cunguoyao sisihuisi feng2012 poplax p2pteam hechunwen cipchk tanjiancheng hyperbolaa admpub akfork jiangrongbo canmind home201448 xsls hxhlb shuter hetz lioaphy allenweb live0717 jimmygkr royalwang majunbao uwcong trueporwu easyhutu xlwt2113 tonyjiangwj wslx520 raymondlxl equalll houniao506 bigfacefang codecoke baudelee sts0mrg0 gyct coolguyun 835231559 jack-le laiyongqin guozhongdong xw328907 abnaliang aionliao qian2098 l2242121501 long001 andrew3399 190420456 haoyouduo666 maheshvelankar a54438a q87814349 secretwiki iq-scm

xheditor's Issues

如果初始化编辑器之前的textarea存在数据可能出现问题

用xhEditor初始化一个不为空的textarea，该textarea中存在<>等内容时，xhEditor会将这些内容转换为<>，导致本来希望在页面上显示的<>括号由于是HMTL的关键字原因而被隐藏。

用xheditor的源代码编辑两条公告放在一个页面上，这两条公告的css会出现相互污染过

iframe模式上传文件callback返回值解析错乱

返回字符串：
20120111/11/abc.pdf||项目总结.txt - 记事本.pdf

显示到编辑器：
项目总结.txt 点击打开链接点击打开链接

匹配空行正则的问题

今天在使用xhEditor的时，发现在提交的时候非常的缓慢。通过CPU性能排查，发现了主要是这一行的问题：

a = a.replace(/^\s*(?:<(p|div)(?:\s+[^>]*?)?>)?\s*(<span(?:\s+[^>]*?)?>\s*<\/span>|<br(?:\s+[^>]*?)?>|&nbsp;)*\s*(?:<\/\1>)?\s*$/i, "");

然后我的输入时是这个：

var a = "                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 故障原因：测绘一下啊<br>故障进展："

用node测试结果如下：

完整的是这个

var a = "                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 故障原因：测绘一下啊<br>故障进展："
a = a.replace(/^\s*(?:<(p|div)(?:\s+[^>]*?)?>)?\s*(<span(?:\s+[^>]*?)?>\s*<\/span>|<br(?:\s+[^>]*?)?>|&nbsp;)*\s*(?:<\/\1>)?\s*$/i, "");

这个需要优化一下吗？还是需要我尽量避免这样的输入？谢啦>_<
(PS:不是很理解为何这句正则会运行这么慢，不知道作者能否帮我解惑一下？)

ubb error

编辑文章开头同时使用字体颜色和背景颜色，ubb标签嵌套关系出错。

其他情况下复杂样式也会出错

让xhEdit支持AMD

不知为什么作者都没有维护了，好几个项目都用。

这里我用的requirejs，虽然支持非AMD格式的JS，但是xhEditor要让他支持还需要一点手术刀。

主要是原来根据是script[src*=xheditor]来判断editor的根目录，因为这里涉及到资源加载。但是如果按AMD的方式来加载肯定无法获取正确值。

以下是我做了修改部分，目前都正常使用功能。

$('script[src*=xheditor]').each(function(){
    var s=this.src;
    if(s.match(/xheditor[^\/]*\.js/i)){editorRoot=s.replace(/[\?#].*$/, '').replace(/(^|[\/\\])[^\/]*$/, '$1');return false;}
});
// editorRoot 编辑器根目录，为了支持AMD，尝试直接通过HTML中查找
if (!editorRoot) {
    editorRoot = $('.xheditor_config').first().attr('data-editorRoot');
}

页面需要加入

<textarea name="intro" id="intro" class="xheditor_config" data-editorroot="/r/libs/xheditor/"></textarea>

怎样才能保留html的中的<html>,<title>,<script> 内容。

在使用编辑器加载一个完整的 html 页面源码时，为何自动过滤的页面的 head，title，和包含的 script？

不支持高版本主要原因是$.browser

以下是我对源代码的修改，或许可以帮到你。

var agent=navigator.userAgent.toLowerCase(),
    browserMath = /(chrome)[ \/]([\w.]+)/.exec( agent ) ||
    /(webkit)[ \/]([\w.]+)/.exec( agent ) ||
    /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( agent ) ||
    /(msie) ([\w.]+)/.exec( agent ) ||
    agent.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( agent ) ||
    [],
    browser = {};
if ( browserMath ) {
    browser[ browserMath.browser ] = true;
    browser.version = browserMath.version;
}
// Chrome is Webkit, but Webkit is also Safari.
if ( browser.chrome ) {
    browser.webkit = true;
} else if ( browser.webkit ) {
    browser.safari = true;
}

var bMobile=/mobile/i.test(agent),
    browerVer=parseFloat(browser.version),
    isIE=browser.msie,
    isMozilla=browser.mozilla,
    isWebkit=browser.webkit,
    isOpera=browser.opera,
    isChrome=browser.chrome,
    bAir=agent.indexOf(' adobeair/')>-1;

大哥，能不能默认是html4的上传啊！！！

用这个富文本上传，一顿好搞，服务端之前的上传代码不能用。搞了半天原来是默认html5的上传。太搞了吧。建议默认html4的上传。

xhEditor demo12 : 远程抓图&剪切板图片粘贴上传

在你们官网演示这里，我复制本地或网上的图片，粘贴进去，会一直显示加载。。，根本无法实现远程抓图&剪切板图片粘贴上传，我用的是最新的火狐和chrome，都不行，希望能解决，很期待。

不能readonly

readonly和disabled都无效，建议增加api readonly(true|false)

xhEditor1.2.2在ie8上面发现一个bug

用ie8打开官网的演示地址，然后插入一个表情图片，会发现鼠标焦点无法聚焦到表情图片的后面，导致图片后面无法再输入文字，上传一张图片后，也是一样的效果，后面无法再输入文字，希望能修复一下这个bug，毕竟现在ie8使用的还是挺多的。

不支持jQuery 1.9

好像是取浏览器版本时出问题，可有替代方案？除了jQuery的那个降级插件外还有没有其它解决办法？

XSS vulnerability in source code view

The editor's source code view allows attacker to bypass the input validation in default view by injecting javascript using IFRAME element.

Proof of Concept:
Injected the the payload <IFRAME SRC="javascript:alert('XSS');"></IFRAME> into the editor's source code view.

上传回调函数的参数只有文件地址信息，扩展性太局限了。

老大你好：
非常喜欢xheditor，有个问题就是，目前上传回调函数的参数只有文件地址信息，扩展性太局限了。我改了个暂时使用一下（https://github.com/chekun/xheditor/blob/master/xheditor-zh-cn.js），
希望老大速度出个正式版，感谢。

当页面有设置过document.domain时,在IE10-报没有权限,导致无法使用

希望作者可以修改下,很喜欢这个编辑器

或者可以看看我提的 pull request,看是否合适

上传文件几次就会出错 sel.addRange(rng);不支持此接口

ie11或edge上传文件几次就会出错 sel.addRange(rng);不支持此接口

xhEditor与bootstrap有冲突

bootstrap中有一个“按钮 button.js”
http://v3.bootcss.com/javascript/#buttons-stateful

在页面加如这种按钮的特效后，会提示错误

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

JS错误:
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'loading'

去掉“按钮 button.js”的调用，或者是去掉xhEditor，就正常了。

大神，xheditor放在iframe里，父html能取值但无法设置值，浏览器IE8

不知道用contents().find().val()设置了多少次，全都出错，不知道有没有人能指导一下我

New XSS vulnerability in source code view

The editor's source code view allows attacker to bypass the input validation in default view by injecting javascript using details.
payload:
Injected the the payload <details ontoggle="alert(1)"> into the editor's source code view.

jquery 3.5.1 compatibility

there are some empty span tags that are coded by the script.... and are wrongly expanded by jquery/browser as per changes in jquery 3.5.1 documentation.

please see in main.js such span tags like

<span ....... />

I suggest,
please change all such occurrences with

<span........></span>

HTH
Thanks

如何监听编辑器的事件？

这个貌似没人维护了把？

IE11下粘贴文本，光标丢失

希望作者能及时解决

火狐浏览器下粘贴截图时报错

xheditor/src/main.js 2090行火狐底下报错 ReferenceError: event is not defined

我改成这样如何

另外吐槽：这个网站粘贴图片上传很吃力，粘贴10次，才成功2次。

终于看到更新了，反馈一个老问题。

以前有一个项目需要输入英文内容。发现有时候会出现空格丢失的现象。

1.2.1 的版本。

粘贴自动上传图片功能有Bug

粘贴远程图片后，第一张图片丢失。看源码，发现img标签被转义

在前台显示为<img src=""" size="71979" alt="">后台则是&标记的形式。
PS：我的服务器把图片转换为dataurlBase64的形式，如果取图失败会直接返回图片原址，以“|”分隔返回图片组（在官方说明里没看到参数和返回的规范）。

在 word 里面复制到编辑器空格不见了深度清理已关

xhEditor V1.2.1

在 word 里面复制到编辑器
深度清理已经设置成 0 但最终效果是也会出现空格不见的情况

the only 空格没有了请问怎样解决要那份 WORD测试请留言本人这里貌似上传不了DOC文件

chrome 多图上传的bug

注释的地方是bug.注释下面的一行是修改成功的。
this.showImg = function() {
var a = $(getLang(htmlImg)),
b = _this.getParent("img"),
c = $("#xheImgUrl", a),
d = $("#xheImgAlt", a),
e = $("#xheImgAlign", a),
f = $("#xheImgWidth", a),
g = $("#xheImgHeight", a),
h = $("#xheImgBorder", a),
i = $("#xheImgVspace", a),
j = $("#xheImgHspace", a),
k = $("#xheSave", a);
if (1 === b.length) {
c.val(xheAttr(b, "src")),
d.val(b.attr("alt")),
e.val(b.attr("align")),
f.val(b.attr("width")),
g.val(b.attr("height")),
h.val(b.attr("border"));
var l = b.attr("vspace"),
m = b.attr("hspace");
i.val(0 >= l ? "": l),
j.val(0 >= m ? "": m)
}
settings.upImgUrl && _this.uploadInit(c, settings.upImgUrl, settings.upImgExt),
k.click(function() {
_this.loadBookmark();
var a = c.val();
if ("" !== a && "http://" !== a) {
var k = a.toString().split(" "),
l = d.val(),
m = e.val(),
n = f.val(),
o = g.val(),
p = h.val(),
q = i.val(),
r = j.val();
if (k.length > 1) {
var s, t = '<img src="xhe_tmpurl"',
u = [];
"" !== l && (t += ' alt="' + l + '"'),
"" !== m && (t += ' align="' + m + '"'),
"" !== n && (t += ' width="' + n + '"'),
"" !== o && (t += ' height="' + o + '"'),
"" !== p && (t += ' border="' + p + '"'),
"" !== q && (t += ' vspace="' + q + '"'),
"" !== r && (t += ' hspace="' + r + '"'),
t += " />";
//for (var v in k) a = k[v],
for (var v=0,len=k.length;v<len;v++) a = k[v],
"" !== a &&
(
//a = a.split("||"),
a = a.toString().split("||"),
s = t, s = s.replace("xhe_tmpurl", a[0]),
a[1] && (s = '' + s + ""),
u.push(s)
);

                    _this.pasteHTML(u.join("&nbsp;"))
                } else if (1 === k.length && (a = k[0], "" !== a && (a = a.split("||"), 0 === b.length && (_this.pasteHTML('<img src="' + a[0] + '#xhe_tmpurl" />'), b = $('img[src$="#xhe_tmpurl"]', _doc)), xheAttr(b, "src", a[0]), "" !== l && b.attr("alt", l), "" !== m ? b.attr("align", m) : b.removeAttr("align"), "" !== n ? b.attr("width", n) : b.removeAttr("width"), "" !== o ? b.attr("height", o) : b.removeAttr("height"), "" !== p ? b.attr("border", p) : b.removeAttr("border"), "" !== q ? b.attr("vspace", q) : b.removeAttr("vspace"), "" !== r ? b.attr("hspace", r) : b.removeAttr("hspace"), a[1]))) {
                    var w = b.parent("a");
                    0 === w.length && (b.wrap("<a></a>"), w = b.parent("a")),
                    xheAttr(w, "href", a[1]),
                    w.attr("target", "_blank")
                }
            } else 1 === b.length && b.remove();
            return _this.hidePanel(),
            !1
        }),
        _this.saveBookmark(),
        _this.showDialog(a)
    },