vue3中使用tinymce

最新推荐文章于 2024-09-20 14:39:27 发布

reembarkation

最新推荐文章于 2024-09-20 14:39:27 发布

阅读量800

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/reembarkation/article/details/139499796

版权

1.引入必要组件：

npm install --save tinymce "@tinymce/tinymce-vue"
npm install --save "@types/tinymce"

2.页面中引入：

import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue"; // 引入组件
import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import "tinymce/themes/silver/theme";
import "tinymce/icons/default";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/quickbars";
import "tinymce/plugins/preview";

// 引入富文本编辑器主题的js和css
import "tinymce/themes/silver/theme.min.js";

3.页面

<Editor  v-model="tinymceHtml" :init="initData" />

4. init

const initData = {
  //初始化数据
  selector: "textarea",
  skin_url: "/public/tinymce/skins/ui/oxide",
  content_css:"/public/tinymce/skins/content/default/content.css",
  // images_upload_url: uploadUrl,
  images_upload_base_path:"",
  height: 350, // 限制高度
  min_height: 200,
  statusbar: false,
  object_resizing: false,
  image_description: false,
  image_dimensions: false, // 禁止操作图片
  plugins: "link lists image code table wordcount fullscreen preview", // 富文本插件
  font_size_formats: "8px 10px 12px 14px 16px 18px 24px 36px 48px 128px",
  font_family_formats:
    "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif",
  toolbar:
    "code undo redo fontfamily fontsize fontname bold italic underline strikethrough removeformat | fontsizeselect | forecolor | alignleft aligncenter alignright | fullscreen | image | link | preview |",
  branding: false, // //是否禁用“Powered by TinyMCE”
  menubar: false, //顶部菜单栏显示
  // menubar: "file edit view format table",
  paste_data_images: false, // 禁止粘贴图片
  promotion: false
};