vue3 + ts + tinymce 简单使用~

最新推荐文章于 2025-05-29 08:18:31 发布
原创最新推荐文章于 2025-05-29 08:18:31 发布 · 置顶 · 1.6k 阅读
CC 4.0 BY-SA版权
文章标签：
<template>
  <editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId" ref="editorRef"></editor>
</template>

<script setup lang="ts">
//JS部分
//在js中引入所需的主题和组件
import tinymce from "tinymce/tinymce";
import "tinymce/skins/content/default/content.css";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/themes/silver/theme";
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标


//在TinyMce.vue中接着引入相关插件
import "tinymce/icons/default/icons";  //自定义icon  操作图标
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/link";
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/code"; // 源码
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/preview";
import '@/utils/letterspacing'  // 间距插件
import { uploadImg } from "@/api/understand";
const emits = defineEmits(["getContent"]);
//这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
const props = defineProps({
  value: {
    type: String,
    default: () => {
      return "";
    },
  },
  baseUrl: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  plugins: {
    type: [String, Array],
    default:
      "link lists image code table wordcount preview fullscreen media searchreplace letterspacing",
    // default:
    //   'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs',
  }, //必填
  toolbar: {
    type: [String, Array],
    default:
      "undo redo  | bold italic underline | fontselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bdmap indent2em lineheight formatpainter axupimgs  image letterspacing| media| searchreplace  | bullist numlist | ",
    // default:
    //   ' cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    // styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    // table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
  }, //必填
});
//用于接收外部传递进来的富文本
let win: any = window;
const editorRef = ref(null);
const myValue = ref(props.value);
const tinymceId = ref(
  "vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + "")
);
//定义一个对象 init初始化
const init = reactive({
  selector: "#" + tinymceId.value, //富文本编辑器的id,
  // icons_url: '/项目名/icons/custom/icons.js', //自定义图标
  // icons: 'custom',
  language_url: "/项目名/langs/zh-Hans.js",
  language: "zh-Hans",
  skin_url: "/项目名/skins/ui/oxide",
  height: 500, //编辑器高度
  branding: false, //是否禁用“Powered by TinyMCE”
  menubar: true, //顶部菜单栏显示
  image_dimensions: true, //去除宽高属性
  plugins: props.plugins, //这里的数据是在props里面就定义好了的
  toolbar: props.toolbar, //这里的数据是在props里面就定义好了的
  toolbar_mode: 'sliding',
  font_formats:
    "Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;", //字体
  fontsize_formats: "11px 12px 14px 16px 18px 24px 30px 36px 48px 64px 72px", //文字大小
  // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
  paste_webkit_styles: "all",
  paste_merge_formats: true,
  nonbreaking_force_tab: false,
  paste_auto_cleanup_on_paste: false,
  file_picker_types: "media",
  setup: function (editor: any) {
    editor.ui.registry.addIcon(
      "image",
      `<svg t="1664002320321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4420" width="24" height="24"><path d="M125.9 185h772.2v653.9H125.9z" fill="#1F53CC" p-id="4421"></path><path d="M164.7 217.2h694.6v516.7H164.7z" fill="#FECD44" p-id="4422"></path><path d="M458.9 734l-8.6-43.8-101.5-102.8-135 146.6z" fill="#FC355D" p-id="4423"></path><path d="M306.9 348.7m-66.7 0a66.7 66.7 0 1 0 133.4 0 66.7 66.7 0 1 0-133.4 0Z" fill="#FFFFFF" p-id="4424"></path><path d="M384.6 734h474.7V608.8L687.8 400.1z" fill="#FC355D" p-id="4425"></path><path d="M422.5 662l-37.9 72 52.1-57.5z" fill="#BF2847" p-id="4426"></path><path d="M302.5 778.9h418.9v16.7H302.5z" fill="#00F0D4" p-id="4427"></path></svg>`
    );
  },
  content_css: "/web-official-website-manage/skins/content/default/content.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
  //图片上传
  // images_upload_url: "/localFile/uploadFile",
  images_upload_handler: (blobInfo: any, progress: any, success: any) =>
    new Promise(async (resolve, reject) => {
      if (blobInfo.blob().size / 1024 / 1024 > 2) {
        reject({ message: "上传失败，图片大小请控制在 2M 以内", remove: true });
        return;
      } else {
        const ph = win.configs.IMG_URL;
        let params = new FormData();
        params.append("file", blobInfo.blob());
        const res: any = await uploadImg(params);
        if (res.code == 200) {
          progress(ph + res.data); //上传成功，在成功函数里填入图片路径
        } else {
          reject("HTTP Error: 上传失败" + res.data.code);
          return;
        }
      }
    }),

  // 文件上传  需要的话添加
  // 上传视频
  file_picker_callback: (callback: any, value: any, meta: any) => {
    if (meta.filetype == 'media') {
      // callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' });
      let input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', '.mp3, .mp4');
      input.click();
      input.onchange = function (v: any) {
        // console.log(v.target.files[0]); //视频文件信息   上传即可    规定视频格式大小需重写逻辑  获取视频时长
      }
    }
  }
});
//监听外部传递进来的的数据变化
watch(
  () => props.value,
  () => {
    myValue.value = props.value;
    emits("getContent", myValue.value);
  }
);
//监听富文本中的数据变化
watch(
  () => myValue.value,
  () => {
    emits("getContent", myValue.value);
  }
);

//在onMounted中初始化编辑器
onMounted(() => {
  tinymce.init({});
});
</script>
<style>
.tox-tinymce {
  width: 100%;
  touch-action: none !important;
}
</style>
开箱即用 , 封装一个组件直接使用即可
注释的配置可以放开看一下都是什么我用的都是我需要的
上传视频的话参考官网我上面也有写
遇到一个问题,有小可爱知道的话帮我一下. 需要限制字数超过之后便无法输入需求我有找到插件但是他无法识别回车个别特殊符号感谢~