二十四、Vue插件富文本编译器vue2-editor

下载vue2-editor

 

 

 组件内使用vue2-editor插件

<template>
  <div class="EditAndAdd">
    <div class="form">
      <el-form label-width="120px" style="margin-top: 20px; color: black">
        <el-form-item label="文章标题"
          ><div class="inputtitle">
            <el-input v-model="model.title"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="文章内容">
          <div class="edit" style="line-height: 0px">
            <vue-editor
              v-model="model.content"
              usecustomImageHandler
              @image-added="handleImageAdded"
            ></vue-editor>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  name: "EditAndAdd",
  data() {
    return {
      model: { title: "", content: "", time: "", synopsis: "" },
    
    };
  },
  components: {
    VueEditor,
  },
  methods: {
   //上传图片触发事件
    handleImageAdded: function (file, Editor, cursorLocation, resetUploader) {
  
    },
    //过滤出中文
    GetChinese(strValue) {
      if (strValue != null && strValue != "") {
        var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]+/g;
        return strValue.replace(reg, "");
      } else return "";
    },
    onSubmit() {
      if (this.model.title != "" && this.model.content != "") {

          console.log(this.model.content);

      } else {
        this.$message.error("错误：题目或内容为空！");
      }
    },
  },
 

 

其他组件输出富文本编译器内容（mdContent为富文本内容）

      <div>
        <el-col class="ql-snow">
          <div class="ql-editor" v-html="mdContent"></div>
        </el-col>
      </div>