在ts/vue2中使用tinymce富文本编辑器

使用Ts书写的vue2项目如何使用tinymce富文本编辑器,一起来看看吧

1.安装tinymce

npm install tinymce -S    /     yarn add tinymce

2.安装@tinymce/tinymce-vue

npm install @tinymce/tinymce-vue@3.2.8 -S    /    yarn add @tinymce/tinymce-vue@3.2.8

默认安装tinymce-vue最新版本是4.0,已经用的vue3.0的了,所以要使用之前版本
3.在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 public目录下
4.tinymce 默认是英文界面,所以还需要下载一个中文包,复制到 public/tinymce目录下

示例.png

5.组件封装

<template>
  <div>
    <Editor :id="id" v-model="content" :init="init"></Editor>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";

import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import { uploadOssFile } from "@/api/public";
import { completeImg } from "@/utils/index";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/media";
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/codesample";
// import "tinymce/plugins/emoticons"
import "tinymce/icons/default/icons";

console.log(tinymce);

@Component({ name: "TinymceEditer", components: { Editor } })
export default class extends Vue {
  //设置prop id
  @Prop({ default: "vue-tinymce-" + +new Date() }) id!: string;

  //默认高度
  @Prop({ default: 300 }) height!: number;

  @Prop({ default: "" })
  private value!: string;

  private content: string = "";

  @Watch("value")
  private onChangeValue(newVal: string) {
    this.content = newVal;
  }

  @Watch("content")
  private onChangeContent(newVal: string) {
    this.$emit("input", newVal);
  }

  //富文本框init配置
  init = {
    selector: "#" + this.id, //富文本编辑器的id
    language: "zh_CN", //语言
    language_url: "/tinymce/zh_CN.js", //语言包
    skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作,所以要设置一个skin_url指向之前复制出来的skin文件
    menubar: "file edit insert view format table tools import", //菜单条
    plugins:
      "link lists image code table wordcount media table fullscreen preview pagebreak insertdatetime hr paste codesample", //插件
    toolbar:
      "bold italic underline strikethrough  | fontselect | fontsizeselect | formatselect  | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink image media insertdatetime table  hr pagebreak codesample | code fullscreen preview", //工具条
    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", //文字大小
    height: this.height, //高度
    branding: false, //水印
    elementpath: false, //底部元素路径
    paste_data_images: true, //允许粘贴图片
    file_picker_types: "media",
    //初始化前执行
    setup: (editor: any) => {},
    //实例化执行
    init_instance_callback: (editor: any) => {
      this.content && editor.setContent(this.content);
      //this.hasInit = true
      editor.on("NodeChange Change KeyUp SetContent", () => {
        //this.hasChange = true
        this.content = editor.getContent();
      });
    },

    //选择文件
    file_picker_callback: (callback, value, meta) => {
      if (meta.filetype == "media") {
        let input = document.createElement("input"); //创建一个隐藏的input
        input.setAttribute("type", "file");
        // let that = this;
        input.onchange = (res) => {
          let formdata = new FormData();
          if (input.files[0].size > 10 * 1024 * 1024) {
            this.$message("视频不能超过10M");
            return false;
          }
          formdata.set("file", input.files[0]);
          uploadOssFile(formdata).then((res) => {
            console.log(res);
            let { data, status } = res.data as any;
            if (status == "1") {
              let url = completeImg(data);
              callback(url);
            }
          });
        };
        //触发点击
        input.click();
      }
    },

    //上传图片回调
    images_upload_handler: (
      blobInfo: any,
      success: Function,
      failure: Function
    ) => {
      this.handleImgUpload(blobInfo, success, failure);
    },
  };

  private mounted() {
    this.content = this.value;
  }

  //上传图片
  private handleImgUpload(blobInfo: any, success: Function, failure: Function) {
    let formdata = new FormData();
    var file = blobInfo.blob();
    if (!file.name) {
      const suffix =
        file.type == "image/png"
          ? "png"
          : file.type == "image/gif"
          ? "gif"
          : "jpg";
      file = new File([file], `test.${suffix}`);
    }
    if (file.size > 5 * 1024 * 1024) {
      this.$message("图片不能超过5M");
      return false;
    }
    formdata.set("file", file);
    uploadOssFile(formdata)
      .then((res) => {
        console.log(res);
        let { data, status } = res.data as any;
        if (status == "1") {
          let url = completeImg(data);
          success(url);
        } else {
          failure("error");
        }
      })
      .catch((err) => {
        failure("error");
      });
  }
}
</script>

6.页面使用

<MyTinymce v-model="formData.content" ref="tinymce" />

7.实现效果


image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容