wangEditer 总结回顾

66 阅读 0 评论 44 点赞

我是靠谱客的博主激情寒风，最近开发中收集的这篇文章主要介绍wangEditer 总结回顾，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

自己从网上下载了个富文本编辑器，有layui的还有wangEditer的，但是layui的感觉有点问题，就总结一下自己引入引入的wangEditer的富文本编辑器吧，当做个人总结以后用，基本的。

从官网下载wangEditer源码集成

然后在项目里引入样式表和js文件

下面是完整的页面，还有自定义的富文本编辑器的选项，轻量级的富文本编辑器感觉应付一般的需要时够了

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="/css/wangEditor.min.css">
<script type="text/javascript" src="/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/wangEditor.min.js"></script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Test wangEditor 的富文本编辑器
               <div style="height:400px;max-height:500px;">
                       <div id="div1" style="height:400px;max-height:500px;">
                            <p></p>
                       </div>
               </div>
                <button id="btn1">获取内容</button>



</body>
<script type="text/javascript">

// 获取元素
    var div = $("#div1");
    // 生成编辑器
    var editor = new wangEditor(div);

    editor.config.menus = [
       'source',
         '|',
         'bold',
         'underline',
         'italic',
         'strikethrough',
         'eraser',
         'forecolor',
         'bgcolor',
         '|',
         'quote',
         'fontfamily',
         'fontsize',
         'head',
         'unorderlist',
         'orderlist',
         'alignleft',
         'aligncenter',
         'alignright',
         '|',
         'link',
         'unlink',
         'table',
         'emotion',
         '|',
         'img',
         'video',
         'location',
         'insertcode',
         '|',
         'undo',
         'redo',
         'fullscreen'
     ];

    editor.create();
    editor.$txt.html('<p>要初始化的内容</p>');



    $('#btn1').click(function () {
        // 获取编辑器区域完整html代码
//          editor.$txt.html('<p>要初始化的内容</p>');
        var html = editor.$txt.html();

        // 获取编辑器纯文本内容
//         var text = editor.$txt.text();

//         // 获取格式化后的纯文本
//         var formatText = editor.$txt.formatText();
    });
</script>

</html>