Tinymce6+tinymce-vue5+vue3

相关包

 "tinymce": "^6.7.0"
 "@tinymce/tinymce-vue": "^5.1.1"
 "element-plus": "^2.4.2"

复制icons、skins

安装完成后，在 public文件夹 下创建 tinymce文件夹，然后在node_modules下找到 tinymce，注意不是 @tinymce，复制 icons、skins 文件夹到 public/tinymce6 下

下载中文语言包

下载地址：https://www.tiny.cloud/get-tiny/language-packages/，下载 zh_CN，下载后，把解压后的 langs文件夹 放到 public/tinymce6 下

组件代码

<template>
  <div>
    <Editor v-model="myValue" :init="init" :disabled="disabled"/>
    <input type="file" hidden :id="id" :accept="imgAccept"/>
    <div class="oe-editor-del-btn" v-if="showDel">
      <img src="../assets/img/editor_del.png" alt="">
    </div>
    <el-dialog title="正在上传中..." :modelValue="progressShow" :close-on-click-modal="false"
               :close-on-press-escape="false" :show-close="false" width="20%">
      <div style="text-align: center;">
        <span v-if="currentFile.name">{{ currentFile.name }}</span>
        <el-progress :percentage="percentageShow"/>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {computed, onMounted, reactive, ref} from "vue"
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default'
import 'tinymce/models/dom'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/code'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/quickbars'
import 'tinymce/plugins/accordion'
import {ElDialog, ElMessage, ElProgress} from "element-plus";

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  id: {
    type: String,
    default: 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
  },
  height: {
    type: Number,
    default: 250
  },
  width: {
    type: String,
    default: 'auto'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  showDel: {
    type: Boolean,
    default: false
  }
})
const progressShow = ref(false)
const currentFile = ref({})
const currentPath = ref()
const percentageShow = ref()
const bufferLength = 1024 * 1024;
const emits = defineEmits(['update:modelValue'])
const myValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emits('update:modelValue', value)
  }
})
const oldValue = ref()
const imgAccept = ref('.bmp,.jpg,.jpeg,.png,.gif,.svg')

const example_image_upload_handler = (blobInfo, progress) => new Promise(async (resolve, reject) => {
  progressShow.value = true
  let file = await blobToFile(blobInfo.blob(), blobInfo.filename())
  //文件上传处理
})

const setup = (editor) => {
  editor.ui.registry.addButton('imageUpload', {
    tooltip: '图片',
    icon: 'image',
    onAction: (api) => {
      //点击按钮后执行
      oldValue.value = props.modelValue
      const input = document.getElementById(props.id)
      input.click();
      input.onchange = async function () {
        let file = input.files[0]
        let fd = new FormData()
        fd.append('file', file)
        if (!imgAccept.value.includes(file.name.substring(file.name.indexOf('.')).toLocaleLowerCase())) {
          ElMessage.warning('请选择图片上传')
          input.value = ''
          return
        }

        //文件上传处理
      }
    }
  });
}

const init = reactive({
  selector: `#${props.id}`,
  content_style: "p {margin: 0; border:0; padding: 0;}",
  content_css: '/tinymce/skins/content/default/content.min.css',
  language_url: '/tinymce/langs/zh-Hans.js', // https://www.tiny.cloud/get-tiny/language-packages/
  language: 'zh-Hans',
  skin_url: '/tinymce/skins/ui/oxide',
  height: props.height,
  promotion: false, //隐藏右上角upgrade按钮
  branding: false, //隐藏右下角由TINY驱动
  menubar: false, // 是否隐藏顶部菜单
  contextmenu: false,
  // menubar: 'file edit view insert format tools table help',
  // contextmenu_never_use_native: true, //防止浏览器上下文菜单出现在编辑器中
  elementpath: false, //隐藏底栏的元素路径（隐藏右下角元素显示）
  object_resizing: true,//是否允许调整图像大小.
  /*toolbar: "undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough " +
    "| align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat " +
    "| charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",*/
  toolbar: "code fullscreen | undo redo | accordion | blocks fontfamily fontsize | bold italic underline strikethrough " +
    "| alignleft aligncenter alignright alignjustify numlist bullist | link | table | lineheight outdent indent| forecolor backcolor removeformat blockquote subscript superscript" +
    "| charmap | preview | print | pagebreak anchor | imageUpload kityformula-editor",
  plugins: 'preview searchreplace autolink directionality code visualblocks visualchars ' +
    'fullscreen link table charmap pagebreak nonbreaking anchor insertdatetime ' +
    'advlist lists wordcount charmap quickbars accordion pasteuploadimage kityformula-editor',
  image_advtab: true,
  image_caption: true,
  valid_elements: '*[*]', // 允许所有标签和属性
  // extended_valid_elements: 'custom-tag[custom-attribute]', // 允许自定义标签和属性
  // paste_data_images: false, //此选项指定是否应从粘贴的内容中删除图像
  paste_webkit_styles: 'all', //此选项允许您指定粘贴到 WebKit 中时要保留的样式 'none' 或者 'all'
  // paste_merge_formats: true, //此选项在粘贴内容时启用合并格式功能。这将合并相同的文本格式元素，以减少生成的 HTML 元素的数量
  advlist_bullet_styles: 'default,circle,disc,square',
  // advlist_number_styles: 'default,lower-alpha,lower-greek,lower-roman,upper-alpha,upper-roman',
  link_default_target: '_blank',
  link_title: false, //此选项允许您禁用对话框中的链接输入字段
  nonbreaking_force_tab: true, //tab键插入三个&nbsp;
  relative_urls: false,
  convert_urls: false, //设置为false，禁止将编辑器中的图片地址自动转为相对路径
  toolbar_mode: 'sliding', //'floating''sliding''scrolling''wrap'  https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/
  images_upload_handler: example_image_upload_handler,
  setup: setup,
  // 添加扩展插件
  external_plugins: {
    pasteuploadimage: '/tinymce/plugins/pasteuploadimage/plugin.min.js',
    'kityformula-editor': '/tinymce/plugins/kityformula-editor/plugin.min.js',
  },
  font_size_formats: '8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 19pt 20pt 21pt 22pt 23pt 24pt 25pt 26pt 27pt 28pt 29pt 30pt 31pt 32pt 33pt 34pt 35pt 36pt',
  // lineheight_val:
  //     '1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5',
  // font_size_formats: '8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt',
  // paste_preprocess: pastePreprocess,
  // paste_postprocess: pastePostprocess //此选项使您能够在粘贴的内容插入编辑器之前，但在将其解析为DOM结构之后，对其进行修改。
})

onMounted(() => {
  tinymce.init({})
})

</script>

<style scoped>

</style>
<style>
.tox-tinymce-aux {
  z-index: 8888 !important;
}

.tox .tox-toolbar__group {
  padding: 0 3px 0 5px !important;
}
</style>