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: '[e-mail]', 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代碼中已經寫了注釋。如果你想換成其他字體或者圖片，官網提供了很詳細的方法跟例子。

好了，該插件的使用方法已經講解完。希望能夠給遇到此問題的你帶來一絲靈感~