Angular6.x安装配置本地加载汉化版TinyMCE Angular集成配置HTML富文本编辑器方法

在PC项目中Angular普遍会应用到后台管理系统项目中，对于后台或多或少会应用到HTML文本编辑器，最多的就是HTML文本信息,我们需要对其排版美化处理渲染到前台显示区域，这时我们就会用到富文本编辑器进行管理操作。

以前Angular项目中使用过百度UEditor，功能挺丰富，感觉UI不太美观，目前好像也不更新了，同时配置在NG6.x遇到问题了，索性放弃，选择TinyMCE，感觉还是比较简单，这里就记录下，仅供参考（上传图片暂时接口没写好，没测，后续再说）。

测试环境： Angular6.1.0 工具：VScode

1、首先在VSCODE项目目录下执行命令：

npm install @tinymce/tinymce-angular

2、安装完毕后，将其导入到根模块或共享模块中。

import { EditorModule } from '@tinymce/tinymce-angular';

3、在需要显示的组件html中引入

<editor [init]="initTool" [(ngModel)]="form.content"></editor>

4、initTool配置工具，在ts中我们设置所需plugins，具体可以参考官方文档。

initTool = {
  selector: 'textarea',
  height: '400',
  fontsize_formats: '10px 12px 14px 18px 24px 36px',
  plugins : [
    'preview advlist autolink link image lists textcolor hr table emoticons code colorpicker codesample',
  ],
  toolbar: 'code insertfile undo redo | fontselect fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link unlink image | preview media fullpage | forecolor backcolor codesample emoticons',
  language_url: 'assets/tinymce/langs/zh_CN.js',
  image_caption: true
};

这一步我们运行NG项目后，已经可以看到编辑器了，由于加载的plugins默认是官方的，我们可以将整个文档下载到本地自己的项目中归入assets文件夹下。

assets/tinymce
------📂langs // 这里放置汉化文件
------------📂：https://www.tiny.cloud/docs/configure/localization/
------📂plugins
------📂skins
------📂themes
------📂jquery.tinymce.min.js
------📂license.txt
------📂tinymce.min.js

最后，我们在项目的根目录src/index.html中加载主js文件

<script src="assets/tinymce/tinymce.min.js"></script>

运行后，方可看到plugins js文件均已加入自己的服务器。

如果需要隐藏或去除右下角的版权信息“POWERED BY TINYMCE”或汉化版本的“由 TINYMCE驱动”字样，只需在初始化时添加branding:false即可。

initTool = {
  // ...
  branding: false,
  // ...
};

扩展有效元素

部分元素在源码输入后会被自动清空的问题。e.g. 文档中插入SVG元素，默认情况下会被自动清空。

extended_valid_elements: 'svg[*],defs[*],pattern[*],desc[*],metadata[*],g[*],mask[*],path[*],line[*],marker[*],rect[*],circle[*],ellipse[*],polygon[*],polyline[*],linearGradient[*],radialGradient[*],stop[*],image[*],view[*],text[*],textPath[*],title[*],tspan[*],glyph[*],symbol[*],switch[*],use[*]',

上传图片简单配置

/*服务器接口地址*/
images_upload_url: 'http://localhost:3000/upload',
automatic_uploads: true

/*服务器端保存图片成功后，将图片地址返回即可*/
{location: imgPath}

上传图片后会自动添加width与height属性（图片宽高尺寸），若不想自带宽高属性值，可以在配置对象里添加如下即可。

// <img src="***.jpg" width="640px" height="400px">
// 取消上述示例width与height，在上传图片插入时。
image_dimensions: false

其他配置

如style样式被自动过滤掉~

valid_elements: '*[*]',
valid_children: '*[*]',
extended_valid_elements: 'style,link[href|rel],script',
custom_elements: 'style,link,~link,script',