一款基於vue好用的富文本編輯器Froala WYSIWYG Editor

前言：

基於Vue使用過幾款富文本編輯器：
wangEditor
vue-quill-editor
vue2-editor

趟過坑，可是這幾款總感受不是那麼適合項目需求，苦苦搜尋總算找到一款好用的富文本編輯器Froala WYSIWYG Editor

---

支持特性：

快速預覽Demo：
Basic demo:
Inline demo:
Full list:

---

使用

廢話很少說，開始擼代碼

Vuejs v2.0+ -Froala WYSIWYG Editor

安裝

npm install vue-froala-wysiwyg --save

引入

main.js

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

//引入中文語言包
require('froala-editor/js/languages/zh_cn')

//引入 Froala Editor css files.
require('froala-editor/css/froala_editor.pkgd.min.css')
require('font-awesome/css/font-awesome.css')//此處可在index.html中引入：font-awesome cdn地址：<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
require('froala-editor/css/froala_style.min.css')

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

app.vue

主要經過config來配置富文本編輯器，v-model來數據傳遞

<template>
  <div id="app">
   <froala :tag="'textarea'" :config="froalaConfig" v-model="froalaContent"></froala>
  </div>
</template>

<script>
import VueFroala from 'vue-froala-wysiwyg';

export default {
  name: 'app',
  data () {
    return {
         //More -> https://www.froala.com/wysiwyg-editor/docs/options
       froalaConfig: {
          toolbarButtons: ['undo', 'redo', 'clearFormatting', '|', 'bold', 'italic', 'underline','strikeThrough','|', 'fontFamily', 'fontSize', 'color', '|','paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', '|', 'print', 'spellChecker', 'help', '|', 'fullscreen'],//['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],//顯示可操做項
          // theme: "dark",//主題
          placeholder: "請填寫內容",
          language: "zh_cn",//國際化
          imageUploadURL: "http://i.froala.com/upload",//上傳url
          fileUploadURL: "http://i.froala.com/upload",//上傳url 更多上傳介紹 請訪問https://www.froala.com/wysiwyg-editor/docs/options
          quickInsertButtons: ['image', 'table', 'ul', 'ol', 'hr'],//快速插入項
          // toolbarVisibleWithoutSelection: true,//是否開啓 不選中模式
          // disableRightClick: true,//是否屏蔽右擊
          colorsHEXInput: false,//關閉16進制色值
          toolbarSticky: true,//操做欄是否自動吸頂
          zIndex: 99999,
          events: {
            'froalaEditor.initialized': function () {
              console.log('initialized')
            }
          },
        },
        froalaContent: "<p>www</p>",//默認測試文本
    }
  }
}
</script>

Webpack settings

var webpack = require('webpack')
var path = require('path')

module.exports = {
  module: {
    loaders: [

      // ...

      // Css loader. //css裝載器
      {
        test: /\.css$/,
        loader: 'vue-style-loader!css-loader'
      },

      // Font awesome loader. //若是引入Font awesome 須要這塊設置
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: path.posix.join('path/to/yours/assets/directory', 'fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  vue: {
    loaders: {

      // ...

      // Css loader for Webpack 1.x .
      css: 'vue-style-loader!css-loader'
    }
  },
  plugins: [

    // ...

    // Jquery loader plugin. 這塊挺重要
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
})

預覽

校長紅包福利