【富文本編輯器】Froala使用（版本2.8.1）

本文轉載自查看原文 2022-03-03 13:45 1008 編輯器/ angularjs

注意：

①為在ionic1項目中使文字加粗，字體顏色正常使用，故選用此版本

②roala（版本2.8.1）依賴於jquery,需要引入jquery

一、html 布局

<div id="editor"></div>

二、文件引入

1、引入css(按需引入)

第1個和第2個為必須引用的，colors.min.css為顏色選擇器的css，char_counter.min.css為統計字數的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">

2、引入js(按需引入)

第1個為必須引用的，align.min.js為控制文本方向的插件，colors.min.js為顏色選擇器插件，font_size.min.js為設置字體大小插件，char_counter.min.js為統計字數插件，zh_cn.min.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>

三、富文本初始化

$('#editor').froalaEditor({
// autofocus: true,
language: 'zh_cn',
placeholderText: '請輸入內容',
charCounterCount: true,//默認顯示字數
charCounterMax: 1000, //最大字數限制,-1為不限制
//自動保存不起作用(待再次驗證)
// saveInterval: 0, //不自動保存,默認10000,0為不自動保存: 2500,
// saveURL: 'XXXX', //自動保存的地址（body參數為html內容）
// saveParams: {}, //保存內容時傳的參數
// quickInsertButtons: ['image', 'table', 'ol', 'ul'],
toolbarButtons: [ 'timeFlag','insert','|','bold', 'color', 'undo', 'redo'],

}).on('froalaEditor.contentChanged', function (e, editor, error, response) {

}).on('froalaEditor.focus', function (e, editor, error, response) {

}).on('froalaEditor.keyup', function (e, editor, error, response) {

}).on('froalaEditor.keydown', function (e, editor, error, response) {

})

四、獲取富文本的內容

$('#editor').froalaEditor('html.get', true);

五、設置富文本的內容

$('#editor').froalaEditor('html.set','富文本內容');

六、此版本富文本編輯器貌似沒有不可編輯的屬性（目前沒找到）

if($('.fr-element').attr('contenteditable')){
    $('.fr-element').attr('contenteditable',false)
}

七、富文本編輯器自定義圖標

 $.FroalaEditor.DefineIcon(
    'timeFlag',
    {
        NAME: 'plus',
        SVG_KEY: 'add',
        SRC: '圖片路徑',
        ALT: 'Image button',
        template: 'image'
    }
);

八、富文本編輯器自定義圖標事件

$.FroalaEditor.RegisterCommand('timeFlag', {
    title: '時刻標注',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
        //插入html　
        var html = `<input class='note_flag_img'  type='button' value='${$scope.notedurgress}' "/><br>`;
        this.html.insert(html);


    }
});

九、富文本編輯器銷毀

富文本編輯器初始化后，再初始化不起作用，需要先銷毀再初始化

$('#editor').froalaEditor('destroy');

十、該富文本編輯器為收費版本，會有收費提示，隱藏此提示

.fr-wrapper > div[style*='z-index: 9999'] {
    position: absolute!important;
    top: -10000px;
    opacity: 0;
}

十一、動態修改自定義圖標是否高亮，不要使用視圖中的id實現，因為id會動態變化

$('input[data-cmd="timeFlag"]').attr('src','apps/images/course/take_time_icon.png'); //時間標記