vue2中使用wangeditor富文本编辑器

最新推荐文章于 2025-04-14 14:10:12 发布

fanjunf

最新推荐文章于 2025-04-14 14:10:12 发布

阅读量1.3k

点赞数

文章标签： javascript 开发语言 java vue

本文链接：https://blog.youkuaiyun.com/qq_53636944/article/details/134319617

版权

在开发的时候，我们可能会使用到富文本编辑器，因为它看着比较美观，相比于其他的输入框，富文本编辑器的功能更多，给用户的体验更好。下面我们进行vue中整合富文本编辑器。

首先是下载wangeditor

npm i wangeditor --save

其次在使用界面进行引入并进行初始化配置。

引入wangeditor

import E from 'wangeditor'

初始化

<script>
import E from 'wangeditor'
export default {
  data() {
    return {
      form: {},
      editor: null,
      viewData: null,
      editFormVisible: false,
    }
  },
  methods: {
    //添加
    add(){
    
      this.form = {};
        //进行新增数据时，我们给wangeditor容器赋值为空
      this.initWangEditor('');
      this.dialogFormVisible = true;
    },
    save(){
      this.form.description = this.editor.txt.html()
        //进行添加或修改的操作
    },
    edit(row){
      this.form = row
        //进行修改的操作时，我们将参数赋值为对应的参数
      this.initWangEditor(this.form.description || '');
      this.dialogFormVisible = true;
    },
    //查看详情
    viewEditor(description){
      this.viewData = description;
      this.editFormVisible = true;
    },
    //富文本编辑器初始化
    initWangEditor(content){
      setTimeout(()=>{
        if (!this.editor){
          //创建wangeditor对象
          this.editor = new E(document.getElementById('div1'));
          this.editor.config.placeholder = '请输入内容';
            //设置文件上传的后端路径          
          this.editor.config.uploadImgServer = '/api/files/wang/upload';
             //设置文件上传的参数名
          this.editor.config.uploadFileName = 'file'
            //设置文件上传的请求头
          this.editor.config.uploadImgHeaders={
            token: this.user.token
          }
           //自定义设置文件上传成功的回调
          /*this.editor.config.uploadImgHooks = {
            // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            customInsert: function(insertImgFn, result) {
              // result 即服务端返回的接口
              console.log('customInsert', result)

              // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
              insertImgFn(result.data[0].url)
            }
          }*/
            //创建wangeditor对象
          this.editor.create();
        }
        //给wangeditor中设置内容
        this.editor.txt.html(content)
      },100)
    }
  }
}
</script>

上面是前端的请求配置，其中主要的是设置请求的路径，请求的参数名以及请求的请求头中的内容，还有上传文件成功后的回调。一般只要按照如下的方式返回响应的结果的话，我们就不用设置成功后的回调。

{
    接口返回的数据局类型是：
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回图片Object，Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的，可以不设置或设置为空字符串,需要注意的是url是一定要填的。
    "data": [
        {
            url: "图片地址",
            alt: "图片文字说明",
            href: "跳转链接"
        },
        {
            url: "图片地址1",
            alt: "图片文字说明1",
            href: "跳转链接1"
        },
        "……"
    ]
  }

其他详细的配置我们可以参考相应的官方文档:Introduction · wangEditor 用户文档https://www.wangeditor.com/v4/

后端对应的设置

    @PostMapping("/wang/upload")
    public Dict wangUpload(MultipartFile file) throws Exception {
        Dict dict = Dict.create();
        Map<String,Object> map = new HashMap<>();
        //把文件存储到本地磁盘上
        String originalFilename = file.getOriginalFilename();
        String filename = UUID.randomUUID() +originalFilename.substring(originalFilename.lastIndexOf("."));
        String url = AliOssUtil.uploadFile(filename, file.getInputStream());
        dict.set("errno",0).set("data", CollUtil.newArrayList(Dict.create().set("url",url)));
//        map.put("errno",0);
//        map.put("data",url);
        log.info("上传路径：{}",url);
        return dict;
    }

通过以上的方式即可完成wangeditor的使用，并进行上传等操作。