Angular整合Summernote富文字控制項

2021-09-10 06:32:02 字數 1366 閱讀 6094

1、angular7、boostrap 3、jquery整合summernote

參考官方文件: > 安裝 > 簡單的例子 部分

2、angular7、boostrap 3、jquery整合summernote

參考官方文件: > 安裝 > 對於bootstrap 4 部分

3、angular7、jquery整合lite版本的summernote

參考官方文件: > 安裝 > 沒有bootstrap 部分

因為前兩種整合方式容易與boostrap的樣式發生衝突,導致富文字不能正常使用。

下面重點說明一下第三種整合方式:

將此**貼上到html檔案中就可以生成summernote富文字控制項。

以下說明增加到自己專案的方法:

拷貝到angular專案,例如manager\src\assets\plugins\summernote資料夾下面,

拷貝到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();
賦值方法為:$('#summernote').summernote('code', '大華科技')

取值方法為:this.value = $('#summernote').summernote('code');

例如:顯示方法為:

在頁面元件(例如book-detail.component.html)中增加,

在頁面元件(例如book-detail.component.ts)頭部引入

declare var $: any;

從後台取值並賦值給富文字控制項:

$('#summernote').html(this.value);

Angular2如何整合其他外掛程式

我是鐘鐘 發表於1個月前 效果和對應的專案 在這裡 請給我加個星,謝謝。前言 現在有很多朋友在接觸angular2的時候,總是不可避免的會使用一些其他的第3方的外掛程式,而這些外掛程式可能都是基於jquery的,而且也沒有對應的angular2的版本,這裡我就來講解一下,在這種情況下,如何整合第3方...

2019summer系列 第12場

給定乙個真分數p q p q 請你求出它的小數部分都包括0 9中的哪些數字。例如1 2 0.5,只包含數字5 1 3 0.33333 只包含數字3,1 7 0.142857142857 包含數字124578。input 兩個整數p和q,1 p q 1000000 output 從小到大輸出小數部分出...

Angular2整合其他外掛程式的方法

前言 現在有很多朋友在接觸angular2的時候,總是不可避免的會使用一些其他的第3方的外掛程式,而這些外掛程式可能都是基於jquery的,而且也沒有對應的angular2的版本,這裡我就來講解一下,在這種情況下,如何整合第3方的jquery外掛程式。我們以angular2整合ztree為例來說明整...