Code Monkey home page Code Monkey logo

umeditor's Introduction

UMeditor

UMeditor富文本编辑器

UMeditor,简称UM,是 ueditor 的简版。是为满足广大门户网站对于简单发帖框和回复框的需求,专门定制的在线富文本编辑器。我们的目标不仅是要提高在线编辑的编辑体验,也希望能改变前端技术中关于富文本技术的门槛,让大家不再觉得这块是个大坑。

主要特点

  1. 轻量: 主文件的代码量为139k。
  2. 加载速度更快: 放弃了使用传统的iframe模式,采用了div的加载方式,以达到更快的加载速度和零加载失败率。
  3. 可定制: 配置项完善,可定制程度高。
  4. 可扩展: 代码层次拆分清晰,功能以插件形式挂接,可灵活定制需要的功能。
  5. 多后台支持: 支持php、asp、jsp、.net四种后台部署代码
  6. 功能丰富: 支持插入公式、粘贴QQ截屏、拖放上传图片、插入地图、草稿箱功能

入门部署和体验

第一步:下载编辑器

到官网下载 umeditor 最新版源码版本,下载之后打开 _examples/index.html 就可以看到演示例子。[下载页面]

第二步:部署编辑器到页面

  • 解压下载的包,放到你的项目中。
  • 在你的页面要插入编辑器的位置,插入代码:
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain" style="width:600px;height:200px;">
    这里写你的初始化内容
</script>
  • <head></head>标签最后,插入需要引用的文件和实例化编辑器的代码(注意修改引用文件的路径), 其中:UM 依赖 jquery 和 etpl , 注意引入文件的顺序
<!-- 样式文件 -->
<link rel="stylesheet" href="./umeditor/themes/default/css/umeditor.css">
<!-- 引用jquery -->
<script src="./umeditor/third-party/jquery.min.js"></script>
<!-- 引入 etpl -->
<script type="text/javascript" src="../third-party/template.min.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="./umeditor/umeditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./umeditor/umeditor.js"></script>
<!-- 语言包文件 -->
<script type="text/javascript" src="./umeditor/lang/zh-cn/zh-cn.js"></script>
<!-- 实例化编辑器代码 -->
<script type="text/javascript">
    $(function(){
        window.um = UM.getEditor('container', {
        	/* 传入配置参数,可配参数列表看umeditor.config.js */
            toolbar: ['undo redo | bold italic underline']
        });
    });
</script>
  • 这时候你再浏览器打开你的页面,看到下面这样的编辑器,说明你已部署成功。 部署成功

第三步:获取和设置编辑器的内容

/* 获取编辑器内容 */
var html = um.getContent();
var txt = um.um.getContentTxt();

/* 设置编辑器内容 */
um.setContent('要设置的编辑器内容.');

相关链接

UMeditor官网: http://ueditor.baidu.com

百度FEX-Team: http://fex.baidu.com

联系我们

邮件: [email protected]

umeditor's People

Contributors

campaign avatar carsonxu avatar hancong03 avatar jinqn avatar lifeifei612 avatar phinome avatar techird avatar worry127722 avatar yancend avatar yangsibai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

umeditor's Issues

如何删除不需要的功能

语言包能否和库在一个js文件里?
能否删除公式, 视频, 等等这些功能?

希望能给出一个详细的方法.

需要表格和模板功能。。。

喜欢umeditor的简洁、快速和基于div层的加载方式,同时又想用ueditor里强大好用的表格、模板等功能,求加入

兼容性问题

正常初始化后会报错, 但是能够正常使用!
Uncaught SyntaxError: Unexpected token < index.html?1394763230154:4
Uncaught TypeError: Cannot read property 'buttons' of undefined VM6566:10
(anonymous function) VM6566:10
i.onload.i.onreadystatechange

建议把内嵌的tpl模板语言从<% ... %>改为<{% ... %}>,否则与rails下的erb冲突

前端模板语言经常用{{ ... }}而狠少用<% ... %>这样的服务器后端常用语言是有道理的,因为这会与服务器后端相冲突。我现在就正在改造umeditor以适应我的Rails项目,我需要把所有.js文件更名为.js.erb,然后修改里面所有对于资源文件的引用路径,将原来简单的字符串拼接而生成的固定路径(如/umeditor/emotion/images/0.gif)修改为rails后端生成的asset路径(如asset_path('umeditor/emotion/0.gif'),最后在生产环境下就是/assets/umeditor/emotion/0-f8b3050e617323827f03a10c1aba6de31.gif这样的字符串),但是因为umeditor已经占用了<%和%>,我就不得不把这两个玩意儿先替换为别的,再把我的erb嵌进来。

在JS前端使用<%和%>是不成熟的,建议换一个别的字符。我现在是改为了<{%和%}>,虽然看着不好看,但它不会与其他任何后端语言发生冲突。

设置width为xx%后改变浏览器大小编辑器大小无变化

<script type="text/plain" id="myEditor" style="width:100%;height:240px;"> </script>

