angular2+tinymce+prism富文本编辑器(多图上传,代码高亮)

文章目录

• 背景
• 参考地址
• 版本
• 使用
• • 安装步骤
  • 插件
  • • 自定义上传文件(配置信息)
    • 汉化(配置信息)
    • 自动调整高度(配置信息)
    • 代码块
    • • 配置信息
      • 问题: 页面展示中没有代码高亮
      • • 地址
        • 问题发现
      • 解决方案(使用prism)
      • • 客官可以自行选择需要的主题
        • 选择需要的语言
        • index.html添加引用
        • 函数
    • 多图上传(第三方插件,非官方插件使用方案)
    • • 配置信息
      • 问题: 怎么使用第三方插件
      • 解决方案
      • • 下载tinymce到本地
        • 配置index.html
      • 问题: upfiles.html 出现iframe跨域
      • 解决方案
      • • 修改axupimgs中的plugin.min.js文件
        • 将 axupimgs文件夹下的loading.gif和upfiles.html都放到项目中
      • 汉化(方案2: 使用自定义tinymce.js地址)
      • • 配置信息

笔者项目原先使用的是百度的ueditor编辑器,由于没有了维护,并且在原基础上改造的成本大,于是考虑更换新的编辑器
而对于新的编辑器选择,笔者考虑以下几点

• 是否持续更新,在网上有很多开源项目,有些属于个人,有些属于组织,在选择时,笔者都会去看最近一次更新的时间,以及github上issue的数量,从而来判断是否还在更新中
• 是否提供自定义图片上传功能,很多开源的富文本项目都不提供自定义的上传文件功能,当然,对于普通的上传,大部分项目都是支持的,只是笔者的文件都是放在了阿里云的oss中,在上传时并不想经过自己的服务器,再经由服务器上传到oss中(这不是浪费io嘛)
  最终我选择了tinymce,理由如下:
• 配置简单
• 支持框架(vue\angular\react)
• 已商业化(也就是说会一直更新,并且他也有提供免费功能,已经足够笔者使用)

致谢!!
官方文档,可自行翻译
第三方翻译的中文说明文档

安装步骤

英文说明: https://www.tiny.cloud/docs/integrations/angular/

• 安装tinymce-angular包，并保存到你package.json用–save

npm install --save @tinymce/tinymce-angular


• 在app.module.ts加入EditorModule,以下为示例

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EditorModule } from '@tinymce/tinymce-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
EditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


• 使用示例

<editor
id="oneweek-editor"
initialValue="

This is the initial content of the editor

运行项目则可在对应路由看到编辑器

插件

自定义上传文件(配置信息)

{
// editor便签的id为oneweek-editor
selector: '#oneweek-editor',
// plugins是tinymce的各种插件
plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample',
// 自定义上传文件
images_upload_handler: (blobInfo, success, failure) => {
// blobInfo.blob()为file, blobInfo.blob().name为文件名称,调用成功后需要回调success(文件名称),向页面传递图片信息,如果失败了需要回调failure(失败信息)
console.log('上传图片啦');
},
// toolbar定义快捷栏的操作, | 用来分隔显示
toolbar: 'image | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
+ ' aligncenter alignright alignjustify | undo redo',
// 这里是代码块的一些语言选择,好像暂时还没支持typescript
codesample_languages: [
{ text: 'Python', value: 'python'},
{ text: 'HTML/XML', value: 'markup'},
{ text: 'Javascript', value: 'Javascript'},
{ text: 'CSS', value: 'css'},
{ text: 'Java', value: 'java'}
],
// 高度
height: 600
}


汉化(配置信息)

{
selector: '#oneweek-editor',
// plugins是tinymce的各种插件
plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample',
// 语言包可以使用tinymce提供的网址,但是墙的原因,会连不上/网速慢,所以还是自行下载,下载地址:https://www.tiny.cloud/get-tiny/language-packages/
language_url: 'zh_CN.js的地址:如http://xxx/zh_CN.js',
language: 'zh_CN',
images_upload_handler: (blobInfo, success, failure) => {
// blobInfo.blob()为file, blobInfo.blob().name为文件名称,调用成功后需要回调success(文件名称),向页面传递图片信息,如果失败了需要回调failure(失败信息)
console.log('上传图片啦');
},
// toolbar定义快捷栏的操作, | 用来分隔显示
toolbar: 'image | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
+ ' aligncenter alignright alignjustify | undo redo',
// 这里是代码块的一些语言选择,好像暂时还没支持typescript
codesample_languages: [
{ text: 'Python', value: 'python'},
{ text: 'HTML/XML', value: 'markup'},
{ text: 'Javascript', value: 'Javascript'},
{ text: 'CSS', value: 'css'},
{ text: 'Java', value: 'java'}
],
// 高度
height: 600,
}


