logo


  • 首页
  • 文章 
    • vue
    • app
    • node
    • 生活
    • 小程序
    • javascript
    • uniapp
  • 案例 
    • app
    • 小程序
    • pc
  • 相册
  • 友链
  • 留言
  • 微语
  • 关于

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>

 

效果

 

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

 

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

 

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

 

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


支付宝 微信
 25

typescriptvue
 uniapp或小程序利用canvas生成圆图
 uniapp使用webview来加载地图达到地图选点功能
共有 4 条评论
 发表评论
  • 10075#
    马先生
    马先生
    •  2021-09-17
    •  北京市北京市大兴区
    •  Win10
    希望出一版多图多文件上传的富文本,可能代码冲突吧找不到问题所在,现在这个使用后会报错
  • 10076#
    马先生
    马先生
    •  2021-09-17
    •  北京市北京市大兴区
    •  Win10
    出一版ts的
  • 10081#
    Light
    Light
    •  2022-06-01
    •  Win10
    双向绑定失败
  • 10082#
    Light
    Light
    •  2022-06-01
    •  Win10
    wacth侦听器不起作用



表情
 不支持canvas
椰子皮
椰子皮
觉得不错就点个赞吧
 234
 关注 公众号
1772 运行天数
140 今日pv
61 文章数量
 最近更新
 2022-06-02 09:25 更新了 文章
 nuxt3配置多环境变量

 最新微语
  • 最近在使用eeg.js + vue3.0 2022-01-12
  • 把清新风格改为毛玻璃效果,虽然有点卡,但 2020-05-31
  • 本站春季主题已完成,大家觉得怎样。 2020-03-15
 最新评论
  • Javascript
    Javascript Win10 2022-07-11
    文章 h5上推页面用这个方法解决不了
  • Sonder
    Sonder Win10 2022-07-06
    文章 基础问题,刚刚的问题解决了。是baseurl没弄好~~
  • tsin
    tsin Win10 2022-06-13
    文章 请求接口在控制台看不到返回数据是怎么回事呢 显示的是无法加载响应数据,返回的状态代码是200
 最多点赞
 最多评论
  • vue3.0+typescript使用tinymce富文本编辑器
    vue3.0+typescript使用tinymce富文...
    2020-06-09 赞:25
  • 全新椰子皮博客版本介绍及说明。
    全新椰子皮博客版本介绍及说明。...
    2017-11-23 赞:20
  • vuex action 与mutations 的区别
    vuex action 与mutations 的区别...
    2018-06-24 赞:18
  • 让height:auto有过度效果
    让height:auto有过度效果...
    2017-12-22 赞:
  • css3使用transform: scale 元素出现偏移
    css3使用transform: scale 元素出现偏...
    2018-03-10 赞:
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:
 标签
前端 算法 uniapp javascript typescript 小程序 app vue nuxt node
 友情链接
申请
Sonder mashihuan Khari & Yaru 美好记忆 帅气的木木 大蒜博客 Aquan 快乐编程 fivewoods Paul 贺德强 太傅博客 梁巨才博客 jielin littlewin IT技术宅
首页 申请友链 关于本站
CopyRight © 2016-2021 - 椰子皮 - 浙ICP备16003960号