富文本wangEditor

wangEditor
前言

前面博主已经介绍了富文本编辑器wangEditor，今天就来推荐一款也比较简单的富文本编辑器wangEditor，hhh！
贴代码

<!DOCTYPE html>
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title>wandEditor</title>
            <script type="text/javascript" src="js/jquery.min.js" ></script>
            <script type="text/javascript" src="js/wangEditor.min.js" ></script>
            
            <style type="text/css">
                  .editor2_toolbarClass{
                        /*这里用id取不出元素，需要额外加class*/
                        width: 800px;
                        border: 1px dashed red;
                        margin-top: 10px;
                  }
                  #editor2_text{
                        margin-top: 10px;
                        width: 300px;
                        height: 200px;
                        border: 2px solid #678;
                  }
            </style>
            
            <script type="text/javascript">
                  $(function(){
                        
                        //window.wangEditor可以共用一个，此处为了方便看，才new了多个
                        
                        //普通地创建一个富文本编辑器
                        var E1 = window.wangEditor;
                        var editor1 = new E1("#editor1");
                    var $textarea1 = $('#textarea1');
                    editor1.customConfig.onchange = function (html) {
                        // 监控变化，同步更新到 textarea
                        $textarea1.val(html)
                    }
                    // 关闭粘贴样式的过滤
                      editor1.customConfig.pasteFilterStyle = false;
                      // 自定义处理粘贴的文本内容
                      editor1.customConfig.pasteTextHandle = function (content) {
                          // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
                          return content + '内容在粘贴内容后面追加';
                      }
                      //插入网络图片的回调
                      editor1.customConfig.linkImgCallback = function (url) {
                            console.log(url) // url 即插入图片的地址
                        }
                      //插入链接的校验
                      editor1.customConfig.linkCheck = function (text, link) {
                            console.log(text) // 插入的文字
                            console.log(link) // 插入的链接
                            return true // 返回 true 表示校验成功
                            // return '验证失败' // 返回字符串，即校验失败的提示信息
                        }
                      //插入网络图片的校验
                      editor1.customConfig.linkImgCheck = function (src) {
                            console.log(src) // 图片的链接
                            return true // 返回 true 表示校验成功
                            // return '验证失败' // 返回字符串，即校验失败的提示信息
                        }
                      // 自定义菜单配置
                      editor1.customConfig.menus = [
                            'head',  // 标题
                            'bold',  // 粗体
                            'italic',  // 斜体
                            'underline',  // 下划线
                            'strikeThrough',  // 删除线
                            'foreColor',  // 文字颜色
                            'backColor',  // 背景颜色
                            'link',  // 插入链接
                            'list',  // 列表
                            'justify',  // 对齐方式
                            'quote',  // 引用
                            'emoticon',  // 表情
                            'image',  // 插入图片
                            'table',  // 表格
                            'video',  // 插入视频
                            'code',  // 插入代码
                            'undo',  // 撤销
                            'redo'  // 重复
                        ];
                        // 自定义配置颜色（字体颜色、背景色）
                      editor1.customConfig.colors = [
                          '#000000',
                          '#eeece0',
                          '#1c487f',
                          '#4d80bf',
                          '#c24f4a',
                          '#8baa4a',
                          '#7b5ba1',
                          '#46acc8',
                          '#f9963b',
                          '#ffffff'
                      ];
                        editor1.create();
                        
                        //注意此功能不能动态改变
                        // 禁用编辑功能
                        editor1.$textElem.attr('contenteditable', false);
                        // 开启编辑功能
                        editor1.$textElem.attr('contenteditable', true);
                        
                        var E2 = window.wangEditor;
                        // 两个参数也可以传入 elem 对象，class 选择器
                        var editor2 = new E2("#editor2_toolbar" , "#editor2_text");
                        editor2.create();
                        
                        $("#htmlEditor1").click(function(){
                              //直接覆盖掉编辑器里的内容
                              editor1.txt.html("内容已被格式化...");
                        });
                        $("#appendEditor1").click(function(){
                              //增加的内容必须是标签式的，仅被解析标签
                              editor1.txt.append("<p>增加的内容</p><a href = '#'>aa</a><a href = '#'>bb</a>");
                        });
                        
                        $("#getHtmlEditor1").click(function(){
                              alert("获取Editor1的html：" + editor1.txt.html());
                        });
                        $("#getTextEditor1").click(function(){
                              alert("获取Editor1的text：" + editor1.txt.text());
                        });
                        
                  });
            </script>
      </head>
      <body>
            <div id="editor1"></div>
            
            <button id="htmlEditor1">动态给Editor1格式化内容</button>
            <button id="appendEditor1">动态给Editor1增加内容</button>
            <button id="getHtmlEditor1">获取Editor1的html</button>
            <button id="getTextEditor1">获取Editor1的text</button>
            
            <div id="editor2_toolbar" class="editor2_toolbarClass"></div>
            <div id="editor2_text"></div>
            
            <textarea id="textarea1" style="width:100%; height:200px;"></textarea>
            
      </body>
</html>
效果展示

http://github.ifdream.xin/demo/wangEditor/wangEditorDemo.html
资源文件链接

1 2	http://github.ifdream.xin/js/jquery.min.js http://github.ifdream.xin/js/wangEditor/wangEditor.min.js