Angular集成富文本编辑器 tinymce

[deepthan]

• tinymce github

1. 安装tinymce

npm install --save tinymce

或者

yarn add tinymce 

2. 定义全局变量

你还需要在项目中的.\src\typing.d.ts中声明tinymce全局变量，不然会提示找不到tinymce

declare var tinymce: any;

3. 设置tinymce全局访问

与安装一般的npm包不同，tinymce需要设置全局访问之后才能够使用，也就是要在项目的.angular-cli.json文件中添加以下内容：

"scripts": [
    "./node_modules/tinymce/tinymce.js",
    "./node_modules/tinymce/themes/modern/theme.js",
    "./node_modules/tinymce/plugins/fullscreen/plugin.js",
],

scripts引入的文件可以分为三个部分：

• tinymce的js： ./node_modules/tinymce/tinymce.js是tinymce的js脚本必须引入的.
• 主题：./node_modules/tinymce/themes/modern/theme.js是编辑器的主题风格文件，引入哪个启动哪个主题风格。tinymce默认提供了三套主题，分别是modern、mobile、inlite，可以在.\node_modules\tinymce\themes目录中找到。
• 功能插件（按需引入）：./node_modules/tinymce/plugins/fullscreen/plugin.js是一个编辑器全屏的插件，可以根据需要引入插件的js文件，再在编辑器初始化的时候启动即可使用。

4. 复制皮肤和语言文件到assets目录下

tinymce的主题（theme）跟皮肤（skin）是相互分离的，皮肤主要是字体、图标、css等一些内容。我们需要将相关文件拷贝到项目中的assets目录下。也就是将.\node_modules\tinymce中的skins目录整个文件到.\src\assets目录下。

• node_modules下的tinymce

• tinymce
  • skins
    • lightgray

• assets下

- assets
    - skins
        - lightgray

5. 设置编辑器为中文

tinymce默认是英文界面，如果要使用中文，我们需要先下载中文语言包，然后将其路径加入到上面的全局配置当中。

中文语言包下载地址

• 下载下来的压缩文件中会有一个langs目录，里面有zh_CN.js，我们可以把这个目录拷贝到.\src\assets目录下，

- assets
    - langs
        - zh_CN.js

• 再在.angular.json中添加引用：

"scripts": [
  "./src/assets/langs/zh_CN.js"
]

[wilsonsong]

[wilsonsong]

comment1 comment2