PC移动端的富文本编辑器wangEditor的使用

在刚开发的项目之中，在移动端/PC端，需要一个富文本编辑器，要求：简单-轻量-实用。比较了几种编辑器后，选择了wangEditor。

移动端的截图（手机效果好些）：

PC端的截图：

在wangEditor的官网（ http://www.wangeditor.com/ ）中，提供了一些常用的工具，可以按需来配置，还可以自己二次封装：

先说配置：在PC端直接引入 wangEditor.js来创建，在移动端用的vue.js模块开发，所以用的： npm install wangeditor 来安装。

移动端：

1 . import wangeditor from 'wangeditor' 来引入

2 . this.editor = new wangeditor ('#div1')

4 .配置需要的选项，具体的到官网查看

5.常用的配置：

6 . this.editor.create()//创建编辑器，到这里创建就完成了。

7 . 但是你去发现在移动端，会不怎么适配，这时候就需要用 rem 来做适配。

如果：想要自己改变样式，那么直接在 node_moudles/wangwditor 下找到 wangEditor.js ，来自行修改。

PC端：在确保引入wangEditor.js之后，在之后的js中，写入：

<link rel="stylesheet" href="plugins/wangeditor/min/wangEditor.min.css" />

<script src="plugins/wangeditor/min/wangEditor.min.js" ></ script >

<script src="jquery/jquery-2.1.1.min.js" ></ script >

<div id="editor" ></ div >

<input type="button" id="test1" value="拿html" />

<input type="button" id="test2" value="拿text" />

        var E = window.wangEditor

        var editor =new E("#myEditor")

        //开启debug模式

        editor.customConfig.debug =true

        // 关闭粘贴内容中的样式

        editor.customConfig.pasteFilterStyle =false

        // 忽略粘贴内容中的图片

        editor.customConfig.pasteIgnoreImg =false

        // 使用 base64 保存图片

        //editor.customConfig.uploadImgShowBase64 = true

        // 上传图片到服务器

        editor.customConfig.uploadFileName ='editorFile'//设置文件上传的参数名称

        editor.customConfig.uploadImgServer ='upload1'//设置上传文件的服务器路径

        editor.customConfig.uploadImgMaxSize =3 *1024 *1024// 将图片大小限制为3M

        //自定义上传图片事件

        editor.customConfig.uploadImgHooks = {

before:function(xhr, editor, files) {

},

            success:function(xhr, editor, result) {

console.log("上传成功")

            },

            fail:function(xhr, editor, result) {

console.log("上传失败,原因是" + result)

            },

            error:function(xhr, editor) {

console.log("上传出错")

            },

            timeout:function(xhr, editor) {

console.log("上传超时")

            }

}

editor.create()

        $("#btnGetHtml").bind("click",function(){

//            alert("hello world")

            var content = editor.txt.html()

            alert(content)

        })

    </script>

static StringUPLOAD_PATH ="/static/upload/"

@ResponseBody

@RequestMapping(value ="upload1", method = RequestMethod.POST)

public Mapupload1(MultipartFile editorFile, HttpServletRequest request) {

System.out.println("inner upload1")

    Map result =new HashMap()

    // 获取文件后缀

    String fileName = editorFile.getOriginalFilename()

    String fileSuffix = fileName.substring(fileName.lastIndexOf("."))

    // 文件存放路径

    String filePath = request.getSession().getServletContext().getRealPath(UPLOAD_PATH)

    //网络地址类

    InetAddress ia=null

    try {

//获取本机网络地址

        ia = ia.getLocalHost()

        System.out.println(ia.getHostAddress())

    }catch (UnknownHostException e) {

e.printStackTrace()

    }

// 判断路径是否存在，不存在则创建文件夹

    File file =new File(filePath)

    if (!file.exists()) {

file.mkdirs()

    }

// 将文件写入目标

    file =new File(filePath, UUID.randomUUID() + fileSuffix)

    try {

editorFile.transferTo(file)

    }catch (IOException e) {

e.printStackTrace()

    }

// 获取服务端路径（拼接图片上传以后的网络访问地址）

    String serverPath = String.format("%s://%s:%s%s%s", request.getScheme(), ia.getHostAddress(), request.getServerPort(), request.getContextPath(), UPLOAD_PATH)

    System.out.println(serverPath)

    // 返回给 wangEditor 的数据格式

    result.put("errno", 0)

    result.put("data", new String[]{serverPath + file.getName()})

    return result

}

---