Vue （2.x） 中如何使用 Tinymce

本文主要是介绍Vue （2.x） 中如何使用 Tinymce，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本组件使用的是  "tinymce": "^5.1.0",     "vue-tinymce-editor": "^1.6.2",

一、安装

　　npm install tinymce --save

　　npm install vue-tinymce-editor

二、全局注册组件

　　main.js  中引入

　　import tinymce from "vue-tinymce-editor"; 　　import "../static/tinymce/langs/zh_CN.js";   之所以在这里引入语言包，是因为在配置相中配置的语言路径不起作用的情况下。 　　语言包下载地址：http://tinymce.ax-z.cn/static/tiny/langs/zh_CN.js 　　官方语言包下载地址：https://www.tiny.cloud/get-tiny/language-packages/ 　　Vue.component("tinymce", tinymce); 　　 三、复制 tinymce 包 　　首先在 public 下面新建一个 tinymce 文件夹 　　找到 node_modules 下的  tinymce 将其目录下的 skins  themes 复制到 public/tinymce  下。 四、封装组件

<template lang="pug">   //只有vue项目中配置了 pug 模板的语法才可以这样写否则按照正常 html 语法进行书写
  .tinymce-w(:class='className')
    tinymce(id="tinymce" ref="tinymce" v-model="content" :other_options="other_options")
</template>

<script>
import "tinymce/skins/ui/oxide/skin.css";
export default {
  props: {
    className: {
      type: String,
      default: "",
    },
    contents: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      content: "",
      tinymceId: "tinymce",
      other_options: {
        // language_url: "/public/tinymce/langs/zh_CN.js", //语言包的路径 
        language: "zh_CN", //语言
        elementpath: false, // 隐藏底栏的元素路径
        branding: false, // 隐藏右下角技术支持
        contextmenu: false, // 禁用富文本的右键菜单，使用浏览器自带的右键菜单
        height: "13rem",
        skin_url: "/public/tinymce/skins/ui/oxide", //skin路径
        content_css: "/public/tinymce/skins/content/default/content.css",
        content_style: "p {color: #ffffff;}",
        menubar: "file edit insert view format table",
        resize: false, //禁用编辑器调整大小
        fontsize_formats: "11px 12px 14px 16px 18px 24px 36px 48px",
        toolbar1:
          "code preview | undo redo | forecolor textcolor backcolor textcolor | formatselect fontsizeselect | formatselect | bold italic |",
        toolbar2:
          "alignleft aligncenter alignright alignjustify outdent indent | numlist lists | image table | fullscreen fullscreen|",
        //开关使用Data URL/Blob URL插入图片和文件到内容区的方式。例如，图像是使用imagetools插件处理后插入到内容区的，此时图像并未真正上传到服务器，而是以Data URL/Blob URL的方式插入在内容中。
        automatic_uploads: false,
        //图片上传地址
        images_upload_url:
          process.env.NODE_ENV === "production"
            ? window.g.UPLOADER_URL
            : "/api/common/uploadFile",
        // file_picker_types: "image",
        //文件上传成功时的回调
        // file_picker_callback: () => {},
        //自定义图片上传
        images_upload_handler: function(blobInfo, success, failure, progress) {
          var xhr, formData;
          xhr = new XMLHttpRequest();
          xhr.withCredentials = false;
          xhr.open("POST", process.env.NODE_ENV === "production"
              ? window.g.UPLOADER_URL
              : "/api/common/uploadFile");
          xhr.upload.onprogress = function(e) {
            progress((e.loaded / e.total) * 100);
          };

          xhr.onload = function() {
            var json;
            if (xhr.status == 403) {
              failure("HTTP Error: " + xhr.status, { remove: true });
              return;
            }
            if (xhr.status < 200 || xhr.status >= 300) {
              failure("HTTP Error: " + xhr.status);
              return;
            }
            json = JSON.parse(xhr.responseText);
            console.log(json);
            if (!json || typeof json.resultObject != "string") {
              failure("Invalid JSON: " + xhr.responseText);
              return;
            }
            success(json.resultObject);
          };

          xhr.onerror = function() {
            failure(
              "Image upload failed due to a XHR Transport error. Code: " +
                xhr.status
            );
          };

          formData = new FormData();
          formData.append("files", blobInfo.blob(), blobInfo.filename());

          xhr.send(formData);
        },
      },
    };
  },
  methods: {
    setContent(value = "") {
      console.log(value);
      this.content = value;
      window.tinymce.get("tinymce").setContent(value);
    },
  },
};
</script>

<style></style>

五、使用自己封装的组件

<template lang="pug">
    Tinymce(ref="editor" :contents="form.content")    
</template>

<script>

import Tinymce from "../../components/Tinymce.vue";

export default {
  data() {
    return {
      //表单提交参数
      form: {
        content: "",
      },
    };
  },
  components: {
    Tinymce,
  },
  methods: {
    //清空表单
    clearForm() {
      this.form = {
        content: "",
      };
      this.$refs.editor.setContent();// 清空 editor 的值
    },
  },
};
</script>

 

这篇关于Vue （2.x） 中如何使用 Tinymce的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！