DeathGhost

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

这篇文章发布于2018年08月07日 22:28 星期二。 阅读 175 次 ,由 DeathGhost 编辑,归类于angular »

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

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

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

TinyMCE富文本编辑器示例图

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

首先在VSCODE项目目录下执行命令:

npm install @tinymce/tinymce-angular

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

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

然后在需要显示的组件html中引入

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

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,
  // ...
};

上传图片简单配置:

/*服务器接口地址*/
images_upload_url: 'http://localhost:3000/upload',
automatic_uploads: true
/*服务器端保存图片成功后,将图片地址返回即可*/
{location: imgPath}
DeathGhost

孙志锋

志于道,据于德,依于仁,游于艺。

deathghost@deathghost.cn


web前端设计与开发 - 与其说它是一门职业技术,不如将其视为一门艺术!


本站当前16 篇文章归于4个目录

阿里云ECS

🙏 点击,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