今天完成的事情：
关于富文本编辑器：
在ng2中所用到的是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
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/froala-editor/css/froala_editor.pkgd.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/froala-editor/js/froala_editor.pkgd.min.js"
],
4、优化
配置图标，和其他项目
鼠标经过图标显示中文
添加组件，获取编辑器的值
显示中文，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)
<!--
[(froalaModel)]="froalaText"
-->
<div [froalaEditor]="option" [(froalaModel)]="froalaText"></div>
配置图标
language: "zh_cn",
toolbarButtons: ['fullscreen', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'align', 'insertLink', 'insertImage', 'insertHR', 'subscript', 'superscript'],
完整代码：
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: ['fullscreen', '|', 'bold', 'italic', 'underline', 'strikeThrough', 'align', 'insertLink', 'insertImage', 'insertHR', 'subscript', 'superscript'],
codeMirror: false, // 高亮显示html代码
codeMirrorOptions: { // 配置html代码参数
tabSize: 4
},
// 事件, 每次输入,就将值传递给父组件, 或者使用失去焦点的时候传递。
events: {
'froalaEditor.keyup': function (e, editor) {
that.froala.emit(that.froalaText);
console.log(editor.selection.get());
}
}
}
}
}
明天计划的事情：
继续学习angular
注意的问题：
编辑器作为一个组件来单独在其他组件中引用的，所有的值要通过@Output() 传递给父组件
收获：
富文本编辑器的知识点
返回列表
评论