轻量级web富文本编辑器wangEditor介绍

今天发现了一个不错的富文本编辑器，记录下来，同时分享给大家。

在线demo

特性

基于javascript和css开发的html富文本编辑器，开源免费。
支持自定义编辑器样式。
支持模块化：require.js，seajs，webpack等都有解决方案。
与国产编辑器百度ueditor 和 kindeditor 相比，它轻量、易用、UI设计精致漂亮。
与国外编辑器 bootstrap-wysiwyg 和 simditor 相比，它文档易读、交流方便，更接地气。
它还会根据使用者的反馈不断完善，未来将支持移动版。

文档

wangEditor的文档非常详尽，直接到对应的网站查看即可。

demo

这是一个整合requirejs的基本demo，拷贝好这些文件就可以运行了，运行效果可以参考页面的banner。

demo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />ame="renderer" content="webkit">
<title>轻量级web富文本编辑器wangEditor介绍</title>
<link rel="stylesheet" type="text/css" href="wangEditor/css/wangEditor.css"/>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: #eaebec;}
h1{font-size: 40px;text-align: center;padding: 20px 0;}
            .container{background: #fff;width: 900px;padding: 20px;margin: 50px auto;}
</style>
</head>
<body>
<div class="container">
<h1>轻量级web富文本编辑器-wangEditor</h1>
<div id="editor" style="height: 400px;"></div>
</div>
<script src="//cdn.bootcss.com/require.js/2.3.2/require.min.js" data-main="main.js"></script>
</body>
</html>

main.js

require.config({
paths:{
'jquery':'http://cdn.bootcss.com/jquery/1.9.1/jquery.min',
'wangEditor': 'wangEditor/js/wangEditor.min',
'editorCfg':'wangEditor/wangEditor.config'
}
});
require(['wangEditor','editorCfg'], function(wangEditor,editorCfg){
    $(function(){
        var editor = new wangEditor('editor');
        editor.config.emotions = editorCfg.emotions
        editor.create();
    });
});

wangEditor.config.js

define(function (){
　　　　emotions = {
    // 支持多组表情
    // 第一组，id叫做 'default' 
    'default': {
        title: '默认',  // 组名称
        data: 'http://www.wangeditor.com/wangEditor/test/emotions.data'  // 服务器的一个json文件url，例如官网这里配置的是 http://www.wangeditor.com/wangEditor/test/emotions.data
    },
    // 第二组，id叫做'weibo'
    'weibo': {
        title: '微博表情',  // 组名称
        data: [  // data 还可以直接赋值为一个表情包数组
            // 第一个表情
            {
                'icon': 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif',
                'value': '[草泥马]'
            },
            // 第二个表情
            {
                'icon': 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif',
                'value': '[神马]'
            }
            // 下面还可以继续，第三个、第四个、第N个表情。。。
        ]
    }
    // 下面还可以继续，第三组、第四组、、、
};
　　　　return {
　　　　　　emotions
　　　　};
});