您现在的位置是：网站首页>>前端技术>>Vue

wangEditor:基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费

1.使用npm或cnpm 下载wangeditor

//（注意 wangeditor 全部是小写字母）
npm install wangeditor

2.在所需页面引入wangeditor


import E from 'wangeditor'

3.html代码


<template>
　　　<div>
      <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
      </div>
    </div>
</template>

4.js代码


<script type="text/ecmascript-6">
      let E = require('wangeditor');
      let editor;
    　　export default {
    　　    data() {
    　　　　　　　　 return {
     　　 　　　　　}
    　　　　　},
      　　 methods: {
        　　  geteditor() {
                editor = new E('#editor');
                // 配置上传图片服务器端地址
                editor.customConfig.uploadImgServer = '/upload';
                // 将图片大小限制为 3M
                editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
                // 限制一次最多上传 5 张图片
                editor.customConfig.uploadImgMaxLength = 5;
                //自定义 fileName
                editor.customConfig.uploadFileName = 'yourFileName';
                //监听函数
                editor.customConfig.uploadImgHooks = {
                    before: function (xhr, editor, files) {
                        // 图片上传之前触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                        
                        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                        // return {
                        //     prevent: true,
                        //     msg: '放弃上传'
                        // }
                    },
                    success: function (xhr, editor, result) {
                        // 图片上传并返回结果，图片插入成功之后触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                    },
                    fail: function (xhr, editor, result) {
                        // 图片上传并返回结果，但图片插入错误时触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                    },
                    error: function (xhr, editor) {
                        // 图片上传出错时触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                    },
                    timeout: function (xhr, editor) {
                        // 图片上传超时时触发
                        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                    },
                    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                    customInsert: function (insertImg, result, editor) {
                        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                        var url = result.url
                        insertImg(url)
                        // result 必须是一个 JSON 格式字符串！！！否则报错
                    }
                    
                }
                //自定义提示方法
                editor.customConfig.customAlert = function (info) {
                    // info 是需要提示的内容
                    alert('自定义提示：' + info)
                }
               
                editor.create();
                editor.txt.html('adasd');
         　　 }
    　　    },
           mounted(){
              this.geteditor();
           },
    　　}
</script>

效果图：