一款基于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"
    })
  ]
})

预览

校长红包福利