TinyMCE 6 （Vue 3 + 阿里云上传）

凌晨六点半~

已于 2023-10-11 09:18:50 修改

阅读量936

点赞数 1

分类专栏： TinyMCE 文章标签： vue.js 前端 javascript

于 2023-10-09 13:36:00 首次发布

本文链接：https://blog.csdn.net/weixin_67609878/article/details/133697988

版权

TinyMCE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

TinyMCE编辑器简介

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。

话不多说直接干货：：

TinyMCE安装：

安装 tinymce

npm install tinymce -S

安装 tinymce - vue

npm install @tinymce/tinymce-vue -S

组件安装完之后，在public目录下新建文件夹tinymce

找到node_modules文件夹下的tinymce，将tinymce文件夹中的 icons，plugins，skins，themes，tinymce.min.js 文件统统复制丢进去

langs文件内为中文包需下载（官方语言包地址：zh-Hans.js Language Packages | Trusted Rich Text Editor | TinyMCE）

下载地址在最下方如图

下载完成后丢入文件

TinyMCE使用：

引入插件

import Editor from "@tinymce/tinymce-vue";

使用

<template>
  <editor v-model="content" tag-name="div" :init="init" />
</template>

引入所需要的富文本编辑器内部组件

import "tinymce/icons/default"; // 引用图标文件
// import "tinymce/skins/content/default/content.css";
import "tinymce/themes/silver";
import "tinymce/icons/default/icons";
import "tinymce/models/dom";
// tinymce插件可按自己的需要进行导入
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/advlist";
import "tinymce/plugins/anchor";
import "tinymce/plugins/autolink";
import "tinymce/plugins/autoresize";
import "tinymce/plugins/autosave";
import "tinymce/plugins/charmap"; // 特殊字符
import "tinymce/plugins/code"; // 查看源码
import "tinymce/plugins/codesample"; // 插入代码
import "tinymce/plugins/directionality";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/importcss"; //图片工具
import "tinymce/plugins/insertdatetime"; //时间插入
import "tinymce/plugins/link";
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/pagebreak"; //分页
import "tinymce/plugins/preview"; // 预览
import "tinymce/plugins/quickbars";
import "tinymce/plugins/save"; // 保存
import "tinymce/plugins/searchreplace"; //查询替换
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/template"; //插入模板
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/wordcount"; // 字数统计插件
// import "tinymce/plugins/print";
// import "tinymce/plugins/hr";
// import "tinymce/plugins/imagetools";
// import "tinymce/plugins/textpattern";
import "tinymce/themes/silver/theme"; // 引用主题文件
import "tinymce/icons/default"; // 引用图标文件

TinyMCE的init配置

const init = {
  language_url: "/tinymce/langs/zh-Hans.js", // 中文语言包路径
  language: "zh-Hans",
  skin_url: "/tinymce/skins/ui/oxide", // 编辑器皮肤样式
  content_css: "/tinymce/skins/content/default/content.min.css",
  //   menubar: false, // 隐藏菜单栏
  content_editable: true, //其他配置项
  autoresize_bottom_margin: 50,//初始化时指定编辑器集底部的大小
  forced_root_block: "",//调整用于包装非块元素和文本节点的默认块元素  默认为p 可写入 div span 等
  max_height: 800,
  min_height: 650,
  // height: 320,
  branding: false,//禁用状态栏中显示的“由 Powered by Tiny”链接进行产品归属
  toolbar_mode: "none",//扩展工具栏以容纳溢出的工具栏按钮
  plugins:
  'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker formatpainter pageembed charmap mentions quickbars linkchecker advtable footnotes mergetags autocorrect typography advtemplate',
  toolbar:
    "code undo redo | aidialog aishortcuts | blocks fontsizeinput | align numlist bullist | forecolor backcolor bold italic underline strikethrough anchor lineheight | removeformat selectall image",
  content_style: "p {margin: 5px 0; font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;color: #555555}",//自定义 CSS 样式
  font_size_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",//覆盖下拉工具栏按钮和菜单项中显示的字体大小
  font_family_formats:
    "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方= PingFang SC, Microsoft YaHei, sans- serif; 宋体 = simsun, serif; 仿宋体 = FangSong, serif; 黑体 = SimHei, sans - serif; Arial = arial, helvetica, sans - serif;Arial Black = arial black, avant garde;Book Antiqua = book antiqua, palatino; ",//下拉工具栏按钮和菜单项中显示的字体
  elementpath: false,//禁用编辑器底部状态栏
  resize: false, // 禁止改变大小
  statusbar: false, // 隐藏底部状态栏
  powerpaste_allow_local_images: true,//不使用数据 URI 的 Base64 编码图像
  autosave_ask_before_unload: false,//关闭当前窗口时是否应提示用户告知他们有未保存的更改
  // images_upload_url: "https://project-homedo.oss-cn-shanghai.aliyuncs.com/",
  images_upload_handler: (blobInfo) =>
    //自定义上传到阿里云
    new Promise(async (resolve, reject) => {
      const obj = await selectHotTopic();
      const name =
        obj.data.key + "_" + String(blobInfo.filename()).replace(/&/g, "");
      console.log("看一眼接口返回的参", obj);
      var formData = new FormData();
      formData.append("name", name); // 添加参数 key
      formData.append("key", name); // 添加参数 name
      formData.append("policy", obj.data.policy); // 添加参数 name
      formData.append("OSSAccessKeyId", obj.data.OSSAccessKeyId); // 添加参数 name
      formData.append("success_action_status", 200); // 添加参数 name
      formData.append("signature", obj.data.signature); // 添加参数 name
      formData.append("file", blobInfo.blob()); // 添加图片文件
      try {
        await uploadFile(formData);
        resolve("https://project-homedo.oss-cn-shanghai.aliyuncs.com/" + name);
      } catch (error) {
        reject("上传失败");
      }
    }),
};

