vue3.0+typescript使用tinymce富文本编辑器-椰子皮

vue3.0+typescript使用tinymce富文本编辑器

 2020-06-09

 椰子皮

 4

 4875

“ 最近在做一个项目的后台管理，使用的是vue3.0+typescript开发的，在选择富文本编辑器的时候犯难了，ueditor太雍正肿了，而且扩展性不好，quill感觉还是不是很好使，对比了一下，就选择了tinymce，但是网上用typescript使用tinymce的人很少，于是就自己记录一下。 ”

首先是依赖的安装，我的项目使用的是5.10.0版本

npm install tinymce --save

安装ts声明文件

npm install @types/tinymce --save

再安装vue版本的tinymce

npm install @tinymce/tinymce-vue --save

将node_modules的tinymce目录的skins复制到public文件夹

中文语言包下载：https://www.tiny.cloud/get-tiny/language-packages/ 下载之后放到public/tinymce文件夹

封装成组件使用，新建一个TinymceEditor.vue 添加如下代码

<script lang="ts" setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue'
import tinymce from 'tinymce'
import Editor from '@tinymce/tinymce-vue'

import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/media'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/print'

interface PropsConfig {
  value: string,
  id?: string
}

const props = withDefaults(defineProps<PropsConfig>(), {
  value: '',
  id: 'tinymce'
})

const emit = defineEmits(['update:value'])

const content = ref(props.value)

const editorConfig = {
  selector: '#' + props.id,
  language_url: '/tinymce/langs/zh_CN.js',
  language: 'zh_CN',
  skin_url: '/tinymce/skins/ui/oxide',
  height: 400,
  branding: true,
  plugins: 'link lists image codesample code table wordcount media table fullscreen preview pagebreak insertdatetime hr paste', // 插件
  toolbar: 'codesample image bold italic underline alignleft aligncenter alignright alignjustify | forecolor backcolor | fontselect | fontsizeselect | formatselect |  bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink media insertdatetime table  hr pagebreak | fullscreen preview | strikethrough', // 工具条
  font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun;  微软雅黑=Microsoft Yahei; Impact=impact,chicago;', // 字体
  fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', // 文字大小
  paste_data_images: true,
  codesample_languages: [
    { text: 'HTML/XML', value: 'markup' },
    { text: 'JavaScript', value: 'javascript' },
    { text: 'CSS', value: 'css' },
    { text: 'Java', value: 'java' },
    { text: 'C++', value: 'cpp' },
  ],
  // 图片上传回调
  images_upload_handler: (blobInfo: any, success: Function) => {
    const file = blobInfo.blob()
    console.log(file)
    // 拿到file文件后在这里进行你自己的上传接口，用过success(url)把图片地址插入到编辑器
  },
}

const setContent = (res: string) => {
  content.value = res
}

watch(() => props.value, (value: string) => {
  content.value = value
})

watch(() => content.value, (value: string) => {
  emit('update:value', value)
})

onMounted(() => {
  tinymce.init(editorConfig)
  content.value = props.value
})

defineExpose({
  setContent
})

</script>

<template>
  <editor
    v-model="content"
    :id="id"
    :init="editorConfig"
  >
  </editor>
</template>

<style lang="less" scoped></style>

在页面组件中使用：

<script lang="ts" setup>
  import { ref } from 'vue'
  const editorRef = ref()
  const content = ref('<p style="color:red">这是文本内容</p>')
  // 或者 onMounted(() => editorRef.value.setContent(content.value))
</script>

<template>
  <tinymce-editor ref="editorRef" id="editor" v-model:value="content"></tinymce-editor>
</template>

效果