vue+element ui项目总结点富文本编辑器 vue-wangeditor

Posted 2021-01-26 lhl66

1.参考 https://www.npmjs.com/package/vue-wangeditor 使用该富文本编辑器

<template>
  <div class="egit_box">
    <p>富文本编辑器试用</p>
    <div class="text_box" style="width: 100%;display: flex;justify-content: center;">
      <vue-egdit ref="editor" id="editor" v-model="initContent" :menus="meaus"></vue-egdit>
    </div>
    <div class="btn" style="margin-top: 30px;">
      <el-button type="primary" @click="setContent">设置富文本内容</el-button>
      <el-button type="primary" @click="getContent">获取富文本内容</el-button>
      <el-button type="primary" @click="goNextPage">跳转页面</el-button>
    </div>
  </div>
</template>
<script>
//参考文档 https://www.npmjs.com/package/vue-wangeditor
import vueEgdit from ‘vue-wangeditor‘
export default {
  components: {
    vueEgdit
  },
  data() {
    return {
      initContent: ‘初始化富文本内容‘, //富文本催办邮件内容
      meaus: [
        ‘source‘, // 源码模式
        ‘|‘,
        ‘bold‘, // 粗体
        ‘underline‘, // 下划线
        ‘italic‘, // 斜体
        ‘strikethrough‘, // 中线
        ‘eraser‘, // 清空格式
        ‘forecolor‘, // 文字颜色
        ‘bgcolor‘, // 背景颜色
        ‘|‘,
        ‘quote‘, // 引用
        ‘fontfamily‘, // 字体
        ‘fontsize‘, // 字号
        ‘head‘, // 标题
        ‘unorderlist‘, // 无序列表
        ‘orderlist‘, // 有序列表
        ‘alignleft‘, // 左对齐
        ‘aligncenter‘, // 居中
        ‘alignright‘, // 右对齐
        ‘|‘,
        ‘link‘, // 链接
        ‘unlink‘, // 取消链接
        ‘table‘, // 表格
        ‘emotion‘, // 表情
        ‘|‘,
        ‘img‘, // 图片
        ‘video‘, // 视频
        ‘insertcode‘, // 插入代码
        ‘|‘,
        ‘undo‘, // 撤销
        ‘redo‘, // 重做
        ‘fullscreen‘ // 全屏
      ]
    }
  },
  mounted() {
    console.log(this.$refs.editor, ‘富文本实例‘)
  },
  methods: {
    setContent() {
      this.initContent = ‘设置好的内容‘;
      this.$refs.editor.sethtml(this.initContent) //如设置：后台返回来的固定模板
      console.log(this.initContent, ‘设置编辑器内容‘)
    },
    getContent() {
      this.initContent = this.$refs.editor.getHtml(this.initContent);
      console.log(this.initContent, ‘获取编辑器当前内容的html代码片段‘)
    },
    //vue 跳转
    goNextPage() {
      this.$router.push({
        name: ‘testEgdit‘,
      })
    }
  }
}

</script>