Vue之引用富文本编辑器

1.在package.json加上并安装依赖

"devDependencies": {
  "@jsdawn/vue3-tinymce": "^1.1.7",
}

2.在页面中引入

import Vue3Tinymce from "@jsdawn/vue3-tinymce";

3.使用

<vue3-tinymce
  v-model="item.blockDataObj.text"
  :setting="setting"
/>

4.配置

const setting = reactive({
  height: 400,
  toolbar:
    "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
  toolbar_drawer: "sliding",
  quickbars_selection_toolbar:
    "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
  plugins: "link image media table lists fullscreen quickbars",
  fontsize_formats: "12px 14px 16px 18px",
  default_link_target: "_blank",
  link_title: false,
  nonbreaking_force_tab: true,
  // 以中文简体为例
  language: "zh_CN",
  language_url:
    "https://unpkg.com/@jsdawn/vue3-tinymce@1.1.6/dist/tinymce/langs/zh_CN.js",
});

可用于手机端。