自动调整高度(配置信息)

{
selector: '#oneweek-editor',
// plugins是tinymce的各种插件
plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample autosize',
// 语言包可以使用tinymce提供的网址,但是墙的原因,会连不上/网速慢,所以还是自行下载,下载地址:https://www.tiny.cloud/get-tiny/language-packages/
language_url: 'zh_CN.js的地址',
language: 'zh_CN',
images_upload_handler: (blobInfo, success, failure) => {
// blobInfo.blob()为file, blobInfo.blob().name为文件名称,调用成功后需要回调success(文件名称),向页面传递图片信息,如果失败了需要回调failure(失败信息)
console.log('上传图片啦');
},
// toolbar定义快捷栏的操作, | 用来分隔显示
toolbar: 'image | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
+ ' aligncenter alignright alignjustify | undo redo',
// 这里是代码块的一些语言选择,好像暂时还没支持typescript
codesample_languages: [
{ text: 'Python', value: 'python'},
{ text: 'HTML/XML', value: 'markup'},
{ text: 'Javascript', value: 'Javascript'},
{ text: 'CSS', value: 'css'},
{ text: 'Java', value: 'java'}
],
autoresize_on_init: false,
// 最小高度
min_height: 350,
// 最大高度
max_height: 650
}


代码块

配置信息

{
selector: '#oneweek-editor',
// plugins是tinymce的各种插件
plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample autosize',
// 语言包可以使用tinymce提供的网址,但是墙的原因,会连不上/网速慢,所以还是自行下载,下载地址:https://www.tiny.cloud/get-tiny/language-packages/
language_url: 'zh_CN.js的地址',
language: 'zh_CN',
images_upload_handler: (blobInfo, success, failure) => {
// blobInfo.blob()为file, blobInfo.blob().name为文件名称,调用成功后需要回调success(文件名称),向页面传递图片信息,如果失败了需要回调failure(失败信息)
console.log('上传图片啦');
},
// toolbar定义快捷栏的操作, | 用来分隔显示
toolbar: 'image | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
+ ' aligncenter alignright alignjustify | undo redo',
// 这里是代码块的一些语言选择,好像暂时还没支持typescript
codesample_languages: [
{ text: 'Python', value: 'python'},
{ text: 'HTML/XML', value: 'markup'},
{ text: 'Javascript', value: 'Javascript'},
{ text: 'CSS', value: 'css'},
{ text: 'Java', value: 'java'}
],
autoresize_on_init: false,
// 最小高度
min_height: 350,
// 最大高度
max_height: 650
}


问题: 页面展示中没有代码高亮

地址

官网-代码插件说明
prism官网地址

问题发现

在编辑器中编辑了代码后,可以看到代码是有高亮显示的,但是展示在页面(节点代码如下)是却没有高亮

<div class="text-content" [innerHTML]="content"></div>


查阅官网才知道,语法突出还需要使用prism,果然是个坑

解决方案(使用prism)

进入到prism官网

客官可以自行选择需要的主题

选中主题后可以如下看到对应的样式

选择需要的语言

笔者使用了python,java,相应的在页面勾选

勾选完成后,将页面拉到最下方,也就是查看主题预览的地方,将js和css都下载下来

下载完成后放到自己项目中,也可以放到第三方空间(如阿里云的oss,第三方文件托管平台,只要能在项目中访问到即可)

index.html添加引用

在index.html中加入对tinymce.min.js的引用

<link rel="stylesheet" type="text/css" href="prism.css地址">
<script type="text/Javascript" src="prism.js地址"></script>


若放在自己的项目中,还需要在angular.json中,加入对prism.css和prism.js的引入

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/course",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"prism.css地址,如src/assets/prism/prism.css",
"prism.js地址,如src/assets/prism/prism.js"
// 所示prism.js和prism.css放在同一个文件夹,则可以直接引入文件夹
// "prism文件夹地址,如src/assets/prism"
],


函数

highlight() {
const elementList = document.getElementsByTagName('pre');
if (elementList && elementList.length > 0) {
for (let i = 0; i < elementList.length; i++) {
Prism.highlightElement(elementList[i]);
}
}
}


多图上传(第三方插件,非官方插件使用方案)

由于tinymce官方并没有提供多图上传的功能,所以只能自己开发或者依赖于第三方开发者
在上文提供的文档中的中文文档地址中,无私的贡献者,为我们提供了更多插件 -> 图片批量上传, 此为使用说明地址

配置信息

