froala富文本编辑器的使用

froala富文本编辑器是一款超好用的编辑器，之前使用的wangeditor，但同一行无法插入多张图片且图片大小无法修改，更换更好用的富文本编辑器，在网上找了很多编辑器，最终选用了 froala ，很强大也很美观，但网上关于froala的文档却很少，使用过程中踩了很多坑，在这里记录下。
1、froala在服务器运行会有样式差异，商用收费；
2、froala的文件接口返回接口是固定的：

{"link":"filepath"}

3、froala全量引用文件：

<link rel="stylesheet" href="/froala/css/froala_editor.pkgd.css">
<link rel="stylesheet" href="/froala/css/dark.css">
<script type="text/javascript" src="/froala/js/froala_editor.pkgd.min.js"></script>
<script type="text/javascript" src="/froala/js/zh_cn.js"></script>

我这边做过路径修改，文件为： froala_editor.pkgd.css、dark.css、froala_editor.pkgd.min.js、zh_cn.js
官网的汉化文件有些翻译有问题，有些没有翻译，需要自己改下，默认英文，zh_cn.js文件不要求汉化可以不引入。
4、获取富文本框内容：
方法一：

editor.events.bindClick($('body'), '#save', function () {var fs = editor.html.get();editor.events.focus();});

方法二：jquery自带的方法

$('#edit .fr-view').html();

5、展示HTML时，样式消失
在需要展示HTML的地方引入样式文件，在展示 html 的元素内加类名 fr-view ；

6、去掉样式差异（将这段代码注释掉，2.8.1版本格式化后大概在1240行左右）

  // var d = new Image;// !0 === f.ul && (g(), d.src = o ? "".concat(p(L(t)), "e=").concat(i) : "".concat(p(L(t)), "u")), !0 === f.ul && (f.events.on("contentChanged", function () {//     (function e() {//         return u(b) || u(E) || h(b) || h(E)//     })() && g()// }), f.events.on("html.get", function (e) {//     return e + L("qD2H-9G3ioD-17qA1tE1B-8qI3A4hA-13C-11E2C1njfldD1E6pg1C-8sC3hfbkcD2G3stC-22gqgB3G2B-7vtoA4nweeD1A31A15B9uC-16A1F5dkykdc1B8dE-11bA3F2D3A9gd1E7F2tlI-8H-7vtxB2A5B2C3B2F2B5A6ldbyC4iqC-22D-17E-13mA3D2dywiB3oxlvfC1H4C2TjqbzlnI3ntB4E3qA2zaqsC6D3pmnkoE3C6D5wvuE3bwifdhB6hch1E4xibD-17dmrC1rG-7pntnF6nB-8F1D2A11C8plrkmF2F3MC-16bocqA2WwA-21ayeA1C4d1isC-22rD-13D6DfjpjtC2E6hB2G2G4A-7D2==")// }// )), f.events.on("html.set", function () {//     var e = f.el.querySelector('[data-f-id="pbf"]');//     e && T(e).remove()// }), f.events.on("destroy", function () {//     b && b.length && b.remove()// }, !0)

仅为学习使用，支持正版。

froala富文本编辑器的使用相关推荐

Froala富文本编辑器
Froala富文本编辑器 https://www.froala.com/wysiwyg-editor
所见即所得html5编辑器,一个漂亮的所见即所得(WYSIWYG)富文本编辑器:Froala
本文翻译来自wysiwyg-editor,大家想看原文可以点击此链接. 介绍 WYSIWYG HTML编辑器是一款有史以来最强大的JavaScript富文本编辑器之一.它采用了最新的技术,并利用jQu ...
froala editor富文本编辑器出现验证失败的解决方法
froala editor富文本编辑器出现验证失败的解决方法出现这种情况,首先要下载源码包地址 https://www.froala.com/wysiwyg-editor 之后引用本地的 froal ...
android 富文本框架_五种JavaScript富文本编辑器，总有一款适合你
全文共2099字,预计学习时长4分钟也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商 ...
Vue/js 富文本编辑器、excel编辑器合集
Vue 富文本编辑器 wangEditor JMEditor vue-quill-editor vue2-editor simditor kindeditor ueditor tinymce cked ...
14款前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
【JavaWeb】之富文本编辑器
[JavaWeb]富文本编辑器前言一.富文本编辑器介绍二.富文本编辑器使用 1.引入编辑器(多种引入方式) 2.使用编辑器三.主流富文本编辑器推荐 1.TinyMCE 2.CKEditor 3 ...
LayUI - 富文本编辑器
一个做后端的猿,难免用到LayUI,首先在这里,不推荐使用,坑多一.富文本编辑器缺点:功能太少,只能满足简单需求,只有下面这几个功能废话少说,直接丢代码 html部分 <link rel= ...
几款主流好用的富文本编辑器（所见即所得常用编辑器）介绍
富文本编辑器富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文 ...
五种JavaScript富文本编辑器,总有一款适合你
也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商业机密. 在这样的情况下,如果想知道& ...

froala富文本编辑器的使用

froala富文本编辑器的使用相关推荐

最新文章

热门文章