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

> 项目中时常会应用到HTML富文本编辑器，例如：后台项目中文章内容管理、产品详情信息管理、评论回复等功能版块都会多多少少应用到；所以在这里整理下配置安装过程，TinyMCE相对配置简单，仅供参考。

Author: DeathGhost
Published: 2018-08-07 22:28:32
Category: angular
Canonical: https://www.deathghost.cn/article/angular/31
Keywords: Angular, TinyMCE, 富文本编辑器, Angular6.x集成TinyMCE, Angular2  配置文本编辑器, HTML富文本编辑器配置, 隐藏版权, 上传图片

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

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

![](https://www.deathghost.cn/public/upload/article/2018/08/1533745610054.jpg)

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文件均已加入自己的服务器。

如果需要隐藏或去除右下角的版权信息&ldquo;POWERED BY TINYMCE&rdquo;或汉化版本的&ldquo;由 TINYMCE驱动&rdquo;字样，只需在初始化时添加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: 'https://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',

## Related

- Previous: [Angular路由惰性加载实例运用 懒加载路由配置 提升加载速度 优化用户体验](https://www.deathghost.cn/article/angular/29)
- Next: [Angular自定义预加载策略](https://www.deathghost.cn/article/angular/88)