vue使用TinyMCE

TinyMCE 是一款基于vue的富文本编辑器

使用起来还是非常方便的  还可以根据官网 自己配置一些必要的功能 官网链接

下载 npm install @tinymce/tinymce-vue -S

 

中文包下载

链接：https://pan.baidu.com/s/1-C5F4rfg1XlZHgnLqsPS7w
提取码：23el
复制这段内容后打开百度网盘手机App，操作更方便哦

CSS文件代码

body {
  overflow-y: scroll !important;编辑区域滚动
  height: 500px;编辑区域高度
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #e0e5eb;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  border-radius: 0;
  /* background: rgba(0, 0, 0, 0.1); */
}

 

index.html需要加上这一行代码

<script src="//unpkg.com/tinymce@5.1.5/tinymce.min.js"></script>

　　

安装之后可以在main.js中引入

import VueTinymce from "@packy-tang/vue-tinymce";
Vue.use(VueTinymce);

　封装组件

<template>
  <div class="tinymce">
    <vue-tinymce v-model="contentCopy" :setup="setup" :setting="setting" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentCopy: "",
      setting: {
        language_url: "./tinymce/langs/zh_CN.js",引入文件放到pubilc里
        content_css: "./tinymce/css/index.css",自定义编辑区域样式，同样是放到public
        language: "zh_CN", //注意大小写
        // height: 800, //编辑器高度
        // width: 600,
        height: 500,
        autosave_interval: "2s", //自动保存时间间隔
        autosave_prefix: "creator-edit-article-", //保存的字段名
        plugins:
          "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize",
        toolbar:
          "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | lineheight axupimgs",

        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        image_class_list: [
          { title: "None", value: "" },
          { title: "Some class", value: "class-name" },
        ],
        images_upload_base_path: "",//上传图片地址
        images_upload_handler: function (blobInfo, succFun, failFun) {//本地图片上传
          var xhr, formData;
          var file = blobInfo.blob(); //转化为易于理解的file对象
          xhr = new XMLHttpRequest();
          xhr.withCredentials = false;
          xhr.open("POST", "上传图片地址");
          xhr.onload = function () {
            var json;
            if (xhr.status != 200) {
              failFun("HTTP Error: " + xhr.status);
              return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.data.img != "string") {
              failFun("Invalid JSON: " + xhr.responseText);
              return;
            }
            succFun(json.data.img);
          };
          formData = new FormData();
          formData.append("file", file, file.name); //
          xhr.send(formData);
        },
        importcss_append: true,
        toolbar_sticky: true,
        autosave_ask_before_unload: false,
      },
    };
  },
  props: {
    content: {
      type: [String, Object],
      default: "",
    },
  },
  watch: {
    content: {
      handler(content) {
        this.contentCopy = content;
      },
      immediate: true,
    },

    contentCopy: {
      handler(contentCopy) {
        this.$emit("update:content", contentCopy);
      },
      immediate: true,
    },
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    setup(editor) {
      console.log(editor);
    },
  },
};
</script>
<style lang="scss"></style>

　　引入之后的用法

<creator-tinymce :content.sync="content"></creator-tinymce>

import CreatorTinymce from "./components/creator-tinymce.vue";//组件路径

　　弄完之后大概是这个亚子

 

如果这篇博客帮到你了，可以请作者喝瓶可乐！！