TinyMCE需初始化

tinymce.init; // 初始化

完整代码参考：

<template>
  <editor v-model="content" tag-name="div" :init="init" />
</template>
<script setup>
import { selectHotTopic, uploadFile } from "../../apis/uploading/index";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
// import { ref, watch } from "vue"
import "tinymce/icons/default"; // 引用图标文件
// import "tinymce/skins/content/default/content.css";
import "tinymce/themes/silver";
import "tinymce/icons/default/icons";
import "tinymce/models/dom";
// tinymce插件可按自己的需要进行导入
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/advlist";
import "tinymce/plugins/anchor";
import "tinymce/plugins/autolink";
import "tinymce/plugins/autoresize";
import "tinymce/plugins/autosave";
import "tinymce/plugins/charmap"; // 特殊字符
import "tinymce/plugins/code"; // 查看源码
import "tinymce/plugins/codesample"; // 插入代码
import "tinymce/plugins/directionality";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help";
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/importcss"; //图片工具
import "tinymce/plugins/insertdatetime"; //时间插入
import "tinymce/plugins/link";
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/pagebreak"; //分页
import "tinymce/plugins/preview"; // 预览
import "tinymce/plugins/quickbars";
import "tinymce/plugins/save"; // 保存
import "tinymce/plugins/searchreplace"; //查询替换
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/template"; //插入模板
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/wordcount"; // 字数统计插件
// import "tinymce/plugins/print";
// import "tinymce/plugins/hr";
// import "tinymce/plugins/imagetools";
// import "tinymce/plugins/textpattern";
import "tinymce/themes/silver/theme"; // 引用主题文件
import "tinymce/icons/default"; // 引用图标文件

// v-model
const props = defineProps({
  modelValue: String,
});
const emit = defineEmits(["update:modelValue"]);
// 配置
const init = {
  language_url: "/tinymce/langs/zh-Hans.js", // 中文语言包路径
  language: "zh-Hans",
  skin_url: "/tinymce/skins/ui/oxide", // 编辑器皮肤样式
  content_css: "/tinymce/skins/content/default/content.min.css",
  //   menubar: false, // 隐藏菜单栏
  content_editable: true, //其他配置项
  autoresize_bottom_margin: 50,//初始化时指定编辑器集底部的大小
  forced_root_block: "",//调整用于包装非块元素和文本节点的默认块元素  默认为p 可写入 div span 等
  max_height: 800,
  min_height: 650,
  // height: 320,
  branding: false,//禁用状态栏中显示的“由 Powered by Tiny”链接进行产品归属
  toolbar_mode: "none",//扩展工具栏以容纳溢出的工具栏按钮
  plugins:
  'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker formatpainter pageembed charmap mentions quickbars linkchecker advtable footnotes mergetags autocorrect typography advtemplate',
  toolbar:
    "code undo redo | aidialog aishortcuts | blocks fontsizeinput | align numlist bullist | forecolor backcolor bold italic underline strikethrough anchor lineheight | removeformat selectall image",
  content_style: "p {margin: 5px 0; font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;color: #555555}",//自定义 CSS 样式
  font_size_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",//覆盖下拉工具栏按钮和菜单项中显示的字体大小
  font_family_formats:
    "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方= PingFang SC, Microsoft YaHei, sans- serif; 宋体 = simsun, serif; 仿宋体 = FangSong, serif; 黑体 = SimHei, sans - serif; Arial = arial, helvetica, sans - serif;Arial Black = arial black, avant garde;Book Antiqua = book antiqua, palatino; ",//下拉工具栏按钮和菜单项中显示的字体
  elementpath: false,//禁用编辑器底部状态栏
  resize: false, // 禁止改变大小
  statusbar: false, // 隐藏底部状态栏
  powerpaste_allow_local_images: true,//不使用数据 URI 的 Base64 编码图像
  autosave_ask_before_unload: false,//关闭当前窗口时是否应提示用户告知他们有未保存的更改
  // images_upload_url: "https://project-homedo.oss-cn-shanghai.aliyuncs.com/",
  images_upload_handler: (blobInfo) =>
    //自定义上传到阿里云
    new Promise(async (resolve, reject) => {
      const obj = await selectHotTopic();
      const name =
        obj.data.key + "_" + String(blobInfo.filename()).replace(/&/g, "");
      console.log("看一眼接口返回的参", obj);
      var formData = new FormData();
      formData.append("name", name); // 添加参数 key
      formData.append("key", name); // 添加参数 name
      formData.append("policy", obj.data.policy); // 添加参数 name
      formData.append("OSSAccessKeyId", obj.data.OSSAccessKeyId); // 添加参数 name
      formData.append("success_action_status", 200); // 添加参数 name
      formData.append("signature", obj.data.signature); // 添加参数 name
      formData.append("file", blobInfo.blob()); // 添加图片文件
      try {
        await uploadFile(formData);
        resolve("https://project-homedo.oss-cn-shanghai.aliyuncs.com/" + name);
      } catch (error) {
        reject("上传失败");
      }
    }),
};
const content = ref(props.modelValue);
tinymce.init; // 初始化

watch(
  () => content.value,
  (newVal) => {
    emit("update:modelValue", newVal);
  },
  { deep: true }
);
</script>
<style>
.tox-tinymce-aux {
  z-index: 9999 !important;
}
.tox-promotion-link {
  display: none !important;
}
.tox-tinymce-aux {
  width: 0px;
}
</style>

效果展示：

官方文档参考地址：TinyMCE 6

凌晨六点半~

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
TinyMCE 6 （Vue 3 + 阿里云上传）

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费
复制链接

扫一扫