vue+typescript使用tinymce富文本编辑器-椰子皮

vue+typescript使用tinymce富文本编辑器

 2020-06-09

 椰子皮

 0

 218

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

现在使用的这个quill每次黏贴内容就会给我回到页面顶部，而且没法设置高度滚动，一点体验都没有。

咱们正文不说废话，直接上代码

首先是依赖的安装

npm install tinymce --save

安装ts声明文件

npm install @types/tinymce --save

再安装vue版本的tinymce

npm install @tinymce/tinymce-vue --save

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

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

封装成组件使用

tinymce-editor.vue

<template>
  <div>
    <editor id="tinymce" ref="tinymceEditor" v-model="value" :init="init" @input="onEditorInput"></editor>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

import tinymce from 'tinymce'

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 Editor from '@tinymce/tinymce-vue'

@Component({ name: 'TinymceEditor', components: { Editor } })
export default class extends Vue {

  @Prop({ default: '' }) content!: string

  // 富文本框值
  private value: string = ''

  // 富文本框init配置
  private get init() {
    return {
      selector: '#tinymce',
      language_url: '/tinymce/langs/zh_CN.js',
      language: 'zh_CN',
      skin_url: '/tinymce/skins/ui/oxide',
      height: 350,
      branding: false,
      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: any) => {
        const file = blobInfo.blob()
        console.log(file)
        this.$api.common.aliyunUpload(file, 'donggu').then((url: any) => {
          success(url)
        })
      },
    }
  }

  mounted() {
    tinymce.init({})
    this.value = this.content
  }

  onEditorInput(e: any) {
    this.$emit('input', this.value)
  }

  setContent(str: any) {
    this.value = str
  }
}
</script>

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

import Editor from '@tinymce/tinymce-vue' 在vscode里面可能会报没有ts声明文件的错误，实际上是有声明文件的，但是不影响运行，tslint也没有报错，先不管它

在页面组件中使用

<templete>
  <tinymce-editor ref="editor" @input="content = $event"></tinymce-editor>
</templete>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import TinymceEditor from '@/components/common/tinymce-editor.vue'

@Component({
  components: {
   TinymceEditor,
  },
})
export default class extends Vue {
  content: any = ''

  mounted() {
    const editor: any = this.$refs.editor
    editor.setContent('<h1>hello world</h1>')
  }
}
</script>

效果