Tinymce讲解

tinmce中文文档

<template>
  <div class="app-container">
    <Editor id="tinymce" v-model="tinymceHtml" :init="init" @paste="customPaste($event)" />
  </div>
</template>
<script setup lang="ts">
import * as PrintingApis from '@/api/system/CustomPrinting/index'
import { ref, onMounted } from 'vue'
import tinymce from 'tinymce/tinymce'
// 使用该方法需要引入下面的数据
import 'tinymce/models/dom' // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue' // 引入组件
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'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 如果tinymce加载过慢的情况下可以将以上文件从node_modules取出来，可以放到静态资源文件夹下面。
const tinymceHtml = ref<string>('') //当前组件的数据
const init = {
  //初始化数据
  selector: 'textarea', // 其实就是容器的id
  height: '100%', // 限制高度
  statusbar: false, // 隐藏状态栏
  content_css: ['./public/tinymce/css/custom.css'], // 自定义css样式
  object_resizing: true, // 默认为false，移动设备不支持对象调整大小。
  table_resize_bars: true, // 禁用此项，则将无法拖动表格内部的横线竖线来调整行列大小。
  image_description: false, // 为img添加属性alt
  image_dimensions: false, // 禁止操作图片
  plugins: 'link lists  code table wordcount print table', // 富文本插件
  font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px 48px 128px',
  language_url: '/public/tinymce/langs/zh-Hans.js',  // 汉化资源路径
  language: 'zh-Hans', //注意大小写
  font_family_formats:
    '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif',
  toolbar:
    'undo redo fontfamily fontsize fontname bold italic underline strikethrough | fontsizeselect | forecolor | alignleft aligncenter alignright print table',
  branding: false, // //是否禁用“Powered by TinyMCE”
  menubar: false, //顶部菜单栏显示
  paste_data_images: false, // 禁止粘贴图片
  forced_root_block: '', // 强制根节点块元素(如果不填则默认p标签)
  valid_elements: '*[*]', // 你可以用它来定义编辑器只保留哪些元素，使用此功能可限制用户提交内容的格式，如留言板，论坛互动等场景，使用该选项可以返回HTML的一个子集。
  init_instance_callback: async function () { // 初始化结束后执行
  }
}
const emits = defineEmits<{ // vue3向父组件发送事件
  (event: 'update:modelValue', val: string): void // 富文本内容
}>()
const insert = (Data?) => {
  console.log(Data)
// 这个方法execCommand是插入数据。
style="cursor: not-allowed">{${name}}</span>`
  tinymce.activeEditor.execCommand('mceInsertContent', false, Data)
}
defineExpose({ insert }) // 导出方法
const getList = async () => {
  tinymce.init({}) // 初始化富文本
}
onMounted(() => {
  getList() // 初始化
})
// 实现双向绑定
watch(
  () => tinymceHtml.value,
  (val) => {
    emits('update:modelValue', val)
    // tinymce.activeEditor!.getContent()
  }
)
</script>