Angular集成Summernote富文本控件

 

Angular集成Summernote富文本控件

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的样式发生冲突，导致富文本不能正常使用。

下面重点说明一下第三种集成方式：

将此代码粘贴到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);