{
selector: '#oneweek-editor',
// plugins是tinymce的各种插件
plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample autosize axupimgs',
// 语言包可以使用tinymce提供的网址,但是墙的原因,会连不上/网速慢,所以还是自行下载,下载地址:https://www.tiny.cloud/get-tiny/language-packages/
language_url: 'zh_CN.js的地址',
language: 'zh_CN',
images_upload_handler: (blobInfo, success, failure) => {
// blobInfo.blob()为file, blobInfo.blob().name为文件名称,调用成功后需要回调success(文件名称),向页面传递图片信息,如果失败了需要回调failure(失败信息)
console.log('上传图片啦');
},
// toolbar定义快捷栏的操作, | 用来分隔显示
toolbar: 'image axupimgs | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
+ ' aligncenter alignright alignjustify | undo redo',
// 这里是代码块的一些语言选择,好像暂时还没支持typescript
codesample_languages: [
{ text: 'Python', value: 'python'},
{ text: 'HTML/XML', value: 'markup'},
{ text: 'Javascript', value: 'Javascript'},
{ text: 'CSS', value: 'css'},
{ text: 'Java', value: 'java'}
],
autoresize_on_init: false,
// 最小高度
min_height: 350,
// 最大高度
max_height: 650
}


问题: 怎么使用第三方插件

使用说明截图如下:

说明中指明,要将zip下载后放置到tinymce主目录下的plugins文件夹内,此时就出现一个问题:angular安装的tinymce使用地址默认是官方地址,也没有在配置中提供使用自己的地址的参数,怎么放第三方插件

解决方案

下载tinymce到本地

下载地址
在官网上下载tinymce包,下载完成后解压到自己项目中,也可以放到第三方空间(如阿里云的oss,第三方文件托管平台,只要能在项目中访问到即可),再将下载到的axupimgs.zip解压,将解压得到的axupimgs整个文件夹都挪到tinymce文件夹下的plugins文件夹下即可
即

• tinymce
  • plugins
    • axupimgs

配置index.html

在index.html中加入对tinymce.min.js的引用

<script type="text/Javascript" src="tinymce.min.js地址"></script>


若放在自己的项目中,还需要在angular.json中,加入对tinymce.min.js的引入

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/course",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"tinymce.min.js的地址,如src/assets/tinymce.min.js"
],


启动项目,可以看到

点击多图上传,会出现如下窗口,并且在console控制台中不会报错,功能都能正常使用

问题: upfiles.html 出现iframe跨域

如果你的tinymce文件夹不是放在项目中,而是托管到第三方平台,如阿里云的oss,在点击多图上传时,在console中会打印跨域问题,并且你也无法在多图上传的窗口中进行操作
这是因为第三方开发者在编写程序时,使用的iframe嵌套,而此刻我们的项目和tinymce地址不同,出现了跨域

解决方案

修改axupimgs中的plugin.min.js文件

var baseURL=tinymce.baseURL;
var iframe1 = baseURL+'/plugins/axupimgs/upfiles.html';


改为

var baseURL = document.location.protocol + '//' + document.location.host;
var iframe1 = baseURL + '/assets/plugins/axupimgs/upfiles.html';


将 axupimgs文件夹下的loading.gif和upfiles.html都放到项目中

将axupimgs文件夹下的loading.gif和upfiles.html都放到项目的assets文件夹下,结构如下:
src

• assets
  • plugins
  • axupimgs
    • upfiles.html
    • loading.gif
      在angular.json文件中加入axupimgs文件夹:

"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/course",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/assets/plugins/axupimgs"
],


重新启动项目,即可正常使用多图上传

汉化(方案2: 使用自定义tinymce.js地址)

在index.html中加入了tinymce.js地址后,汉化就可以不使用language_url参数,而是将语言文件zh_CN.js放到tinymce文件夹下的langs下,结构如下所示
tinymce

• langs
  • zh_CN.js

配置信息

{
selector: '#oneweek-editor',
// plugins是tinymce的各种插件
plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu codesample autosize axupimgs',
language: 'zh_CN',
images_upload_handler: (blobInfo, success, failure) => {
// blobInfo.blob()为file, blobInfo.blob().name为文件名称,调用成功后需要回调success(文件名称),向页面传递图片信息,如果失败了需要回调failure(失败信息)
console.log('上传图片啦');
},
// toolbar定义快捷栏的操作, | 用来分隔显示
toolbar: 'image axupimgs | codesample | bullist numlist | bold italic underline strikethrough | alignleft'
+ ' aligncenter alignright alignjustify | undo redo',
// 这里是代码块的一些语言选择,好像暂时还没支持typescript
codesample_languages: [
{ text: 'Python', value: 'python'},
{ text: 'HTML/XML', value: 'markup'},
{ text: 'Javascript', value: 'Javascript'},
{ text: 'CSS', value: 'css'},
{ text: 'Java', value: 'java'}
],
autoresize_on_init: false,
// 最小高度
min_height: 350,
// 最大高度
max_height: 650
}