vue中使用wangeditor富文本编辑器

需要实现的效果，见红色框，用户可以对文本进行各种各样的编辑：

 实现： 

1.这里我安装的wangeditor插件是2.x版本的，因此借助下方手册进行开发：

wangeditor2使用手册：调整尺寸 · wangEditor2使用手册 · 看云

2.安装

npm install wangeditor@2.1.23 --save

3.使用

<div id="websiteEditorElem" style="height: 250px"></div>

import Editor from "wangeditor";

mounted() {

    const editor = new Editor("websiteEditorElem");

    // 一开始我写的是const editor = new Editor("#websiteEditorElem");

    // 导致编辑器不显示，但在搜索教程时别人都是写#号的，可能是版本的问题

    editor.create();

  },

4.完整代码

<!-- 这里一个富文本编辑器 -->
<template>
  <div class="editor-box">
    <div id="websiteEditorElem">
      <!-- <p>{{ msg }}</p> -->
      <p>
        中国天气网讯
        预计今天（6月10日）南方较强降雨过程持续，较强降雨区域将蔓延至长江中下游地区，局地有暴雨，同时在东北将有强对流天气。气温方面，河南、山东等地高温将逐渐增多，部分地区需注意防范干热风天气。
      </p>
      <br />
      <p class="bold">南方较强降雨过程持续 东北等地防范强对流天气<br /></p>
      <p>
        南方新一轮较强降雨过程又来袭，昨天，降雨主要集中在四川、贵州、云南等西南地区，部分地区出现了暴雨。在华北、东北等地，降雨也所有增多，监测显示，昨天08时至今天06时，陕西中部、山西中部、河北西部、北京南部、辽东中部和东南部等地部分地区出现大到暴雨。
        南方新一轮较强降雨过程又来袭，昨天，降雨主要集中在四川、贵州、云南等西南地区，部分地区出现了暴雨。在华北、东北等地，降雨也所有增多，监测显示，昨天08时至今天06时，陕西中部、山西中部、河北西部、北京南部、辽东中部和东南部等地部分地区出现大到暴雨。南方新一轮较强降雨过程又来袭，昨天，降雨主要集中在四川、贵州、云南等西南地区，部分地区出现了暴雨。在华北、东北等地，降雨也所有增多，监测显示，昨天08时至今天06时，陕西中部、山西中部、河北西部、北京南部、辽东中部和东南部等地部分地区出现大到暴雨。
        南方新一轮较强降雨过程又来袭，昨天，降雨主要集中在四川、贵州、云南等西南地区，部分地区出现了暴雨。在华北、东北等地，降雨也所有增多，监测显示，昨天08时至今天06时，陕西中部、山西中部、河北西部、北京南部、辽东中部和东南部等地部分地区出现大到暴雨。南方新一轮较强降雨过程又来袭，昨天，降雨主要集中在四川、贵州、云南等西南地区，部分地区出现了暴雨。在华北、东北等地，降雨也所有增多，监测显示，昨天08时至今天06时，陕西中部、山西中部、河北西部、北京南部、辽东中部和东南部等地部分地区出现大到暴雨。
        南方新一轮较强降雨过程又来袭，昨天，降雨主要集中在四川、贵州、云南等西南地区，部分地区出现了暴雨。在华北、东北等地，降雨也所有增多，监测显示，昨天08时至今天06时，陕西中部、山西中部、河北西部、北京南部、辽东中部和东南部等地部分地区出现大到暴雨。南方新一轮较强降雨过程又来袭，昨天，降雨主要集中在四川、贵州、云南等西南地区，部分地区出现了暴雨。在华北、东北等地，降雨也所有增多，监测显示，昨天08时至今天06时，陕西中部、山西中部、河北西部、北京南部、辽东中部和东南部等地部分地区出现大到暴雨。
        南方新一轮较强降雨过程又来袭，昨天，降雨主要集中在四川、贵州、云南等西南地区，部分地区出现了暴雨。在华北、东北等地，降雨也所有增多，监测显示，昨天08时至今天06时，陕西中部、山西中部、河北西部、北京南部、辽东中部和东南部等地部分地区出现大到暴雨。南方新一轮较强降雨过程又来袭，昨天，降雨主要集中在四川、贵州、云南等西南地区，部分地区出现了暴雨。在华北、东北等地，降雨也所有增多，监测显示，昨天08时至今天06时，陕西中部、山西中部、河北西部、北京南部、辽东中部和东南部等地部分地区出现大到暴雨。
      </p>
    </div>
  </div>
</template>
<script>
import Editor from "wangeditor";
export default {
  name: "Editor",
  data() {
    return {
      // msg: "11111", //富文本编辑器中默认初始化的内容
    };
  },
  mounted() {
    const editor = new Editor("websiteEditorElem");
    editor.create();
  },
};
</script>
<style scoped lang="less">
@import "./index.css";
</style>

参考另外一篇博客：vue 中使用vue-quill-editor富文本编辑器_桔梗花开❀的博客-CSDN博客