本文记录`vue`使用 `tinymce-vue`

首先安装依赖

npm i @tinymce/tinymce-vue -S

注：本文章记录时安装版本为4.0.0
"@tinymce/tinymce-vue": "^4.0.0",
vue版本为3.0

"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"

封装组件


<template>
  <Editor :init="init" v-model="value" />
</template>

<script>
import Editor from "@tinymce/tinymce-vue"; // 引入tinymce-vue
import http from "@/http"; // 引入封装的ajax 用于上传图片
export default {
  name: "app",
  components: {
    Editor: Editor
  },
  props: {
    content: { // 组件属性 绑定的富文本内容
      type: String,
      default: ""
    }
  },
  computed: { // 用来获取和更新组件外部的值
    value: {
      get() {
        return this.content;
      },
      set(newVal) {
        this.$emit("update:content", newVal);
      }
    }
  },
  data() {
    return {
      init: {
        // 语言
        language: "zh_CN",
        // 插件
        plugins:
          "autolink autosave save directionality code visualblocks visualchars fullscreen  link table hr pagebreak nonbreaking  toc insertdatetime advlist lists wordcount image imagetools textpattern noneditable quickbars emoticons",
        // 不展示菜单栏
        menubar: false,
        // 图片上传
        automatic_uploads: true,
        // 上传回调
        images_upload_handler: function(blobInfo, success) {
          let formData = new FormData();
          formData.append("file", blobInfo.blob(), blobInfo.filename());
          http({
            url: "/upload/uploadFile",
            method: "post",
            data: formData
          }).then(res => {
            success(res.data);
          });
        },
        // 工具栏
        toolbar:
          "undo redo  bold italic underline strikethrough fontselect fontsizeselect formatselect alignleft aligncenter alignright alignjustify  outdent indent numlist bullist forecolor backcolor removeformat pagebreak  emoticons fullscreen image link  ",
        // 使用import引入
        importcss_append: true,
        // 展示技术支持
        branding: false,
        height: 400,
        // 工具栏换行
        toolbar_mode: "wrap",
        contextmenu: "link image imagetools table"
      }
    };
  }
};
</script>

<style lang="less" scoped></style>

vue-富文本，接入tinymce-vue

本文记录vue使用 tinymce-vue

首先安装依赖

封装组件

本文记录`vue`使用 `tinymce-vue`