1、Angular7、Boostrap 3、jQuery集成Summernote
参考官方文档:https://summernote.org/getting-started/#get-summernote > 安装 > 简单的例子 部分
2、Angular7、Boostrap 3、jQuery集成Summernote
参考官方文档:https://summernote.org/getting-started/#get-summernote > 安装 > 对于bootstrap 4 部分
3、Angular7、jQuery集成Lite版本的Summernote
参考官方文档:https://summernote.org/getting-started/#get-summernote > 安装 > 没有Bootstrap 部分
因为前两种集成方式容易与Boostrap的样式发生冲突,导致富文本不能正常使用。
下面重点说明一下第三种集成方式:
bootstrap4
将此代码粘贴到HTML文件中就可以生成Summernote富文本控件。
以下说明增加到自己项目的方法:
下载以下3个文件:
https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css
https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js
拷贝到Angular项目,例如manager\src\assets\plugins\summernote文件夹下面,
下载以下3个字体文件:
https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/font/summernote.eot
https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/font/summernote.ttf
https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/font/summernote.woff
拷贝到Angular项目,例如manager\src\assets\plugins\summernote\font文件夹下面,
修改manager\.angular-cli.json文件,
在"styles"中增加"../src/assets/plugins/summernote/summernote-lite.css",
在"scripts"中增加
"../src/assets/plugins/summernote/jquery-3.2.1.slim.min.js",
"../src/assets/plugins/summernote/summernote-lite.js"
在页面组件(例如book-form.component.html)中增加,
在页面组件(例如book-form.component.ts)头部引入
declare var $: any;
初始化方法ngOnInit() 中增加,
$('#summernote').summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 100
});
赋值方法为:$('#summernote').summernote('code', '大华科技')
取值方法为:this.value = $('#summernote').summernote('code');
例如:
显示方法为:
在页面组件(例如book-detail.component.html)中增加,
在页面组件(例如book-detail.component.ts)头部引入
declare var $: any;
从后台取值并赋值给富文本控件:
$('#summernote').html(this.value);