一、需求

  在项目开发的过程中,发布文章的时候会需要从word复制到富文本编辑中并发布。这时候就需要从word复制过来的时候保持原有格式与样式,在word里面咋样复制过来就是咋样的!

二、选择tinymce的原因

  对比与市场上的很多其他富文本编辑器,tinymce是唯一一个从word复制过来的时候基本保持原有样式的富文本,符合我在项目开发中的需求。

三、实现

  3.1安装vue-cli3

    如果本身安装有vue-cli2,则需要先卸载再安装,步骤如下

    3.1.1卸载vue-cli 2.0+

      npm uninstall vue-cli -g

    3.2.2安装vue-cli3

      npm i -g @vue/cli

    3.2.3创建项目

      vue create vue-tinymce(项目名称)

  3.2 tinymce的使用步骤

    3.2.1.下载tinymce

      npm i tinymce -S

    3.2.2下载tinymce-vue

      npm install @tinymce/tinymce-vue -S

    3.2.3 package.json 图示

vue-cli3+tinymce5 在vue中使用tinymce富文本编辑器,从word复制粘贴过来的文本基本保持原本格式  第1张

3.3tinymce汉化

    3.3.1下载汉化包

    下载地址:https://www.tiny.cloud/get-tiny/language-packages/

    图示:

vue-cli3+tinymce5 在vue中使用tinymce富文本编辑器,从word复制粘贴过来的文本基本保持原本格式  第2张

    3.3.2设置TinyMCE的界面语言,tiny默认是英文的,要变中文需要下载汉化包放到指定目录内,然后使用该配置:

    language:'zh_CN'

vue-cli3+tinymce5 在vue中使用tinymce富文本编辑器,从word复制粘贴过来的文本基本保持原本格式  第3张

3.4使用以及配置tinymce

    3.4.1在node-modules中tinymce的skins文件夹以及语言包langs复制到public的文件夹下面

vue-cli3+tinymce5 在vue中使用tinymce富文本编辑器,从word复制粘贴过来的文本基本保持原本格式  第4张

    3.4.2在vue中使用,封装成组件tinymce.vue

<template>   <div class="tinymce-editor">
        <editor v-model="editorContent"
                :init="init">
        </editor>
    </div>
</template>
<script>
    import tinymce from 'tinymce/tinymce'
    import Editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/silver/theme'
    //插件plugins
    import 'tinymce/plugins/image'// 插入上传图片插件
    import 'tinymce/plugins/table'// 插入表格插件
    import 'tinymce/plugins/lists'// 列表插件
    import "tinymce/icons/default/icons.js";
    export default {
        components: {
            Editor
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            plugins: {
                type: [String, Array],
                default: 'lists image table powerpaste',
            },
            toolbar: {
                type: [String, Array],
                default: 'undo redo |  formatselect | fontsizeselect | fontselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image table | removeformat'
            }
        },
        data () {
            return {
                init: {
                    language_url: `/tinymce/langs/zh_CN.js`,//引入语言包
                    language: 'zh_CN',
                    skin_url: `/tinymce/skins/ui/oxide`,
                    content_css: `/tinymce/skins/content/default/content.css`,
                    height: 500,
                    plugins: this.plugins,
                    toolbar: this.toolbar,
                    fontsize_formats: "8px 10px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px",
                    branding: false,
                    menubar: false,
                    paste_data_images: false,
                    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; }
                      `,
                    // 图片上传配置
                    images_upload_handler: function (blobInfo, success, failure){
                        let formData = new FormData();
                        formData.append('file',blobInfo.blob());
                      //可自己写上传图片的方法
                    },
                },
                editorContent: this.value
            }
        },
        mounted () {
        },
        methods: {

        },
        watch: {
            value (newValue) {
                this.editorContent= newValue;
            },
            myValue (newValue) {
                this.$emit('input', newValue);
            }
        }
    }

</script>
<style>
 
</style>

3.5 powerpaste的使用

    3.5.1下载powerpaste

想要从word复制粘贴过来的文本基本保持原本格式,我下载了大佬提供的powerpaste插件。这个插件在官网上是需要月付费的,我太穷了QAQ花不起这钱,百度网盘分享给大家powerpaste的压缩包,因为在项目中使用的tinymce的版本是5.0+,所以我使用的是4.0+版本的powerpaste,网盘链接以及提取码分享给大家:

  链接:https://pan.baidu.com/s/1zzRGFVXNWiaMaNppIMFRtw  提取码:qsls

下载完之后将其解压方法public文件夹下面的tinymce文件中

vue-cli3+tinymce5 在vue中使用tinymce富文本编辑器,从word复制粘贴过来的文本基本保持原本格式  第5张

    3.5.2在tinymce的配置中添加

//添加额外的插件
                    external_plugins: {
                        'powerpaste': `/tinymce/powerpaste/plugin.min.js`//${this.baseUrl}
                    },
                    powerpaste_word_import: 'merge',// 参数:propmt, merge, clear
                    powerpaste_html_import: 'merge',// propmt, merge, clear
                    powerpaste_allow_local_images: false,//粘贴图片

vue-cli3+tinymce5 在vue中使用tinymce富文本编辑器,从word复制粘贴过来的文本基本保持原本格式  第6张


3.6引入使用,新建另外的组件Home.vue

<template>
  <div class="home">
    <tinymce-editor ref="editor"
        v-model="content"
        :language="language"
        :skin="skin"
        @input="getInput"
    >
    </tinymce-editor>
    <div v-html="content"></div>
  </div>
</template>

<script>
import TinymceEditor from '@/components/tinymce/tinymce';
export default {
  name: 'Home',
  data(){
    return {
      language: 'zh_CN',
      skin: 'oxide',
      content:''
    }
  },
  components: {
    TinymceEditor
  },
  methods:{
    getInput(input){
      this.content = input;
    }
  }
}
</script>

完成以上操作即可,可以创建一个word复制试一试!