vue 添加可以粘贴图片的富文本编辑器

1. 第一步 npm 下载包 npm install vue-froala-wysiwyg --save
2. 第二步 miain.js引入 如何：

//除了引入这些需要的js外 你还可以
//全屏js
require('froala-editor/js/plugins/fullscreen.min.js')
//打印 js
require('froala-editor/js/plugins/print.min.js')
//语言
require('froala-editor/js/languages/zh_cn.js')

// An highlighted block
//Import Froala Editor 
import 'froala-editor/js/plugins.pkgd.min.js';
//Import third party plugins
import 'froala-editor/js/third_party/embedly.min';
import 'froala-editor/js/third_party/font_awesome.min';
import 'froala-editor/js/third_party/spell_checker.min';
import 'froala-editor/js/third_party/image_tui.min';
// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Import and use Vue Froala lib.
import VueFroala from 'vue-froala-wysiwyg'
Vue.use(VueFroala)

3. 第三步：配置文件下面展示一些 内联代码片。

// 复制下面config配置到data里面

// An highlighted block
  config: {
        language: 'zh_cn',
        toolbarButtons: ['fontSize','bold', 'underline','italic', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor',  'inlineStyle', 'alignLeft', 'alignCenter',  'alignRight','insertLink', 'insertImage','insertTable','insertVideo','fullscreen'],
        quickInsertButtons: ['image', 'table', 'ul', 'ol', 'hr'],//快速插入项
        toolbarSticky: true,//操作栏是否自动吸顶
        requestWithCORS: true,
        // requestHeaders: {
        //     'x-access-appid': '222',
        //     'x-access-token':  getToken(),

        // },
         //requestWithCredentials: true,
         imagePaste: true,
         imagePasteProcess:true,
         imageSizeButtons:[ 'imageBack','imageUpload' ], 
         imagePasteProcess: true,
         imageMultipleStyles:true ,
         imageAddNewLine: true,
         imageMove: true,
         imageInsertButtons: ['imageBack', '|','imageUpload'],
         //  imageUploadURL: 'www.sss.com',上传图片地址 
         //imageCORSProxy: 'www.sss.com',//跨域图片配置
         //imageUploadMethod:'POST', //图片上传设置 
         imageDefaultDisplay: 'inline',
         imageSplitHTML: true,
         imageUploadParams: {
           "filename": 'img'
         },
        imageUploadParam: 'img',
        events: {
          initialized:function(){

          },
        //   'froalaEditor.initialized': function (e,editor) {
        //       console.log(editor)
        //    this.editor = editor
        //   },
         keyup: (e, editor) => {
            console.log("输入完成")
            this.lastEditRange = getSelection().getRangeAt(0);
          },
          //添加事件，在每次鼠标点击时，都记录一下最后停留位置
          click: (e, editor) => {
           
            this.lastEditRange = getSelection().getRangeAt(0);
          },
          "image.beforeUpload": function(files) {
            console.log("11")
            var editor = this;
              if (files.length) {
                // Create a File Reader.
                var reader = new FileReader();
                // Set the reader to insert images when they are loaded.
                reader.onload = function(e) {
                  var result = e.target.result;
                  editor.image.insert(result, null, null, editor.image.get());
                };
                // Read image as base64.
                reader.readAsDataURL(files[0]);
              }
              editor.popups.hideAll();
              // Stop default upload chain.
              return false
            },
           'image.beforePasteUpload': function (files) {
            console.log("22")
          var editor = this;
              if (files.length) {
                // Create a File Reader.
                var reader = new FileReader();
                // Set the reader to insert images when they are loaded.
                reader.onload = function(e) {
                  var result = e.target.result;
                  editor.image.insert(result, null, null, editor.image.get());
                };
                // Read image as base64.
                reader.readAsDataURL(files[0]);
              }
              editor.popups.hideAll();
              return false
          },
           'image.uploaded': function (response) {
      // Do something here.
      // this is the editor instance.
             let img = ''
            img = JSON.parse(response);
            editor.image.insert(img.data.path, null, null, editor.image.get());
            },
            'image.replaced': function ($img, response) {
      // Do something here.
      // this is the editor instance.
          },
      //     },
          'image.inserted': function ($img, response) {
            // Do something here.
            // this is the editor instance.
          }

        },
         placeholderText: '请输入备注信息',
      },

4. 代码引入 import VueFroala from 'vue-froala-wysiwyg';
5. 渲染部分 下面展示一些 内联代码片。

// 完成

// html
   <froala :tag="'textarea'" class="edit"  :config="config"  v-model="remark"></froala>

** 注意** 该富文本编辑器需要去除版权 如何去除相关版权信息 另外在我资源中上传了去除版权信息的js文件
下面展示一些 内联代码片。

//css

// 样式
a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysiwyg-editor?k=u"] {
      display: none !important;
      position: absolute;
      top: -99999999px;
}
#fr-logo{
  display: none;
}