内容简介:这一阵子开始学习angular,张dalao给我一个阉割了很多功能的初级后台项目作为练手,虽然初级,但是有些东西对于初学者来说真的很难,就比如说现在就要讲的引入Swiper和Ueditor这两个插件。难点在于这两个东西都挺老的了,Swiper还好,而Ueditor已经很久没有更新了,在网上查了很久,磕磕绊绊,终于顺利的把这两个东西引入到了项目里。废话不多说,上图上代码
这一阵子开始学习angular,张dalao给我一个阉割了很多功能的初级后台项目作为练手,虽然初级,但是有些东西对于初学者来说真的很难,就比如说现在就要讲的引入Swiper和Ueditor这两个插件。
难点在于这两个东西都挺老的了,Swiper还好,而Ueditor已经很久没有更新了,在网上查了很久,磕磕绊绊,终于顺利的把这两个东西引入到了项目里。
废话不多说,上图上代码
先讲Ueditor吧,下图是引入以后的Ueditor富文本编辑器
按照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的使用
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 使用 MonoRepo 管理前端项目
- 使用 Mkdocs 制作项目文档
- 使用Taro开发项目总结
- 使用 Maven 构建 Java 项目
- 使用gradle构建java项目
- flask使用蓝图规划大型项目
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
区块链核心算法解析
【瑞士】Roger Wattenhofer(罗格.瓦唐霍费尔) / 陈晋川、薛云志、林强、祝庆 / 电子工业出版社 / 2017-8 / 59.00
《区块链核心算法解析》介绍了构建容错的分布式系统所需的基础技术,以及一系列允许容错的协议和算法,并且讨论一些实现了这些技术的实际系统。 《区块链核心算法解析》中的主要概念将独立成章。每一章都以一个小故事开始,从而引出该章节的内容。算法、协议和定义都将以形式化的方式描述,以便于读者理解如何实现。部分结论会在定理中予以证明,这样读者就可以明白为什么这些概念或算法是正确的,并且理解它们可以确保实现......一起来看看 《区块链核心算法解析》 这本书的介绍吧!
MD5 加密
MD5 加密工具
UNIX 时间戳转换
UNIX 时间戳转换