angular2 富文本編輯器 -- froala editor 吐血推薦

一、使用angular-cli建立項目，安裝froala editor 模塊

npm install angular2-froala-wysiwyg --save

二、配置app.module.ts文件

import { FroalaEditorModule, FroalaViewModule } from 'angular2-froala-wysiwyg';
...

@NgModule({
   ...
   imports: [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot() ... ],
   ... 
})

三、配置 angular-cli.json

css

"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.css",
  "../node_modules/froala-editor/css/froala_editor.pkgd.min.css"
],

js

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/froala-editor/js/froala_editor.pkgd.min.js"
],

字體

"addons": [
  "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
],

四、html界面配置

<div [froalaEditor]>你好, Froala!</div>

沒問題這樣就配置完成了，可是咱們要作一些優化
一、配置圖標，和其餘項目
二、鼠標通過圖標顯示中文
三、添加組件，獲取編輯器的值
四、將編輯器的值輸出給父組件,使用@Output()

顯示中文，angular-cli.json添加zh_cn.js文件

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/echarts/dist/echarts.min.js",
        "../node_modules/froala-editor/js/languages/zh_cn.js"
      ],

獲取編輯器的值（froalaText)

<!--
  [froalaEditor]="option" 這是配置項,若是沒有本身定義option,那麼就是默認配置
  [(froalaModel)]="froalaText" 這是獲取編輯器的值html
-->
<div [froalaEditor]="option" [(froalaModel)]="froalaText"></div>

配置圖標，其餘配置可參考官方文檔

language: "zh_cn",
toolbarButtons: ['fullscreen', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'align', 'insertLink', 'insertImage', 'insertHR', 'subscript', 'superscript'],

最後，編輯器確定是做爲一個組件，來單獨在其餘組件中引用的，全部他的值要經過@Output() 傳遞給父組件，看下面簡單的例子

import {Component, Output, EventEmitter, OnInit} from "@angular/core";
@Component({
  selector: "blog-froala",
  templateUrl: "../templates/froala.tpl.html"
})
export class FroalaComponent implements OnInit {
  @Output() froala = new EventEmitter();

  option:Object;
  froalaText:string;

  constructor() {
    this.froalaText = "";

  }

  ngOnInit() {
    // 在事件中要使用外部的this,由於函數內部也有this因此講this的值賦給that
    var that = this;
    // 參數配置
    // https://www.froala.com/wysiwyg-editor/docs/options?utm_expid=98676916-2.gb-QgBReTCCS2F60oBIe_g.0&utm_referrer=https%3A%2F%2Fwww.google.com%2F#language
    this.option = {
      language: "zh_cn", //配置語言
      placeholderText: "請輸入內容", // 文本框提示內容
      charCounterCount: true, // 是否開啓統計字數
      charCounterMax: 200, // 最大輸入字數,目前只支持英文字母
      // 注意導航條的配置, 按照官方的文檔,沒法配置,只能使用toolbarButtons來配置了。
      toolbarButtons: ['fullscreen', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'align', 'insertLink', 'insertImage', 'insertHR', 'subscript', 'superscript'],
      codeMirror: false, // 高亮顯示html代碼
      codeMirrorOptions: { // 配置html代碼參數
        tabSize: 4
      },
      // 上傳圖片，視頻等穩健配置
      imageUploadURL:this.questionListService.IP+"sns/uploadPhoto",//GLOBAL.INCONFIG.getIP()+接口名稱,
            //imageUploadURL:"http://11.177.50.63:9999/emanager/sns/uploadPhoto",//本地路徑
imageUploadParams:{uid:this.questionListService.userInfo.id},//接口其餘傳參,默認爲空對象{},
imageUploadMethod:"POST",//POST/GET,
      // 事件, 每次輸入,就將值傳遞給父組件, 或者使用失去焦點的時候傳遞。
      events: {
        'froalaEditor.keyup': function (e, editor) {
          that.froala.emit(that.froalaText);
          console.log(editor.selection.get());
        }
      }
    }
  }
}

父組件中引用，獲取編輯器的值 parent.html

<blog-froala (froala)="froalaContent($event)"></blog-froala>

父組件 parent.component.ts，組件中定義函數，這個函數會在子組件中觸發，從而父組件獲取子組件中編輯器的值。

froalaContent(event) {
    console.log(event)
}