分享 - 富文字編輯器 Froala Editor

jltxwesley發表於2018-08-27

富文字編輯器是開發中不可或缺的，過去幾年自己也嘗試過很多種不同的編輯器，比如：

以上就不詳細介紹了，其中個人還是比較喜歡 Redactor 的： 簡單清晰， UI 好看，功能全面。

在早期開發中，公司一直使用的是 CKEditor v3 和 v4 版本，後來捨棄之後，就找到了這一款個人認為 史上最NB的編輯器：Froala Editor：

Beautiful Javascript web editor that's easy to integrate for developers and your users will simply fall in love with its clean design.

file

選擇它的理由：

  1. API 和 文件 非常全面，開發者很容易上手。

  2. 自帶30+有用的外掛：https://www.froala.com/wysiwyg-editor/plugins

  3. 可以自定義主題和外掛，比如控制它的 UI：https://www.froala.com/wysiwyg-editor/customize

  4. 支援很多的前端框架：VueJS, ReactJS, Angular, Meteor, Ember 等。因為平時會用到 VueJs 和 ReactJs，這2個 NPM 的包很方便：

file

  1. 支援 Inline 編輯，可以點選這個連結去試試：https://www.froala.com/wysiwyg-editor/inline

  2. 網站上提供了大量豐富的例子。

  3. 內建圖片管理器和圖片編輯器：

file

file

  1. 最後最重要的一點，「程式碼和顏值就像 Laravel 一樣！」Love beautiful code :smile: :laughing:

有興趣的試試，它可以一直免費使用，只不過會顯示需要 license 而已！正式版的價格，unlimited domains 非常非常貴！:sweat:

file

最後貼一段平時用的 JS config：

$('.froala_editor').froalaEditor({
    key: '',
    language: 'zh_cn',
    height: 500,

    // disable quick insert
    quickInsertTags: [],

    // toolbar buttons
    toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'paragraphFormat', 'fontSize', 'color', '|', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertFile', 'insertImage', 'insertVideo', 'embedly', 'insertTable', '|', 'insertHR', 'selectAll', 'clearFormatting', '|', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],

    // upload file
    fileUploadParam: 'file',
    fileUploadURL: '/media',
    fileUploadMethod: 'POST',
    fileMaxSize: 20 * 1024 * 1024,
    fileAllowedTypes: ['*'],

    // upload image
    imageUploadParam: 'file',
    imageUploadURL: '/media',
    imageUploadMethod: 'POST',
    imageMaxSize: 5 * 1024 * 1024,
    imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif', 'bmp', 'svg+xml'],

    // upload video
    videoUploadParam: 'file',
    videoUploadURL: '/media',
    videoUploadMethod: 'POST',
    videoMaxSize: 50 * 1024 * 1024,
    videoAllowedTypes: ['avi', 'mov', 'mp4', 'm4v', 'mpeg', 'mpg', 'wmv', 'ogv'],
}).on('froalaEditor.file.error', function (e, editor, error, response) {
    // handle errors
}).on('froalaEditor.image.error', function (e, editor, error, response) {
    // handle errors
}).on('froalaEditor.video.error', function (e, editor, error, response) {
    // handle errors
});

和一段 ReactJS config：（程式碼並不全，完整的例子需要另一篇文章）

import React from "react";
import FroalaEditor from "react-froala-wysiwyg";
const froala_key = process.env.REACT_APP_FROALA_KEY;

export default function(props) {
  let config = {
    toolbarButtons: [
      "fullscreen",
      "bold",
      "italic",
      "underline",
      "strikeThrough",
      "|",
      "fontSize",
      "color",
      "paragraphFormat",
      "align",
      "formatOL",
      "formatUL",
      "outdent",
      "indent",
      "quote",
      "|",
      "insertHR",
      "clearFormatting",
      "|",
      "undo",
      "redo"
    ],
    toolbarInline: true,
    plugins: [],
    quickInsertTags: "",
    key: froala_key,
    imageInsertButtons: [],
    ...props
  };

  return (
    <FroalaEditor
      config={config}
      model={props.text}
      onModelChange={props.onTextChange}
      style={props.style}
    />
  );
}

相關文章