vue2使用富文本wangeditor场景

最新推荐文章于 2025-07-16 16:47:43 发布

原创最新推荐文章于 2025-07-16 16:47:43 发布 · 1.7k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue前端专栏收录该内容

9 篇文章

订阅专栏

1、富文本wangeditor

官网：http://www.wangeditor.com/

2、安装依赖

根据自己使用镜像情况，用npm 或cnpm进行安装。

npm install wangeditor/editor
npm install wangeditor/editor-for-vue

安装后，package.json出现此依赖。

3、封装组件

在项目组件路径下封装富文本组件components/wangeditor/index.vue ，方便其他页面引用。

<template lang="html">
  <div >
    <div ref="editor" style="height: 410px">
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'wang-editor',
  data() {
    return {
      editor: null,
      info_: null,
      // 配置富文本编辑器的菜单栏
      menu: [
        'undo', // 撤销
        'redo', // 重复
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'indent', // 缩进
        'lineHeight', // 行高
        'foreColor', // 文字颜色
        //'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'todo', // 待办
        'justify', // 对齐方式
        'quote', // 引用
        // 'emoticon', // 表情
        'image', // 插入图片
        // 'video', // 视频
        'table', // 表格
        'code', // 插入代码
        'splitLine' // 分割线
      ]
    }
  },
  model: {
    prop: 'value', // v-model 接收的值=props的message属性接收的值
    event: 'change' // v-model 发生变化时触发的方法
  },
  props: {
    value: { // 富文本数据
      type: String,
      default: ''
    },
    isClear: {
      type: Boolean,
      default: false
    },
    placeholder: { // placeholder 提示文字
      type: String,
      default: '请输入...'
    }

  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear()
        this.info_ = null
      }
    },
    value: function (value) {
      // 如果值不相等再进行赋值，避免多次赋值造成闪烁
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    }
    // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
  },
  created() {
  },
  mounted() {
    this.seteditor()
    // 使用 editor.txt.html() 获取 html 。
    this.editor.txt.html(this.value)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    seteditor() {
      // 创建编辑器
      this.editor = new E(this.$refs.editor)
      this.editor.config.uploadImgShowBase64 = true // 使用 base64 格式保存图片。即，可选择本地图片，编辑器用 base64 格式显示图片。
      this.editor.config.uploadImgMaxSize = 1 * 1024 * 1024 // 将图片大小限制为 1MB
      this.editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 1 张图片
      // 自定义 onchange 触发的延迟时间，默认为 200 ms
      this.editor.config.onchangeTimeout = 1000 // 单位 ms
      this.editor.config.menus = this.menu // 自定义菜单
      this.editor.config.placeholder = this.placeholder // placeholder 提示文字
      this.editor.config.onchange = (html) => {
        this.info_ = html // 绑定当前逐渐地值
        this.$emit('change', this.info_) // 将内容同步到父组件中
      }
      // 创建富文本编辑器
      this.editor.create()
    }
  }
}
</script>

<style >
.editor {
  width: 100%;
  height: 410px;
  margin: auto;
}
</style>

4、使用组件

主页面引用步骤3组件

使用组件

      <!--新增表单-->
      <el-dialog :title="titleName"  center :visible.sync="dialogVisible" width="65%" top="10px">
        <el-form  style="height: 550px" :model="addData" label-width="80px" :rules="rules3" ref="addData">
          <el-form-item label="名称：" prop="name">
            <el-input v-model="addData.name"></el-input>
          </el-form-item>
          <el-form-item label="内容：" :required="true">
            <wang-editor v-model="addData.content"  @change="changeText">
            </wang-editor>
          </el-form-item>
        </el-form>
        <div align="center" style="margin-top: 30px">
          <el-button @click="dialogVisible=false;addData.content ='';addData.name ='';addData.remark ='';">取消</el-button>
          <el-button v-if="titleName=='新增'" type="primary" @click="insertData('addData','1')">确定</el-button>
          <el-button v-if="titleName=='编辑'" type="primary" @click="insertData('addData','2')">确定</el-button>
        </div>
      </el-dialog>

名称、内容变量定义：

addData: {
  id:'',
  name: '',
  content: '',
  submitPerson:'',
  remark:''
},

例如上面代码逻辑是，点击新增弹出富文本编辑弹框，效果如下：

可进行富文本内容编写，编辑和新增一样页面逻辑，不做赘述。

5、详情展示

5.1 富文本只读展示

此方式会按照之前格式展示效果，通过属性设置成只读模式，对于表格效果很好。

      <el-dialog title="详情" center :visible.sync="dialogVisible2" width="65%" top="10px">
        <el-form :model="addData2" label-width="80px">
          <el-form-item label="名称：">
            <el-input :disabled="true" v-model="addData2.name"></el-input>
          </el-form-item>
          <el-form-item label="内容：">
            <wang-editor class="readOnlyEditor" v-model="addData2.content"></wang-editor>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" align="center" style="margin-top: 5px">
          <el-button type="primary" @click="dialogVisible2=false">关闭</el-button>
        </div>
      </el-dialog>




<style scoped>
  .readOnlyEditor {
    pointer-events: none; /* 阻止鼠标事件 */
  }
</style>

5.2 只做内容展示

此方式适合文字描述类文本，对于表格效果不是很好，具体使用哪种看需求。

      <el-dialog title="详情" center :visible.sync="dialogVisible2" width="65%" top="10px">
        <el-form :model="addData2" label-width="80px">
          <el-form-item label="名称：">
            <el-input :disabled="true" v-model="addData2.name"></el-input>
          </el-form-item>
          <el-form-item label="内容：">
            <div  style="max-height:1500px;min-height: 500px;overflow-y:auto;font-size: 16px !important;font-weight: normal!important;"
                  v-html="addData2.content">
            </div>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" align="center" style="margin-top: 5px">
          <el-button type="primary" @click="dialogVisible2=false">关闭</el-button>
        </div>
      </el-dialog>