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

2020-06-10 05:23
5611
4
25
vue

最近在做一个项目的后台管理,使用的是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_modulestinymce目录的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>

 

效果

 

图片上传我是直接上传阿里云的,所以大家的图片上传可以写在images_upload_handler回调里面,在success里面返回图片链接即可。

 

不得不说,tinymce确实强大,不论是ui,还是功能都比quill好使

 

文件有点大,建议有些不常用的工具就先不引入

 

觉得好的话,记得点个赞哦

支付宝微信
25
关注公众号获取更多内容
uniapp使用webview来加载地图达到地图选点功能
结合lazyload实现文章页里面的图片预加载
共有 4 条评论
发表评论
  • Light#10082
    2022-06-02 00:16
    未知
    Win10

    wacth侦听器不起作用

  • Light#10081
    2022-06-02 00:15
    未知
    Win10

    双向绑定失败

  • 马先生#10076
    2021-09-18 02:20
    北京市北京市大兴区
    Win10

    出一版ts的

  • 马先生#10075
    2021-09-18 01:10
    北京市北京市大兴区
    Win10

    希望出一版多图多文件上传的富文本,可能代码冲突吧找不到问题所在,现在这个使用后会报错

总共 4
  • 1
不支持canvas
春季
夏季
秋季
冬季
暗黑
简约
小清新