tinymce富文本使用

封装好的代码 复制直接使用

<template>
  <div class="tinymce-box">
    <Editor v-model="myValue" :init="init" :disabled="disabled" class="sss" @click="onClick"> </Editor>
  </div>
</template>

<script setup>
// 文档 http://tinymce.ax-z.cn/
// 引入组件
import tinymce from 'tinymce/tinymce'; // tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue';
// 引入富文本编辑器主题的js和css
import 'tinymce/skins/content/default/content.css';
import 'tinymce/themes/silver/theme.min.js';
import 'tinymce/icons/default/icons'; // 解决了icons.js 报错Unexpected token '<'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image'; // 插入上传图片插件
import 'tinymce/plugins/media'; // 插入视频插件
import 'tinymce/plugins/table'; // 插入表格插件
import 'tinymce/plugins/lists'; // 列表插件
import 'tinymce/plugins/wordcount'; // 字数统计插件
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/help';
import { defineProps, ref, defineEmits, watch, toRef, computed } from 'vue';

const { plugins, toolbar, modelValue, minHeight } = defineProps({
  // 默认的富文本内容
  modelValue: {
    type: String,
    default: '',
  },
  // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
  // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
  baseUrl: {
    type: String,
    default: window.location.origin ? window.location.origin : '',
    // default: '/111',
  },
  // 禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  plugins: {
    type: [String, Array],
    default: 'link lists  code table wordcount  preview fullscreen', // help
  },
  toolbar: {
    type: [String, Array],
    default:
      'bold italic underline strikethrough | fontsizeselect | formatselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | undo redo | link unlink code lists table  | removeformat | fullscreen preview',
  },
  minHeight: {
    type: [String, Number],
    default: 360,
  },
});
const myValue = toRef(modelValue);
const init = ref({
  // language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
  // language_url: new URL('../../public/tinymce/langs/zh_CN.js', import.meta.url).href,
  language_url: '/public/tinymce/langs/zh_CN.js',
  language: 'zh_CN',
  // skin_url: new URL('../../public/tinymce/skins/ui/oxide', import.meta.url).href,
  // model_url: new URL('../../public/tinymce/models/dom/model.js', import.meta.url).href,
  model_url: `/public/tinymce/models/dom/model.js`,
  skin_url: `/public/tinymce/skins/ui/oxide`,
  // skin_url: 'tinymce/skins/ui/oxide-dark', // 暗色系
  content_css: '/public/tinymce/skins/content/document/content.css', //（为编辑区指定css文件）,加上就不显示字数统计了
  convert_urls: false,
  min_height: minHeight,
  max_height: 780,

  // content_css: `${this.baseUrl}tinymce/skins/content/default/content.css`,
  // （指定需加载的插件）
  plugins: plugins,
  toolbar: toolbar, // （自定义工具栏）

  statusbar: true, // 底部的状态栏
  menubar: 'file edit insert view format table tools help', // （1级菜单）最上方的菜单
  branding: false, // （隐藏右下角技术支持）水印“Powered by TinyMCE”
  // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
  // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
  images_upload_handler: (blobInfo, success, failure) => {
    const img = 'data:image/jpeg;base64,' + blobInfo.base64();

    success(img);
    console.log(failure, blobInfo);
  },
});

const emit = defineEmits(['update:modelValue', 'handleClick']);

const onClick = (e) => {
  emit('handleClick', e, tinymce);
};

watch(myValue, (val) => {
  emit('update:modelValue', val);
});
</script>

<style scoped></style>

使用

<Tinymce v-model:modelValue="formInline.content" style="width: 100%"></Tinymce>