vue 集成富文本tinymce

时间 2019-11-10

标签 vue 集成文本 tinymce 繁體版

原文原文链接

开发环境

1. vscode

开发语言

1. vue
2. javaScript

插件安装

1. npm install tinymce -S
2. 能够使用里面的文件， 下载后能够在node_modules 里面查看以下未目录结构

3. 能够将整个结构拷在static里面，为了节省打包后的文件大小能够将tinymce.min.js以cdn方式导入放在index.html中
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.5/tinymce.min.js"></script>
4. 附上封装的代码能够直接导入使用
   
    <template>

<div>css

<textarea :id="Id"></textarea>

</div>
</template>
<script>
import "tinymce/langs/zh_CN.js"; // 引入中文包地址
// import axios from "axios"; // 可导入axios文件进行上传图片
export default {
data() {html

const Id = Date.now();
return {
  Id: Id, // 构造tinymce的选择器
  Editor: null,
  tinymceConfig: {
    // GLOBAL
    height: 500,
    theme: "modern",
    menubar: false,
    toolbar: `styleselect | fontselect | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | image  media | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | preview removeformat  hr | paste code  link | undo redo | fullscreen `,
    plugins: `
        paste
        importcss
        image
        code
        table
        advlist
        fullscreen
        link
        media
        lists
        textcolor
        colorpicker
        hr
        preview
    `,

    // CONFIG

    forced_root_block: "p",
    force_p_newlines: true,
    importcss_append: true,
    skin_url: "/static/tinymce/skins/lightgray", // 能够把node_modules 下面的文件导入到static而后引入到这里
    language_url: "/static/tinymce/langs/zh_CN.js", // 导入中文包
    language: "zh_CN",

    // CONFIG: ContentStyle 这块很重要， 在最后呈现的页面也要写入这个基本样式保证先后一致， `table`和`img`的问题基本就靠这个来填坑了
    content_style: `
        *                         { padding:0; margin:0; }
        html, body                { height:100%; }
        img                       { max-width:100%; display:block;height:auto; }
        a                         { text-decoration: none; }
        iframe                    { width: 100%; }
        p                         { line-height:1.6; margin: 0px; }
        table                     { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
        .mce-object-iframe        { width:100%; box-sizing:border-box; margin:0; padding:0; }
        ul,ol                     { list-style-position:inside; }
    `,

    insert_button_items: "image link | inserttable",

    // CONFIG: Paste
    paste_retain_style_properties: "all",
    paste_word_valid_elements: "*[*]", // word须要它
    paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，很是强力的功能
    paste_convert_word_fake_lists: false, // 插入word文档须要该属性
    paste_webkit_styles: "all",
    paste_merge_formats: true,
    nonbreaking_force_tab: false,
    paste_auto_cleanup_on_paste: false,

    // CONFIG: Font
    fontsize_formats: "10px 11px 12px 14px 16px 18px 20px 24px",

    // CONFIG: StyleSelect
    style_formats: [
      {
        title: "首行缩进",
        block: "p",
        styles: { "text-indent": "2em" }
      },
      {
        title: "行高",
        items: [
          { title: "1", styles: { "line-height": "1" }, inline: "span" },
          {
            title: "1.5",
            styles: { "line-height": "1.5" },
            inline: "span"
          },
          { title: "2", styles: { "line-height": "2" }, inline: "span" },
          {
            title: "2.5",
            styles: { "line-height": "2.5" },
            inline: "span"
          },
          { title: "3", styles: { "line-height": "3" }, inline: "span" }
        ]
      }
    ],

    // FontSelect
    font_formats: `
        微软雅黑=微软雅黑;
        宋体=宋体;
        黑体=黑体;
        仿宋=仿宋;
        楷体=楷体;
        隶书=隶书;
        幼圆=幼圆;
        Andale Mono=andale mono,times;
        Arial=arial, helvetica,
        sans-serif;
        Arial Black=arial black, avant garde;
        Book Antiqua=book antiqua,palatino;
        Comic Sans MS=comic sans ms,sans-serif;
        Courier New=courier new,courier;
        Georgia=georgia,palatino;
        Helvetica=helvetica;
        Impact=impact,chicago;
        Symbol=symbol;
        Tahoma=tahoma,arial,helvetica,sans-serif;
        Terminal=terminal,monaco;
        Times New Roman=times new roman,times;
        Trebuchet MS=trebuchet ms,geneva;
        Verdana=verdana,geneva;
        Webdings=webdings;
        Wingdings=wingdings,zapf dingbats`,

    // Tab
    tabfocus_elements: ":prev,:next",
    object_resizing: true,

    // Image
    imagetools_toolbar:
      "rotateleft rotateright | flipv fliph | editimage imageoptions"
  }
};

},
props: {vue

value: {
  default: "",
  type: String
},
config: {
  type: Object,
  default: () => {
    return {
      theme: "modern",
      height: 300
    };
  }
},
// 该参数就是上传文件的url
url: {
  default: "",
  type: String
},
//上传文件类型
accept: {
  default: "image/jpeg, image/png, image/jpg,",
  type: String
},
maxSize: {
  default: 2097152,
  type: Number
},
withCredentials: {
  default: false,
  type: Boolean
}

},
mounted() {java

this.init();

},
beforeDestroy() {node

// 销毁tinymce
//   window.tinymce.remove(`$#{this.Id}`)

},
methods: {ios

init() {
  const self = this;

  this.Editor = window.tinymce.init({
    // 默认配置
    ...this.tinymceConfig,

    // 图片上传
    images_upload_handler: function(blobInfo, success, failure, progress) {
      if (blobInfo.blob().size > self.maxSize) {
        failure("文件体积过大");
      }
      if (self.accept.indexOf(blobInfo.blob().type) > -1) {
        uploadPic();
      } else {
        failure("图片格式错误");
      }
      function uploadPic() {
        // 用axios 上传文件
        // progress(0);
        // let param = new FormData();
        // let config = {
        //   headers: {
        //     "Content-Type": "multipart/form-data"
        //   }
        // };
        // param.append("file", blobInfo.blob());
        // console.log('axios', axios);
        // axios
        //   .post("http://operate-dev.winchaingroup.com/api/upload", param, config)
        //   .then(response => {
        //     success(response.data.data);
        //     self.$emit("on-upload-complete", [json, success, failure]);
        //     progress(100);
        //   })
        //   .catch(error => {
        //     console.log("err", error);
        //   });

        // 用ajax上传文件
        const xhr = new XMLHttpRequest();
        let createFrom = document.createElement("form");
        let FromData = new FormData(createFrom);
        xhr.withCredentials = self.withCredentials;
        xhr.open("POST", self.url);
        xhr.onload = function() {
          if (xhr.status !== 200) {
            // 抛出 'on-upload-fail' 钩子
            failure("上传失败: " + xhr.status);
            return;
          }
          const json = JSON.parse(xhr.responseText);
          // success函数中的参数就是你上传文件返回的url
          success(json.data);
          progress(100);
          // 抛出 'on-upload-complete' 钩子
        };
        FromData.append("file", blobInfo.blob());
        xhr.send(FromData);
      }
    },

    // prop内传入的的config
    ...this.config,

    // 挂载的DOM对象
    selector: `#${this.Id}`,
    setup: editor => {
      // 抛出 'on-ready' 事件钩子
      editor.on("init", () => {
        self.loading = false;
        editor.setContent(self.value);
      });
      // 抛出 'input' 事件钩子，同步value数据
      editor.on("input change undo redo", () => {});
    }
  });
}

}
};
</script>web

5. 在组件中导入便可使用
    import tinymce from './tinymce/index'

引用

https://www.bootcdn.cn/tinymce/     // tinymce地址