npm install --save-dev ngx-tinymce@7.0.0

import { NgxTinymceModule } from 'ngx-tinymce';
@NgModule({
 imports: [
 BrowserModule,
 NgxTinymceModule.forRoot({
 baseURL: './assets/library/tinymce/'
 })
 ]
})
export class AppModule { }

<tinymce [(ngModel)]="html" [config]="initConfig"></tinymce>

// 初始化組件
initTinymce() {
	this.initConfig = {
	 // 占位符
	 placeholder: '請(qǐng)輸入內(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 下文件夾對(duì)應(yīng)，
	 // 黑色
	 // skin: 'oxide-dark',
	 
	 // 皮膚路徑
	 // skin_url: '/css/mytinymceskin'
	 
	 // 換行時(shí)，是否保留當(dāng)前樣式
	 keep_styles: true,
	 
	 // html版本
	 // 該值默認(rèn)是html5，可選值還有：html4、html5-strict。
	 // html5模式是完整的HTML5規(guī)范，它兼容舊的HTML4。html5-strict是HTML5的嚴(yán)格模式，它只允許HTML5規(guī)范的元素，不包括已經(jīng)被移除標(biāo)準(zhǔn)的元素。html4模式則是包括完整的HTML4過(guò)渡規(guī)范。在需要兼容老舊瀏覽器時(shí)，可能會(huì)用到該選項(xiàng)。
	 schema: 'html5',
	 
	 // 隱藏狀態(tài)欄 取消底部標(biāo)簽和組件介紹信息 狀態(tài)欄是與編輯器的可編輯區(qū)域底部對(duì)齊的灰色欄。狀態(tài)欄包含路徑信息和調(diào)整大小手柄。刪除狀態(tài)欄將使用戶無(wú)法更改可編輯區(qū)域的大小。
	 statusbar: true,
	 
	 // 是否允許改變高度，statusbar必須為true, 默認(rèn)： true（僅允許改變高度）, false（完全不讓你動(dòng)）, 'both'（寬高都能改變，注意引號(hào)）
	 resize: true,
	 
	 // 禁用狀態(tài)欄的元素路徑顯示
	 elementpath: false,
	 
	 // 禁用狀態(tài)欄信息 使用該branding選項(xiàng)可以禁用狀態(tài)欄中顯示的“由Tiny提供支持”鏈接，以進(jìn)行產(chǎn)品歸因。重要提示：免費(fèi)和開(kāi)放源代碼用戶必須提供產(chǎn)品歸因。有關(guān)TinyMCE歸屬要求的信息，請(qǐng)參閱：徽標(biāo)和歸屬要求。
	 branding: false,
	 
	 // 編輯區(qū)的樣式，也可以指定css文件 默認(rèn)：default dark(暗色背景) document(類似word) writer(類似word，只是比word寬一點(diǎn))
	 // content_css : '/mycontent.css' ,
	 // content_css: 'document',
 
	 // 語(yǔ)言
	 language: 'zh_CN',
	 
	 // 瀏覽器的拼寫(xiě)檢查
	 // browser_spellcheck: true,
	 
	 // 支持鼠標(biāo)右鍵的組件
	 contextmenu: 'link image table media',
	 
	 // 禁用鼠標(biāo)右鍵時(shí)打開(kāi)瀏覽器菜單彈框，配合contextmenu使用，否則右鍵不彈框
	 contextmenu_never_use_native: true,
	 
	 // 對(duì)話框支持拖動(dòng)
	 draggable_modal: true,
	 
	 // 開(kāi)啟拖入功能，true：禁止拖入
	 paste_block_drop: false,
	 
	 // 允許粘貼圖片
	 paste_data_images: true,
	 
	 // 禁用默認(rèn)粘貼過(guò)濾器
	 paste_enable_default_filters: false,
	 paste_filter_drop: false,
	 
	 // 禁用樣式粘貼過(guò)濾器
	 paste_remove_styles_if_webkit: false,
	 
	 // 檢測(cè)類似于URL的文本，然后將其更改為超鏈接。
	 // 檢測(cè)類似于圖像URL的文本，并嘗試用圖像替換文本。
	 smart_paste: true,
	 
	 // 粘貼前的處理
	 paste_preprocess: (plugin, args) => {
		// console.log(args.content);
	 },
	 
	 // 粘貼到組件后，添加dom屬性，組件默認(rèn)添加了div，通過(guò)控制臺(tái)可以看出該位置的div的id為12了
	 paste_postprocess: (plugin, args) => {
		// console.log(args.node);
		// args.node.setAttribute('id', '42');
	 },
	 
	 // 允許粘貼的元素，不管用
	 // paste_word_valid_elements: 'strong,h1,h2',
	 
	 // 圖片高級(jí)功能
	 image_advtab: true,
	 
	 // 圖片對(duì)話框中上傳標(biāo)簽開(kāi)關(guān)，false時(shí)只可以輸入圖片路徑，沒(méi)有上傳入口
	 image_uploadtab: true,
	 
	 // 是否開(kāi)啟圖片標(biāo)題設(shè)置的選擇，這里設(shè)置否
	 image_title: false,
	 
	 // 啟用或禁用自動(dòng)上傳URL或Blob URI表示的圖像
	 automatic_uploads: true,
	 
	 // 自動(dòng)生成圖片名稱
	 images_reuse_filename: true,
	 
	 // 默認(rèn)圖片列表
	 // image_list: (success) => {
	 // success([
	 // {title: '狗', value: 'mydog.jpg'},
	 // {title: '貓', value: 'mycat.gif'}
	 // ]);
	 // },
	 
	 // 圖片樣式列表
	 // image_class_list: [
	 // {title: '無(wú)', value: ''},
	 // {title: 'dog', value: 'dog_class'},
	 // {title: 'cat', value: 'cat_class'}
	 // ],
	 
	 // 是否開(kāi)啟自動(dòng)保存，退出頁(yè)面或刷新時(shí)提示
	 autosave_ask_before_unload: true,
	 
	 // 自動(dòng)保存時(shí)間間隔 秒
	 autosave_interval: '30s',
	 
	 // 本地保存數(shù)據(jù)的有效期 分
	 autosave_retention: "5m",
	 
	 // 組件崩潰后是否自動(dòng)還原最后保存的內(nèi)容
	 autosave_restore_when_empty: true,
	 
	 // 自定義快速工具欄
	 // quickbars_selection_toolbar: 'bold italic | formatselect | quicklink blockquote',
	 
	 // 禁用快速工具欄
	 quickbars_selection_toolbar: false,
	 
	 // 目錄級(jí)別個(gè)數(shù)H1通過(guò)H9
	 toc_depth: 9,
	 
	 // 自定義目錄標(biāo)簽包裹，默認(rèn)是H2
	 // toc_header: 'div',
	 
	 // 目錄樣式
	 // toc_class: 'myclass',
	 
	 // 粘性工具欄（或?？抗ぞ邫冢?dāng)向下滾動(dòng)網(wǎng)頁(yè)直到不再可見(jiàn)編輯器時(shí)，會(huì)將工具欄和菜單?？吭谄聊豁敳?。
	 toolbar_sticky: true,
	 
	 // 工具欄位置 auto，top，bottom
	 toolbar_location: 'top',
	 
	 // 工具欄的樣式 'floating'，'sliding'，'scrolling'，或者'wrap'
	 toolbar_mode: 'floating',
	 
	 // 從菜單欄中刪除菜單
	 // removed_menuitems: 'undo, redo',
	 
	 // 禁用菜單欄
	 // menubar: false,
	 
	 // 設(shè)置模板，可以寫(xiě)路徑，通過(guò)后端返回該格式的數(shù)組數(shù)據(jù)
	 // templates:'http://192.168.9.22:18085/testAction/getTemplats',
	 templates: [
		// content：html字符串?dāng)?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",
	 
	 // 組件，在這里配置的組件才會(huì)生效
	 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' }
	 },
	 
	 // 工具欄圖標(biāo)
	 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)閉編輯器默認(rèn)顏色
	 
	 // custom_colors: false,
	 
	 // 自定義顏色配置 自定義顏色后，不會(huì)顯示調(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",
	 // ],
	 
	 // 撤銷(xiāo)次數(shù),默認(rèn)無(wú)限次
	 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;' + 
					'隸書(shū)=LiSu,serif;' + 
					'幼圓=YouYuan,serif;' + 
					'華文細(xì)黑=STXihei,serif;' + 
					'華文楷體=STKaiti,serif;' + 
					'華文宋體=STSong,serif;' +
					// 默認(rèn)字體
					'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',
	 
	 // 字號(hào)
	 fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
	 
	 // 如果表格border為0，TinyMCE會(huì)在編輯區(qū)內(nèi)的表格周?chē)砑犹摼€框作為視覺(jué)輔助
	 visual: true,
	 
	 // 支持本地圖片上傳
	 powerpaste_allow_local_images: true,
	 
	 // 此設(shè)置控制如何過(guò)濾從Microsoft Word粘貼的內(nèi)容。
	 // clean-保留標(biāo)題，表格和列表等內(nèi)容的結(jié)構(gòu)，但刪除內(nèi)聯(lián)樣式和類。這樣就產(chǎn)生了使用站點(diǎn)CSS樣式表的簡(jiǎn)單內(nèi)容，同時(shí)保留了原始文檔的語(yǔ)義結(jié)構(gòu)。
	 // merge-保留原始文檔的內(nèi)聯(lián)格式和結(jié)構(gòu)。無(wú)效和專有的樣式，標(biāo)記和屬性仍會(huì)被刪除，以確保HTML有效，同時(shí)更緊密地匹配原始文檔格式。
	 // prompt -在嘗試粘貼單詞內(nèi)容后提示用戶在“清理”和“合并”選項(xiàng)之間進(jìn)行選擇
	 // powerpaste_word_import: 'prompt',
	 // powerpaste_html_import: 'prompt',
 
	 // 粘貼為文本按鈕的初始狀態(tài)，開(kāi)啟后，只會(huì)粘貼文本內(nèi)容
	 paste_as_text: false,
	 
	 // 合并相同元素的內(nèi)容
	 paste_merge_formats: false,
	 
	 // 多少空格來(lái)表示HTML中的制表符
	 paste_tab_spaces: 2,
	 
	 // 媒體實(shí)時(shí)預(yù)覽開(kāi)關(guān) 開(kāi)啟此選項(xiàng)后，用戶可看到編輯區(qū)內(nèi)嵌入視頻的實(shí)時(shí)預(yù)覽，而不是占位圖, 此設(shè)置對(duì)video無(wú)效
	 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，否則交給插件的默認(rèn)邏輯生成默認(rèn)代碼
	 media_url_resolver: (data, resolve) => {
		if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
			const embedHtml = '';
			resolve({html: embedHtml});
		}else{
			resolve({html: ''});
		}
	 },
 
	 // 分頁(yè)
	 pagebreak_separator: '<!-- my page break -->',
	 
	 // 拆分塊元素
	 pagebreak_split_block: true,
	 
	 // 為編輯區(qū)錨點(diǎn)自定義樣式 my-custom-class是樣式名
	 visual_anchor_class: 'my-custom-class',
	 
	 // 為編輯區(qū)表格自定義樣式
	 visual_table_class: 'my-custom-class',
	 
	 // 代碼示例列表，可以根據(jù)插入的文本內(nèi)容，適配合適的樣式，比如java代碼和html樣式區(qū)分開(kāi)來(lái)
	 // 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媒體對(duì)話框中的輸入字段
	 // media_poster: true,
	 
	 // 自定義監(jiān)聽(tīng)圖片上傳
	 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ù)實(shí)際情況自己處理
		 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);
	 }
	};
}

this.initTinymce();