设置宽度为100%,再拖动浏览器改变窗口大小,编辑器的父类div(也设的width 百分比)大小随着变小了,但是编辑器的宽度还是原来的大小,这样就会超出的父类div,正常是宽度随着变化,只有重新刷新页面才可以。
这是因为把宽度写死了吧,以至不刷新没有作用,自己临时的解决就是定义一个改变浏览器大小的触发事件,然后再改变编辑器大小,这像貌似不太专业。是不是有更好的方法。好像ueditor也有这个问题。

上传图片问题

上传图片之后 查看编辑器html会发现 src中是完整路径,这样我localhost上传的图片别人是无法查看的,请问如何像ueditor那样上传相对路径的图片?

多次AJAX重载编辑器后,点开下拉窗口后无法关闭及解决办法

因为项目中后台系统使用ajax加载相应页面,所以编辑器会多次重复加载。在第一次编辑器加载完成后点开颜色设置的下拉菜单之后再重新用ajax加载这个页面,再点击颜色设置的下拉菜单会有无法消除这个菜单窗口的现象。在控制台可以看到下面的信息
qq20140429174346

找到对应出错的行

qq20140429174404

因为出错原因是undefined的变量,因此在加了typeof检查后就发现不再报错。

qq20140429174501

额,ajax加载编辑器是有各种各样的坑啊。。

use jsp up image error

