angular2 富文本编辑器 -- froala editor 吐血推荐

1、使用angular-cli创建项目，安装froala editor 模块

npm install angular2-froala-wysiwyg --save

2、配置app.module.ts文件

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

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

3、配置 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)"
],

4、html界面配置

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

没问题这样就配置完成了，但是我们要做一些优化
1、配置图标，和其他项目
2、鼠标经过图标显示中文
3、添加组件，获取编辑器的值
4、将编辑器的值输出给父组件,使用@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',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)
}

angular2 富文本编辑器 -- froala editor 吐血推荐

相关文章