wangEditor富文本编辑器实现上传

实现功能：文章撰写

实现效果：文章名称、标题、图片、和文章上传保存

工具：wangEditor.js (富文本编辑器),xss.js(过滤富文本编辑器的特殊内容)，XMLHttpRequest（实现仿ajax提交）

效果如下：

wangEditor配置和创建：

引用wangEditor.js(百度即可找到)

<script type="text/javascript" src="wangEditor.min.js"></script>

var editor;

  jQuery(document).ready(function($) {

         //富文本编辑器的配置

         var E = window.wangEditor;

         //实例化E：第一个参数是编辑器菜单栏的标签，第二个参数是编辑器内容的标签

         editor = new E('#editor1', '#editor2');

          //配置菜单栏

         editor.customConfig.menus = [                         

    'head',  // 标题                      'bold',  // 粗体

    'fontSize',  // 字号                  'list',  // 列表

    'justify',  // 对齐方式               'quote',  // 引用

    'emoticon',  // 表情                  'image',  // 插入图片

    'table',  // 表格                     'video',  // 插入视频

    'code',  // 插入代码                  'undo',  // 撤销

    'redo'  // 重复                       'fontName',  // 字体                  'italic',  // 斜体                    'underline',  // 下划线

    'strikeThrough',  // 删除线          'foreColor',  // 文字颜色

    'backColor',  // 背景颜色              'link',  // 插入链接

   ];

        // 使用 base64 保存图片

         editor.customConfig.uploadImgShowBase64 = true;

          //设置一次上传图片张数