froala 的使用

在Vue中使用Froala：

• 引入

 // Require Froala Editor js file.
   require('froala-editor/js/froala_editor.pkgd.min')

// Require Froala Editor css files.
  require('froala-editor/css/froala_editor.pkgd.min.css')
  require('font-awesome/css/font-awesome.css')
  require('froala-editor/css/froala_style.min.css')

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

• 使用 – 基本项的配置例子

 <froala :tag="'textarea'" :config="config" v-model="model"></froala>

config: { // 编辑器的初始化信息
          imageUploadURL: 'http://upload.qiniu.com/',
          fileUploadURL: 'http://upload.qiniu.com/',
          videoUploadURL: 'http://upload.qiniu.com/',
          height: 360,
          language: 'zh_cn',
          toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|',
            'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|',
            'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-',
            'insertLink', 'insertImage', 'insertTable', '|', 'emoticons',
            'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker',
            'help', 'html', '|', 'undo', 'redo', 'myButton', 'toolsButton', 'insertAudio', 'wirisEditor', 'wirisChemistry'],
          events: {
            'froalaEditor.image.beforeUpload': function (e, editor, images) {
              var bucketType = 4 // 项目参数
              self.froalaAjax(bucketType, 'img')
            },
            'froalaEditor.file.beforeUpload': function (e, editor, files) {
              let bucketType = self._fileType.TYPE_AUDIO // 项目参数
              self.froalaAjax(bucketType, 'aodio')
            },
            'froalaEditor.initialized': function (e, editor) {
              self.editor = editor // 获取实例
              self.editor.addOption = self.addOption // 插件回调 调用vue自身方法
            }
          }
        }
   model: 'Edit Your Content Here!'

froalaAjax (bucketType, type) {
        var url = this.$url.options.root
        url = url + '\\' + this._url.file.getToken
        let request = new XMLHttpRequest()
        request.open('POST', url + '?bucketType=' + bucketType, false)
        request.setRequestHeader('Accept', 'application/json')
        request.setRequestHeader('Content-Type', 'application/json')
        request.send()
        if (request.status === 200) {
          if (type === 'img') {
            this.editor.opts.imageUploadParams.token = JSON.parse(request.response).uptoken
          } else if (type === 'aodio') {
            this.editor.opts.fileUploadParams.token = JSON.parse(request.response).uptoken
          }
        }
      }

• 修改 插件 例子
  -

 (function ($) {
  // Add an option for your plugin.
  $.FroalaEditor.DEFAULTS = $.extend($.FroalaEditor.DEFAULTS, {
    myOption: false
  });
  $.FroalaEditor.DefineIcon("buttonIcon", {
    ALT: 'Image button', template: 'image',
    SRC: "/static/froala-editor/img/button.png"
  })
  $.FroalaEditor.RegisterCommand('myButton', {
    // Button title.
    title: '················',

    // Specify the icon for the button.
    // If this option is not specified, the button name will be used.
    icon: 'buttonIcon',

    // Save the button action into undo stack.
    undo: true,

    // Focus inside the editor before the callback.
    focus: true,

    // Show the button on mobile or not.
    showOnMobile: true,

    // Refresh the buttons state after the callback.
    refreshAfterCallback: true,

    // Called when the button is hit.
    callback: function (edit,edit2) {
      var html = this.html.get();
      var i = 0;
      for(i=1;i <= 10;i++){
        if($(html).find(':input[value="'+i+'"]').length==0){
         this.html.insert("<input class=\'filling-space\' readonly=\'readonly\' value=\'"+i+"\'>", false);
         break ;
        }
      }
      if(i>10){
        (new window.Vue()).$message({message: "空的个数最多10个", type: 'warning'})
      }else
      this.addOption();
    },

    // Called when the button state might have changed.
    refresh: function ($btn) {
      // The current context is the editor instance.
      console.log (this.selection.element());
    }
  })
  // Define the plugin.
  // The editor parameter is the current instance.
  $.FroalaEditor.PLUGINS.myPlugin = function (editor) {
    // Private variable visible only inside the plugin scope.
    var private_var = 'My awesome plugin';

    // Private method that is visible only inside plugin scope.
    function _privateMethod () {
      console.log (private_var);
    }

    // Public method that is visible in the instance scope.
    function publicMethod () {
      console.log (_privateMethod());
    }

    // The start point for your plugin.
    function _init () {
      // You can access any option from documentation or your custom options.
      console.log (editor.opts.myOption)

      // Call any method from documentation.
      // editor.methodName(params);

      // You can listen to any event from documentation.
      // editor.events.add('contentChanged', function (params) {});

    }

    // Expose public methods. If _init is not public then the plugin won't be initialized.
    // Public method can be accessed through the editor API:
    // $('.selector').froalaEditor('myPlugin.publicMethod');
    return {
      _init: _init,
      publicMethod: publicMethod
    }
  }
})(jQuery);

当然，这种适用法并不是万能的，例如，你需要使用数学公式时，这种引用方法就会有问题。则可以在index.html中引入：

<!-- Include Editor style. -->
    <link href="static/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    <link href="static/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!-- Include external JS libs. -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include Editor JS files. -->
    <script type="text/javascript" src="static/froala-editor/js/froala_editor.pkgd.min.js"></script>
    <script src="static/froala-editor/js/languages/zh_cn.js"></script>
    </script>

用jquery来操作：

<script>
     // 初始化
     function  initEditor(select, config, callback){
       // eslint-disable-next-line no-undef
       $(select).on('froalaEditor.initialized', function (e, editor) {
        if (callback) {
          callback(e, editor) // 回调
        }
      }).froalaEditor(config)
     }
     // 销毁
     function destroy (select) {
       $(select).froalaEditor('destroy')
     }
     // 修改编辑内容
     function updateVal (select, txt, i) {
       if (i === undefined) {
         $(select).froalaEditor('html.set', txt)
       } else {
         $(select).eq(i).froalaEditor('html.set', txt)
       }
     }
     // 获取编辑内容
     function valueEditor (select, i) {
        return $(select).eq(i).froalaEditor('html.get')
     }
   </script>

 <div id="editor-main"> </div>


 window.initEditor('#editor-main', this.config)