一款基于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地址：
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来数据传递

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"
    })
  ]
})

预览

校长红包福利