共计 1321 个字符，预计需要花费 4 分钟才能阅读完成。
这一阵子开始学习 angular，张 dalao 给我一个阉割了很多功能的初级后台项目作为练手，虽然初级，但是有些东西对于初学者来说真的很难，就比如说现在就要讲的引入 Swiper 和 Ueditor 这两个插件。难点在于这两个东西都挺老的了，Swiper 还好，而 Ueditor 已经很久没有更新了，在网上查了很久，磕磕绊绊，终于顺利的把这两个东西引入到了项目里。
废话不多说，上图上代码
先讲 Ueditor 吧，下图是引入以后的 Ueditor 富文本编辑器
这个是 Ueditor 的 GitHub 地址
按照 GitHub 的教程来
先把文件 download 下来
然后在项目里安装
npm install ngx-ueditor –save
然后在 AppModel.ts 里面引入下面的代码
import {BrowserModule} from ‘@angular/platform-browser’;
import {FormsModule} from ‘@angular/forms’;
import {UEditorModule} from ‘ngx-ueditor’;
@NgModule({
imports: [
BrowserModule,
FormsModule,
UEditorModule.forRoot({
js: [
`./assets/ueditor/ueditor.config.js`,
`./assets/ueditor/ueditor.all.min.js`,
],
// 默认前端配置项
options: {
UEDITOR_HOME_URL: ‘./assets/ueditor/’
}
})
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
可以看到 js:[] 里面引入了两个 js 文件，这两个文件就在刚刚下下来的压缩包里
路径有点复杂 ngx-ueditor-master\src\assets
把这个 ueditor 文件夹整个解压到项目里的 assets 目录下，这样准备工作就做完了
接下来就是在组件里面用了下面的是 html 代码
<ueditor
[(ngModel)]=”html” // 双向绑定编辑器的内容
[config]=”editorConfig” // 配置
[loadingTip]=”‘ 加载中……'” // 加载时的文字
(onReady)=”_ready($event)” // 加载完成时的回调
(onDestroy)=”_destroy()” // 销毁时的回调
(ngModelChange)=”_change($event)” // 内容改变时的回调 ></ueditor>
接下来是 ts 代码
html = “; // 编辑器内容
editorConfig={
wordCount: true, // 文字计数
initialFrameHeight: 300, // 设置高度
initialFrameWidth: ‘100%’, // 设置宽度
}
_ready($event){
}
_destroy(){
}
_change($event){
}
具体的 API 可以在文档里面的查到，就不多说
这样就可以在 Angular 里面使用 Ueditor 了
下班咯，明天再更新一下 Swiper 的使用