i use jsp to up image , the first image do ok. when i click the add other image buttom,nothing be happend,it can't open the choose file dialog.
the umeditor.config.js file like:
window.UMEDITOR_CONFIG = {

    //为编辑器实例添加一个路径,这个不能被注释
    UMEDITOR_HOME_URL : URL

    //图片上传配置区
    ,imageUrl:URL+"jsp/imageUp.jsp"             //图片上传提交地址
    ,imagePath:URL + "jsp/"                     //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
    ,imageFieldName:"upfile"                   //图片数据的key,若此处修改,需要在后台对应文件修改对应参数

    //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
    ,toolbar:[
        'undo redo | bold italic underline strikethrough horizontal | forecolor backcolor |',
        'insertorderedlist insertunorderedlist | removeformat | fontfamily fontsize' ,
        '| justifyleft justifycenter justifyright justifyjustify |',
        'link unlink | image ',
        '| fullscreen'
    ]

多个实例在同一个form下的问题

多个实例在同一个<form>下面,会产生多个name属性相同的<textarea>用于提交时向服务器发送富文本内容。服务器只会处理一个。

解决办法是:在config.js设置如下参数

,autoSyncData:false //自动同步编辑器要提交的数据

然后 建立监听事件接管 富文本->textarea的过程:

        editor[number].addListener('contentChange',function(){
            $('#editor-item-'+number).val(editor[number].getContent());
        })

全屏退出后问题

为什么编辑器全屏后再退出全屏 页面y轴滚动条就没了,
body 多出了样式 style="overflow-x: visible; overflow-y: hidden;"

用的 ie8 谷歌都这样

图片尺寸调整在bootstrap下的bug

bootstrap里的box-sizing是border-box

而在这种情况下,图片调整尺寸会出bug,建议将“box-sizing: content-box;”写入css中:

.edui-scale {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

加上这个之后,就不会出问题了。

拖拽上传图片错误

dialogs/image.js L 264
xhr.open("post", me.editor.getOpt('imageUrl') + "?type=ajax", true);

需要改成

xhr.open("post", me.editor.getOpt('imageUrl') + (me.editor.getOpt('imageUrl').indexOf("?") == -1 ? "?" : "&") + "type=ajax", true);

异常捕获

这样写为什么不能捕获初始化时候的异常呢:
try {
var editor = UM.getEditor('a_add_content', {
//这里可以选择自己需要的工具按钮名称,此处仅选择如下七个
toolbar:['source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
'| justifyleft justifycenter justifyright justifyjustify |'],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false,
//默认的编辑区域高度
initialFrameHeight:200
//更多其他参数,请参考umeditor.config.js中的配置项
});
} catch (e) {
console.log(e);
}

建议用JSLint提升一下代码质量

虽然JS代码可以正常工作,但代码质量真是惨不忍睹,建议用JSLint看看有哪些问题,严格把控一下,对那些不规范甚至错误的用法予以纠正。

我随便举几个例子,比如,语句最后没写分号:

        /**
         * 检测浏览器是否IE6模式或怪异模式
         * @name ie6Compat
         * @grammar     UM.browser.ie6Compat  => true|false
         */
        browser.ie6Compat = ( version < 7 || browser.quirks );

        browser.ie9above = version > 8;

        browser.ie9below = version < 9 // <--- 这里没写分号

再比如,null的比较应该用三等号,而代码里写了大量的双等号:

if (obj == null) return;

再比如,new一个东西应该后加括号:

var noop = new Function();
noop.prototype = obj;
obj = new noop; // <--- 这里应该为new noop(),况且,noop这个名字也不好,哪怕它只是临时的

再比如,通篇都是for循环的奇葩用法(浏览器优化?我个人认为就这点数据量根本不值得拿代码易读性换执行效率):

listToMap:function (list) {
    if (!list)return {};
    list = utils.isArray(list) ? list : list.split(',');
    for (var i = 0, ci, obj = {}; ci = list[i++];) {  // <-----
        obj[ci.toUpperCase()] = obj[ci] = 1;
    }
    return obj;
}

此外,还有tab和space混用、长语句断行不当等问题,用JSLint一跑都能看到。对代码的严格要求不仅利于他人快速读懂你的代码,更大的好处是利于自己个人水平的提升,写出来的代码一看就是正规军,不是野路子选手,毕竟,UEditor系列可是挂在百度旗下的产品。

希望UMEditor越做越好。

初始化大小问题

我设置Content为100%,初始化以后只剩80%,看了看源码,我觉得这个是不是可以默认让她100%,不然很麻烦

为什么um里没有了paragraph功能?

campaign你好,今天试用了一下mini,感觉很好,改进很大。但有2个问题想咨询一下。
1.paragraph功能怎么没有了,但我看源代码里是有做这功能的,但toolbar上却没显示出来。
2.mini是基于jquery的,但我用的是yui框架,能不能把需要用到的jquery方法抽出来,好让我替换成用yui来实现。
谢谢

多实例问题

在一个页面创建多个um
打开一个实例的dialog时,会遮挡其他的实例
全屏时也有类似问题

工具栏怎么多行

这个um 轻巧,很好用,但是工具栏怎么多行不会弄,请问有相关的参数还是要改源码?谢谢。

从word文档粘贴时的问题

部分文字从Word粘贴会造成单词连接在一起
比如
word文档里面是
features a sparkling square zircon at the center.
粘贴出是
features a sparklingsquare zircon at the center.
少了一个空格.
粘贴大段文字的时候很容易出问题又不易察觉.
UE编辑器不存在这个Bug. 看了下UM.filterWord 跟 UE.filterWord 是一样的. 不知道问题出在哪儿.

百度地图插件使用静态图片的时候,不能正确显示图片

经调试发现是这个地方出错了。
var widget = editor.getWidgetData(widgetName),
center = widget.map.getCenter(),
zoom = widget.map.getZoom(),
size = widget.map.getSize(),
point = widget.marker.Q;
map.js的234行的widget.marker.P改成widget.marker.Q
感觉这是一个私有变量吧。。没有一个公共方法吗?

几个问题

一、um粘贴时能否像ue那样提供几个粘贴选项:保留原格式,只保留标签,纯文本粘贴
二、全屏时能否自定义编辑区宽度
三、能否自定义工具栏图标

um 上传图片会提交外面的表单

um 上传图片会提交外面的表单

在编辑器外面有form标签,

<form id="myform" action="upload1" method="post">
<div>
<script type="text/javascript" src="http://ueditor.baidu.com/minieditor/jquery.js" charset="utf-8"></script>
<link href="http://ueditor.baidu.com/minieditor/themes/default/css/ueditor.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="http://ueditor.baidu.com/minieditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ueditor.baidu.com/minieditor/ueditor.all.js"></script>
<script type="text/plain" id="editor" name="content" style="width:520px;height:250px;font-size:14px;"></script>
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
</div>
<input type="submit" name="submit" value="submit" />
</form>
<script>
     $("#myform").submit(function(){
        alert("触发我,无法提交,图片也无法提交");
        //.. ajax 提交表单  
        return false;
     });
</script>

上传图片会弹出 “触发我”

着急求解决... 十分感谢...

修改loadFile方法,使其自动检测要加载的模块是否已经有了,没有时再动态生成<script>标签

现在的Web后端发展狠快,已经不是PHP小米加步枪那个时代了,更不是Java那个笨拙的时代,以Rails为首的框架能够非常先进地对前端JS和CSS做asset pipeline处理,在asset控制下的静态资源能够更高效率地让浏览器优先调用缓存、并且能够非常好地解决服务器集群环境下的部署一致性等多种问题。在这个前提下,我需要把所有umeditor相关的js文件打包进一个js文件中一次性输出给浏览器,而不需要umeditor.js自己再去生成新的<script src="..." defer>标签来动态加载(这个动态加载的动作反而会触发浏览器打开一个新的HTTP链接),在这种情况下,当前的loadFile方法显得十分不智能。正常的行为应该是先判断要register的部分是否已经在浏览器环境中存在了,比如要register link这个模块,应该先检查link是否已经有了,如果有,则执行后面的函数,如果还没有,则执行loadFile去动态加载。现在的代码结构看起来是用动态加载来松耦合的,其实还是紧耦合的

补充,这个还跟加载顺序有关,目前的加载顺序是ueditor.js -> 用script动态加载emotion等模块 -> script加载完成 -> ueditor.js侦测到onreadystate变化 -> 回调函数得到执行。如果简单地把emotion.js等文件贴在ueditor.js后面也是不行的,必须修改加载流程,全部松耦合

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.