本文共 1735 字,大约阅读时间需要 5 分钟。
Angular集成Summernote富文本控件
1、Angular7、Boostrap 3、jQuery集成Summernote
参考官方文档: > 安装 > 简单的例子 部分
2、Angular7、Boostrap 3、jQuery集成Summernote
参考官方文档: > 安装 > 对于bootstrap 4 部分
3、Angular7、jQuery集成Lite版本的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)中增加,
<div id="summernote"></div>
在页面组件(例如book-detail.component.ts)头部引入
declare var $: any;
从后台取值并赋值给富文本控件:
$('#summernote').html(this.value);
转载地址:https://daqiang.blog.csdn.net/article/details/86661160 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!