【富文本编辑器】Froala使用（版本2.8.1）

注意：

①为在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'); //时间标记