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)
- 已商业化(也就是说会一直更新,并且他也有提供免费功能,已经足够笔者使用)
参考地址
致谢!!
官方文档,可自行翻译
第三方翻译的中文说明文档
版本
| 名称 | 版本号 |
|---|---|
| angular | 8+ |
| tinymce | 5.1.5 |
使用
安装步骤
英文说明: 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
"
[init]="{
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}"
>
</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
- plugins
配置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
}