angular8.5集成TinyMce5的使用和詳細配置(推薦)
更新時間：2020年11月16日 11:04:37 作者：mkl-001
這篇文章主要介紹了angular8.5集成TinyMce5的使用和詳細配置,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
編寫人：mkl
日期：2020.11.16
本篇主要講解的是TinyMce的配置，原理不做講解，請自行查閱文檔TinyM
TinyMCE是什么？
TinyMCE是一款易用、且功能強大的所見即所得的富文本編輯器。同類程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
TinyMCE的優(yōu)勢：
- 開源可商用，基于LGPL2.1
- 插件豐富，自帶插件基本涵蓋日常所需功能（示例看下面的Demo-2）
- 接口豐富，可擴展性強，有能力可以無限拓展功能
- 界面好看，符合現(xiàn)代審美
- 提供經(jīng)典、內(nèi)聯(lián)、沉浸無干擾三種模式（詳見“介紹與入門”）
- 對標準支持優(yōu)秀（自v5開始）
- 多語言支持，官網(wǎng)可下載幾十種語言。
高級插件需要收費，比如：格式刷、文件上傳、導出pdf等功能，具體請查看官方文檔；
官網(wǎng)及文檔：www.tiny.cloud
官網(wǎng)及文檔(中文)：http://tinymce.ax-z.cn/ 此文檔不全
Github：github.com/tinymce
快速開始
使用第三方類庫 ngx-tinymce
1、git地址
https://github.com/cipchk/ngx-tinymce
2、安裝部署
npm install --save-dev ngx-tinymce@7.0.0
3、初步配置
(1) TinyMCE的自托管發(fā)行版可下載，用于開發(fā)和生產(chǎn)軟件包
baseURL：需要下載開發(fā)包，放到項目中，可自定義配置，如下圖：
(2) 像富文本框你可能需要在所有子模塊中都會可能會用到，因為建議在 SharedModule 模塊中導入和導出他。
在根模塊app.module.ts配置：
import { NgxTinymceModule } from 'ngx-tinymce';
@NgModule({
imports: [
BrowserModule,
NgxTinymceModule.forRoot({
baseURL: './assets/library/tinymce/'
})
]
})
export class AppModule { }
4、詳細配置
(1) Html模板文件test.component.html中添加配置：
<tinymce [(ngModel)]="html" [config]="initConfig"></tinymce>
(2) test.component.ts添加配置：
引入：import { NgxTinymceModule } from 'ngx-tinymce';
聲明配置變量：public initConfig: any;
// 初始化組件
initTinymce() {
this.initConfig = {
// 占位符
placeholder: '請輸入內(nèi)容',
// 高度 max_height, max_width, min_height, min_width
min_height: 600,
// 編輯器底邊距
// autoresize_bottom_margin: 50,
// 編輯器body部分距離左右2邊的距離
// autoresize_overflow_padding: 50,
// 皮膚 與assets\library\tinymce\skins\ui 下文件夾對應，
// 黑色
// skin: 'oxide-dark',
// 皮膚路徑
// skin_url: '/css/mytinymceskin'
// 換行時，是否保留當前樣式
keep_styles: true,
// html版本
// 該值默認是html5，可選值還有：html4、html5-strict。
// html5模式是完整的HTML5規(guī)范，它兼容舊的HTML4。html5-strict是HTML5的嚴格模式，它只允許HTML5規(guī)范的元素，不包括已經(jīng)被移除標準的元素。html4模式則是包括完整的HTML4過渡規(guī)范。在需要兼容老舊瀏覽器時，可能會用到該選項。
schema: 'html5',
// 隱藏狀態(tài)欄 取消底部標簽和組件介紹信息 狀態(tài)欄是與編輯器的可編輯區(qū)域底部對齊的灰色欄。狀態(tài)欄包含路徑信息和調(diào)整大小手柄。刪除狀態(tài)欄將使用戶無法更改可編輯區(qū)域的大小。
statusbar: true,
// 是否允許改變高度，statusbar必須為true, 默認： true（僅允許改變高度）, false（完全不讓你動）, 'both'（寬高都能改變，注意引號）
resize: true,
// 禁用狀態(tài)欄的元素路徑顯示
elementpath: false,
// 禁用狀態(tài)欄信息 使用該branding選項可以禁用狀態(tài)欄中顯示的“由Tiny提供支持”鏈接，以進行產(chǎn)品歸因。重要提示：免費和開放源代碼用戶必須提供產(chǎn)品歸因。有關(guān)TinyMCE歸屬要求的信息，請參閱：徽標和歸屬要求。
branding: false,
// 編輯區(qū)的樣式，也可以指定css文件 默認：default dark(暗色背景) document(類似word) writer(類似word，只是比word寬一點)
// content_css : '/mycontent.css' ,
// content_css: 'document',
// 語言
language: 'zh_CN',
// 瀏覽器的拼寫檢查
// browser_spellcheck: true,
// 支持鼠標右鍵的組件
contextmenu: 'link image table media',
// 禁用鼠標右鍵時打開瀏覽器菜單彈框，配合contextmenu使用，否則右鍵不彈框
contextmenu_never_use_native: true,
// 對話框支持拖動
draggable_modal: true,
// 開啟拖入功能，true：禁止拖入
paste_block_drop: false,
// 允許粘貼圖片
paste_data_images: true,
// 禁用默認粘貼過濾器
paste_enable_default_filters: false,
paste_filter_drop: false,
// 禁用樣式粘貼過濾器
paste_remove_styles_if_webkit: false,
// 檢測類似于URL的文本，然后將其更改為超鏈接。
// 檢測類似于圖像URL的文本，并嘗試用圖像替換文本。
smart_paste: true,
// 粘貼前的處理
paste_preprocess: (plugin, args) => {
// console.log(args.content);
},
// 粘貼到組件后，添加dom屬性，組件默認添加了div，通過控制臺可以看出該位置的div的id為12了
paste_postprocess: (plugin, args) => {
// console.log(args.node);
// args.node.setAttribute('id', '42');
},
// 允許粘貼的元素，不管用
// paste_word_valid_elements: 'strong,h1,h2',
// 圖片高級功能
image_advtab: true,
// 圖片對話框中上傳標簽開關(guān)，false時只可以輸入圖片路徑，沒有上傳入口
image_uploadtab: true,
// 是否開啟圖片標題設置的選擇，這里設置否
image_title: false,
// 啟用或禁用自動上傳URL或Blob URI表示的圖像
automatic_uploads: true,
// 自動生成圖片名稱
images_reuse_filename: true,
// 默認圖片列表
// image_list: (success) => {
// success([
// {title: '狗', value: 'mydog.jpg'},
// {title: '貓', value: 'mycat.gif'}
// ]);
// },
// 圖片樣式列表
// image_class_list: [
// {title: '無', value: ''},
// {title: 'dog', value: 'dog_class'},
// {title: 'cat', value: 'cat_class'}
// ],
// 是否開啟自動保存，退出頁面或刷新時提示
autosave_ask_before_unload: true,
// 自動保存時間間隔 秒
autosave_interval: '30s',
// 本地保存數(shù)據(jù)的有效期 分
autosave_retention: "5m",
// 組件崩潰后是否自動還原最后保存的內(nèi)容
autosave_restore_when_empty: true,
// 自定義快速工具欄
// quickbars_selection_toolbar: 'bold italic | formatselect | quicklink blockquote',
// 禁用快速工具欄
quickbars_selection_toolbar: false,
// 目錄級別個數(shù)H1通過H9
toc_depth: 9,
// 自定義目錄標簽包裹，默認是H2
// toc_header: 'div',
// 目錄樣式
// toc_class: 'myclass',
// 粘性工具欄（或?？抗ぞ邫冢斚蛳聺L動網(wǎng)頁直到不再可見編輯器時，會將工具欄和菜單?？吭谄聊豁敳?。
toolbar_sticky: true,
// 工具欄位置 auto，top，bottom
toolbar_location: 'top',
// 工具欄的樣式 'floating'，'sliding'，'scrolling'，或者'wrap'
toolbar_mode: 'floating',
// 從菜單欄中刪除菜單
// removed_menuitems: 'undo, redo',
// 禁用菜單欄
// menubar: false,
// 設置模板，可以寫路徑，通過后端返回該格式的數(shù)組數(shù)據(jù)
// templates:'http://192.168.9.22:18085/testAction/getTemplats',
templates: [
// content：html字符串數(shù)據(jù)
{title: 'Some title 1', description: 'Some desc 1', content: '<p style="margin: 0cm; margin-bottom: .0001pt; text-align: center;" align="center"><span style="font-size: 14.0pt; font-family: 黑體;">我的模板1</span></p>'},
// url：html文件
{title: 'Some title 2', description: 'Some desc 2', url: '../../assets/templates/10218060374200.html'}
],
// 類名稱
template_cdate_classes: "cdate creationdate",
// 模板日期格式設置
template_cdate_format: "%m/%d/%Y - %H:%M:%S",
// 組件，在這里配置的組件才會生效
plugins: [
'toc advlist',
'autolink lists link image charmap print preview anchor template',
'searchreplace visualblocks code fullscreen pagebreak media',
'insertdatetime table paste code help wordcount imagetools directionality autosave emoticons hr searchreplace codesample visualchars'
],
// 工具欄分類
menubar: 'file edit insert view format table help export',
menu: {
file: { title: 'File', items: 'newdocument undo redo | preview | print ' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | fullscreen codesample' },
insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat' },
tools: { title: 'Tools', items: 'spellcheckerlanguage | code wordcount' },
table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
help: { title: 'Help', items: 'help' },
// 自定義菜單
export: { title: '導出', items: 'word pdf' }
},
// 工具欄圖標
toolbar1:
'undo redo | formatselect | fontselect fontsizeselect lineheight | bold italic underline strikethrough forecolor backcolor | \
alignleft aligncenter alignright alignjustify removeformat | preview template codesample remove selectall link image fullscreen',
toolbar2:
'bullist numlist quicktable outdent indent | anchor restoredraft emoticons hr pagebreak searchreplace toc | help',
// 自定義菜單按鈕 https://www.tiny.cloud/docs/ui-components/menuitems/#howtocreatecustommenuitems
setup: (editor) => {
// 基本菜單
editor.ui.registry.addMenuItem('word', {
text: 'word',
onAction: () => {
this.downWord();
}
});
editor.ui.registry.addMenuItem('pdf', {
text: 'pdf',
onAction: () => {
this.downPdf();
}
});
// 嵌套菜單
// editor.ui.registry.addNestedMenuItem('nesteditem', {
// text: 'My nested menu item',
// getSubmenuItems: () => {
// return [{
// type: 'menuitem',
// text: 'My submenu item',
// onAction: () => {
// alert('Submenu item clicked');
// }
// }];
// }
// });
// 切換菜單，如：設置on、off狀態(tài)的
// editor.ui.registry.addToggleMenuItem('toggleitem', {
// text: 'My toggle menu item',
// icon: 'home',
// onAction: () => {
// this.toggleState = !this.toggleState;
// alert('Toggle menu item clicked');
// },
// onSetup: (api) => {
// api.setActive(this.toggleState);
// return () => {};
// }
// });
},
// 顏色列表列數(shù)
color_cols: 4,
// 關(guān)閉編輯器默認顏色
// custom_colors: false,
// 自定義顏色配置 自定義顏色后，不會顯示調(diào)色板
// color_map: [
// "000000", "Black",
// "993300", "Burnt orange",
// "333300", "Dark olive",
// "003300", "Dark green",
// "003366", "Dark azure",
// "000080", "Navy Blue",
// "333399", "Indigo",
// "333333", "Very dark gray",
// "800000", "Maroon",
// ],
// 撤銷次數(shù),默認無限次
custom_undo_redo_levels: 30,
// 行高 5.5版本后支持
lineheight_formats: '1 1.1 1.2 1.3 1.4 1.5 2',
// 字體
font_formats:
'宋體=simsun,serif;' +
'仿宋=FangSong,serif;' +
'新宋體=NSimSun,serif;' +
'黑體=SimHei,serif;' +
'楷體=KaiTi,serif;' +
'微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;' +
'隸書=LiSu,serif;' +
'幼圓=YouYuan,serif;' +
'華文細黑=STXihei,serif;' +
'華文楷體=STKaiti,serif;' +
'華文宋體=STSong,serif;' +
// 默認字體
'Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats',
// 字號
fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
// 如果表格border為0，TinyMCE會在編輯區(qū)內(nèi)的表格周圍添加虛線框作為視覺輔助
visual: true,
// 支持本地圖片上傳
powerpaste_allow_local_images: true,
// 此設置控制如何過濾從Microsoft Word粘貼的內(nèi)容。
// clean-保留標題，表格和列表等內(nèi)容的結(jié)構(gòu)，但刪除內(nèi)聯(lián)樣式和類。這樣就產(chǎn)生了使用站點CSS樣式表的簡單內(nèi)容，同時保留了原始文檔的語義結(jié)構(gòu)。
// merge-保留原始文檔的內(nèi)聯(lián)格式和結(jié)構(gòu)。無效和專有的樣式，標記和屬性仍會被刪除，以確保HTML有效，同時更緊密地匹配原始文檔格式。
// prompt -在嘗試粘貼單詞內(nèi)容后提示用戶在“清理”和“合并”選項之間進行選擇
// powerpaste_word_import: 'prompt',
// powerpaste_html_import: 'prompt',
// 粘貼為文本按鈕的初始狀態(tài)，開啟后，只會粘貼文本內(nèi)容
paste_as_text: false,
// 合并相同元素的內(nèi)容
paste_merge_formats: false,
// 多少空格來表示HTML中的制表符
paste_tab_spaces: 2,
// 媒體實時預覽開關(guān) 開啟此選項后，用戶可看到編輯區(qū)內(nèi)嵌入視頻的實時預覽，而不是占位圖, 此設置對video無效
media_live_embeds: true,
// 自定義媒體樣式 http://tinymce.ax-z.cn/plugins/media.php
video_template_callback: (data) => {
return '<video width="' + data.width + '" height="' + data.height
+ '"' + (data.poster ? ' poster="' + data.poster + '"' : '')
+ ' controls="controls">\n' + '<source src="' + data.source1 + '"'
+ (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n'
+ (data.source2 ? '<source src="' + data.source2 + '"'
+ (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '')
+ '</video>';
},
// 檢查URL是否包含特殊內(nèi)容，如包含則生成自定義的iframe，否則交給插件的默認邏輯生成默認代碼
media_url_resolver: (data, resolve) => {
if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
const embedHtml = '';
resolve({html: embedHtml});
}else{
resolve({html: ''});
}
},
// 分頁
pagebreak_separator: '<!-- my page break -->',
// 拆分塊元素
pagebreak_split_block: true,
// 為編輯區(qū)錨點自定義樣式 my-custom-class是樣式名
visual_anchor_class: 'my-custom-class',
// 為編輯區(qū)表格自定義樣式
visual_table_class: 'my-custom-class',
// 代碼示例列表，可以根據(jù)插入的文本內(nèi)容，適配合適的樣式，比如java代碼和html樣式區(qū)分開來
// codesample_languages: [
// {text: 'HTML/XML', value: 'markup'},
// {text: 'JavaScript', value: 'javascript'},
// {text: 'CSS', value: 'css'},
// {text: 'PHP', value: 'php'},
// ],
// 自定義示例樣式
// codesample_content_css: '/static/prism.css',
// 禁止輸入字符
// media_alt_source: true,
// 禁用視頻
// media_filter_html: false,
// 可以預覽視頻
// media_live_embeds: true,
// 禁用Poster媒體對話框中的輸入字段
// media_poster: true,
// 自定義監(jiān)聽圖片上傳
images_upload_handler: (blobInfo, succFun, failFun) => {
let xhr;
let formData;
const file = blobInfo.blob();
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open(
'POST',
// 上傳圖片服務器地址
'https://file.test.biz:4443/******',
);
xhr.onload = () => {
let json;
if (xhr.status !== 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
// 這里是圖片服務器返回的圖片地址，需要根據(jù)實際情況自己處理
succFun(
'https://file.test.biz:4445/' +
json.listData[0].cDirRelativePath +
'/' +
json.listData[0].cUpDocumentName,
);
};
formData = new FormData();
formData.append('file', file, file.name);
// 將圖片顯示到富文本編輯器中
xhr.send(formData);
}
};
}
法中調(diào)用初始化方法：
this.initTinymce();
5、通過以上配置，啟動服務，應該就可以看到效果了。
6、這些配置不保證沒有錯誤，在使用時，請根據(jù)實際情況做相應的調(diào)整；
7、如果有錯誤或者不合理的地方，歡迎指正。
8、本文只是TinyMce的配置和使用方法，預計后期我還會出一篇文章，主要內(nèi)容是，在學習TinyMce時遇到的坑、存在的問題和解決辦法；
9、導出PDF和Word功能后端接口已經(jīng)實現(xiàn)，做了簡單封裝，同時，導出按鈕也集成到了富文本組件內(nèi)，導出功能的實現(xiàn)專門做一篇文章去描述。
10、轉(zhuǎn)載請標明出處。
到此這篇關(guān)于angular8.5集成TinyMce5的使用和詳細配置的文章就介紹到這了,更多相關(guān)angular8.5集成TinyMce5內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
Angularjs全局變量被作用域監(jiān)聽的正確姿勢
這篇文章主要介紹了Angularjs全局變量被作用域監(jiān)聽的正確姿勢的相關(guān)資料,需要的朋友可以參考下2016-02-02
解決angular雙向綁定無效果,ng-model不能正常顯示的問題
今天小編就為大家分享一篇解決angular雙向綁定無效果,ng-model不能正常顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了AngularJS實時獲取并顯示密碼的方法,涉及AngularJS數(shù)據(jù)綁定及顯示相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
本篇文章主要介紹了angular+webpack2實戰(zhàn)例子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Angular學習筆記之a(chǎn)ngular的$filter服務淺析
本文是小編記錄的angular學習筆記，通過本文首先給大家介紹了$filter服務，然后介紹下內(nèi)置filter及filter的簡單使用，非常不錯具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
本篇文章主要介紹了剖析Angular Component的源碼示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
AngularJS表達式用于應用程序數(shù)據(jù)綁定到HTML。表達式都寫在雙括號就像{{表達式}}。表達式中的行為跟ng-bind指令方式相同。 AngularJS應用表達式是純javascript表達式，并輸出它們被使用的數(shù)據(jù)在那里。2015-05-05
這篇文章主要介紹了淺析webapp框架AngularUI的demo以及對demo的簡單修改，需要的朋友可以參考下2014-12-12
關(guān)于angularJs指令的Scope(作用域)介紹
下面小編就為大家?guī)硪黄猘ngularJs指令的Scope(作用域)介紹。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
現(xiàn)在的項目，無論代銷，幾乎不會缺省的一個功能就是上傳下載功能，今天談一談使用AngularJS+bootsrtap下的上傳下載功能，需要的朋友參考下吧2017-08-08