angular8.5集成TinyMce5的使用和详细配置(推荐)

编写人：mkl

日期：2020.11.16

本篇主要讲解的是tinymce的配置，原理不做讲解，请自行查阅文档tinym

tinymce是什么？

tinymce是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：ueditor、kindeditor、simditor、ckeditor、wangeditor、suneditor、froala等等。

tinymce的优势：

• 开源可商用，基于lgpl2.1
• 插件丰富，自带插件基本涵盖日常所需功能（示例看下面的demo-2）
• 接口丰富，可扩展性强，有能力可以无限拓展功能
• 界面好看，符合现代审美
• 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
• 对标准支持优秀（自v5开始）
• 多语言支持，官网可下载几十种语言。

高级插件需要收费，比如：格式刷、文件上传、导出pdf等功能，具体请查看官方文档；

官网及文档：

官网及文档(中文)：   此文档不全

github：

快速开始

使用第三方类库

1、git地址

2、安装部署

3、初步配置

(1) tinymce的自托管发行版可下载，用于开发和生产软件包

baseurl：需要下载，放到项目中，可自定义配置，如下图：

(2) 像富文本框你可能需要在所有子模块中都会可能会用到，因为建议在 sharedmodule 模块中导入和导出他。

在根模块app.module.ts配置：

4、详细配置

(1) html模板文件test.component.html中添加配置：

(2) test.component.ts添加配置：

引入：import { ngxtinymcemodule } from 'ngx-tinymce';

声明配置变量：public initconfig: any;

法中调用初始化方法：

5、通过以上配置，启动服务，应该就可以看到效果了。

6、这些配置不保证没有错误，在使用时，请根据实际情况做相应的调整；

7、如果有错误或者不合理的地方，欢迎指正。

8、本文只是tinymce的配置和使用方法，预计后期我还会出一篇文章，主要内容是，在学习tinymce时遇到的坑、存在的问题和解决办法；

9、导出pdf和word功能后端接口已经实现，做了简单封装，同时，导出按钮也集成到了富文本组件内，导出功能的实现专门做一篇文章去描述。

10、转载请标明出处。

到此这篇关于angular8.5集成tinymce5的使用和详细配置的文章就介绍到这了,更多相关angular8.5集成tinymce5内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！