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)可下載幾十種語言。

高級插件需要收費，比如：格式刷、文件上傳、導(dǎo)出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 模塊中導(dǎo)入和導(dǎo)出他。

在根模塊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 下文件夾對應(yīng)，
	 // 黑色
	 // 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,
	 
	 // 是否開啟圖片標題設(shè)置的選擇，這里設(shè)置否
	 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',
	 
	 // 粘性工具欄（或?？抗ぞ邫冢?，當向下滾動網(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ù)組數(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",
	 
	 // 模板日期格式設(shè)置
	 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: '導(dǎo)出', 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');
		// }
		// }];
		// }
		// });
		// 切換菜單，如：設(shè)置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,
	 
	 // 此設(shè)置控制如何過濾從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,
	 
	 // 媒體實時預(yù)覽開關(guān) 開啟此選項后，用戶可看到編輯區(qū)內(nèi)嵌入視頻的實時預(yù)覽，而不是占位圖, 此設(shè)置對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,
	 
	 // 可以預(yù)覽視頻
	 // 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',
		 // 上傳圖片服務(wù)器地址
		 'https://file.test.biz:4443/******',
		);
		xhr.onload = () => {
		 let json;
		 if (xhr.status !== 200) {
			failFun('HTTP Error: ' + xhr.status);
			return;
		 }
		 json = JSON.parse(xhr.responseText);
		 // 這里是圖片服務(wù)器返回的圖片地址，需要根據(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)用初始化方法：