FroalaEditor使用方法汇总

 

最近在整个移动端富文本编辑器。写完后，在安卓端表现良好，在苹果端测试让我直吐血。开始在网上找了一圈，也没发现自己中意的那款。

今天无意中发现了FroalaEditor，经过在移动端测试一番，表现的好的不要不要的。只是如果你需要用在商业项目中，需要购买它的版权。

所以你可以把它单纯的作为自己的一个学习项目，或者用财力购买它，或者用你的智力破解它（没办法，穷！）。

直接上它的官网地址：FroalaEditor

 

它的功能着实强大，我的项目中只需要用到如下图的那些功能：

 

大概使用方法如下：

1.按需引入该插件需要的js文件和css文件。

你可以下载该项目至本地或者直接引用cdn地址，我这里就是引用的cdn。

css文件有如下：

<link href="https://cdn.bootcss.com/froala-editor/2.8.1/css/froala_editor.min.css" rel="stylesheet"> 
<link href="https://cdn.bootcss.com/froala-editor/2.8.1/css/froala_style.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/froala-editor/2.8.1/css/plugins/colors.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/froala-editor/2.8.1/css/plugins/char_counter.min.css" rel="stylesheet">

第1个和第2个为必须引用的，colors.min.css为颜色选择器的css，char_counter.min.css为统计字数的css,如果你不需要可以不用引用。

 

js文件如下：

<script src="https://cdn.bootcss.com/froala-editor/2.8.1/js/froala_editor.min.js"></script>
<script src="https://cdn.bootcss.com/froala-editor/2.8.1/js/plugins/align.min.js"></script>
<script src="https://cdn.bootcss.com/froala-editor/2.8.1/js/plugins/colors.min.js"></script>
<script src="https://cdn.bootcss.com/froala-editor/2.8.1/js/plugins/font_size.min.js"></script>
<script src="https://cdn.bootcss.com/froala-editor/2.8.1/js/plugins/char_counter.min.js"></script>
<script src="https://cdn.bootcss.com/froala-editor/2.8.1/js/languages/zh_cn.js"></script>

第1个为必须引用的，align.min.js为控制文本方向的插件，colors.min.js为颜色选择器插件，font_size.min.js为设置字体大小插件，char_counter.min.js为统计字数插件，zh_cn.min.js为汉化插件。

 

2.html代码如下：

<div id="editor">
    <div id=\'edit\'>
    
    </div>
    <button id="save">保存</button>
</div>

 

3.实例化富文本编辑器：

$(function() {
    var editCont = \'<p>adddddp</p>\';
    $.FroalaEditor.DefineIcon(\'color\', {SRC: \'txt_color@2x.png\', ALT: \'Image button\', template: \'image\'}); //自定义图标
        $(\'#edit\').froalaEditor({
            autofocus: true,
            toolbarButtonsXS: [\'undo\', \'redo\', \'|\', \'bold\', \'italic\', \'underline\', \'|\', \'fontSize\', \'align\', \'color\'],
            language: \'zh_cn\',
            colorsHEXInput: false,
            colorsBackground: [\'#2E2E2E\', \'#767676\', \'#DF281B\', \'#F4821C\', \'#46AC43\', \'#2E5BF7\', \'#A249B3\', \'REMOVE\'],
            colorsText: [\'#2E2E2E\', \'#767676\', \'#DF281B\', \'#F4821C\', \'#46AC43\', \'#2E5BF7\', \'#A249B3\', \'REMOVE\'],
            fontSize: [\'14\', \'16\', \'18\', \'20\'],
            fontSizeDefaultSelection: \'16\',
            height: 220,
            htmlAllowComments: false,
            pasteAllowedStyleProps: [\'font-size\', \'color\'],
            placeholderText: \'请输入内容\',
            charCounterMax: 500
        }).froalaEditor(\'html.set\', editCont);
    });
    
    $("#save").click(function(){
        $(\'#edit\').froalaEditor(\'html.get\', true); //返回富文本编辑里面的html代码
    })

 

官网中自带的颜色选择器图标是如下图所示的小水滴

 

我需要换成如下图所示的图标：

 

我们可以通过 $.FroalaEditor.DefineIcon 来自定义图标的样式。上面的js代码中已经写了注释。如果你想换成其他字体或者图片，官网提供了很详细的方法跟例子。

好了，该插件的使用方法已经讲解完。希望能够给遇到此问题的你带来一丝灵感~