分享 - 富文本编辑器 Froala Editor

Froala Editor

富文本编辑器是开发中不可或缺的,过去几年自己也尝试过很多种不同的编辑器,比如:

以上就不详细介绍了,其中个人还是比较喜欢 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/plug...

  3. 可以自定义主题和插件,比如控制它的 UI:https://www.froala.com/wysiwyg-editor/cust...

  4. 支持很多的前端框架:VueJS, ReactJS, Angular, Meteor, Ember 等。因为平时会用到 VueJs 和 ReactJs,这2个 NPM 的包很方便

file

  1. 支持 Inline 编辑,可以点击这个链接去试试:https://www.froala.com/wysiwyg-editor/inli...

  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}
    />
  );
}
本作品采用《CC 协议》,转载必须注明作者和本文链接
本帖由系统于 5年前 自动加精
jltxwesley
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 24

确实 非常非常的贵

5年前 评论
jltxwesley

@wandell

是的,当初公司买的时候差不多半价,没想到价格一直飙升。

5年前 评论
Martist

感觉像是销售来发帖了 :sob:

5年前 评论
阿麦

我之前也考虑过 不过要说服上面愿意花钱去买个富文本编辑器是有点难的 :sob:

5年前 评论
jltxwesley

@Martist

只是推荐一些平常用的比较好的开发工具而已 你想的太多了 :joy:

5年前 评论

https://github.com/froala/vue-froala-wysiw...
vuejs 版本的是可以免费使用么?还是试用一下后面会提示购买 强制购买

5年前 评论
jltxwesley

@vopdoo

可以,其实你可以一直用,它只是会显示你需要 license:

file

5年前 评论

我觉得 ueditor 也不错啊
虽然已经很久没有更新了

5年前 评论

@jltxwesley

去看了一下文档中的配置方法,但自己使用的是vue-cli3 建立的项目,
文档中的

  1. Make sure you have the right Webpack settings for loading the CSS files, Font Awesome and jQuery.
    不知道怎么在vue-cli3 下配置加载Font Awesome jQuery

对vue-cli3 和webpack的配置没有太多的投入学习和研究,希望能指教一下, 非常感谢。

5年前 评论

这个好贵啊

5年前 评论
jltxwesley

@vopdoo

第一种比较简单的方法,你可以在 main.js 里面直接导入(不推荐),比如:

import 'font-awesome/css/font-awesome.css';
import $ from 'jquery';
window.$ = $;
window.jQuery = $;

第二种好一点的方法,关于加载 jquery,你需要在根目录下创建一个新的 vue.config.js 去配置 webpack:

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
      }),
    ],
  },
};

关于 font-awesome 如果你自己不使用的话,和上面一样 import 就行,如果自己使用,建议看下这个文档:https://fontawesome.com/how-to-use/on-the-...

5年前 评论

@jltxwesley

谢谢提供的两种方式,我之前在配置jquery时,没有引入

const webpack = require('webpack');

在main.js 中导入相关资源


// Require Froala Editor js file.
import 'froala-editor/js/froala_editor.pkgd.min';

// Require Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css';
import 'font-awesome/css/font-awesome.css';
import 'froala-editor/css/froala_style.min.css';

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

(中代码块没有高亮)

在需要使用的编辑器的页面直接使用froala组件
试用体验了一下,感受是 颜值极高 功能强大
file

再次感谢!

5年前 评论

这么贵的价格,是用来吓人的嘛。

5年前 评论

你好,我想问一下。

在模板的components中并没有注册组件 froala,那么它是如何被注册的呢?

5年前 评论
jltxwesley

@zhangluJs

你是指 React 的那个 component 里?直接导入使用的。

5年前 评论

ctrl+v多次(好像11次)后就会突然崩溃成一个textarea,这是什么原因呢

5年前 评论

你好,我使用react-froala-wysiwyg ,安装报下面错误,是什么原因呢?

file

5年前 评论
jltxwesley

@creatint
之前用免费版的时候也有过类似问题,感觉还是有限制。

5年前 评论
jltxwesley

@gh2019
应该是你 python 版本的问题,你从 3 换成 2 试试。

5年前 评论
oyghan

非常nice的编辑器,谢谢分享 :+1:

4年前 评论

老哥 这编辑器直接复制图片进去会存base64,这怎么改成和上传图片一样的配置啊

1年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!