使用 tinymce 提供的云编辑器
即真正的 tinymce 编辑器脚本都放到 他们的服务器上，
但访问速度真的不行
使用方法
然后在模块里加载
import { EditorModule } from '@tinymce/tinymce-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
EditorModule // 这就是编辑器模块
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }在页面上使用，这里需要填上你在 www.tiny.cloud 上注册生成的 apiKey
<editor
apiKey="your-api-key"
[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>本地打包
则需要安装 tinymce 编辑器本体
然后配置 angular.json 复制脚本文件，及引用脚本
"assets": [
{ "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
],
"scripts": [
"node_modules/tinymce/tinymce.min.js"
]在模块加载
import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
/* ... */
@NgModule({
/* ... */
imports: [
EditorModule
],
providers: [
{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
]
})使用
<editor [init]="{
base_url: '/tinymce', // Root for resources
suffix: '.min' // Suffix to use when loading resources
}"></editor>加载语言包
从 官网 下载语言包
复制 zh_CN.js 到 src/assets/tinymce/langs 目录下
然后再使用时加上配置
<editor [init]="{
base_url: '/tinymce',
suffix: '.min',
language_url: '../../../../../assets/tinymce/langs/zh_CN.js',
language: 'zh_CN',
}"></editor>PS：这里的；路径为根目录，如果为二级目录backend，则需要修改为
base_url: '/backend/tinymce',
suffix: '.min',
language_url: '../../../../../backend/assets/tinymce/langs/zh_CN.js',
language: 'zh_CN',图片上传
更改使用时的配置，添加 imagetools 插件
{
height: 500,
base_url: '/backend/tinymce',
suffix: '.min',
language_url: '../../../../../backend/assets/tinymce/langs/zh_CN.js',
language: 'zh_CN',
plugins: [
'advlist autolink lists link image imagetools 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',
image_caption: true,
paste_data_images: true,
imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
images_upload_handler: (blobInfo, success: (url: string) => void, failure: (error: string) => void) => {
const form = new FormData();
form.append('file', blobInfo.blob(), blobInfo.filename());
// 这里时是上传的具体方法
this.httpClient.post<any>('upload/image', form).subscribe(res => {
success(res.url);
}, err => {
failure(err.error.message);
});
},
}images_upload_handler 为自定义上传方法，
这样就可以上传图片了
转载请保留原文链接： https://zodream.cn/blog/id/189.html