资讯专栏INFORMATION COLUMN

Angular5 整合富文本编辑器TinyMCE(汉化+上传)

zeyu / 1024人阅读

摘要:简介是一个轻量级的富文本编辑器,相对于更加精简,但足以满足绝大部分场景的需要。

1. TinyMCE简介
TinyMCE是一个轻量级的富文本编辑器,相对于CKEditor更加精简,但足以满足绝大部分场景的需要。
2. 安装和配置TinyMCE

2.1 安装TinyMCE

npm install --save tinymce

2.2 设置tinymce全局访问(.angular-cli.json)

 "scripts": [
     "../node_modules/_tinymce@4.7.4/tinymce.js",
     "../node_modules/_tinymce@4.7.4/themes/modern/theme.js",
     "../node_modules/_tinymce@4.7.4/plugins/link/plugin.js",
     "../node_modules/_tinymce@4.7.4/plugins/paste/plugin.js",
     "../node_modules/_tinymce@4.7.4/plugins/table/plugin.js"
 ],

2.3 定义全局变量

在项目中的typing.d.ts中声明tinymce全局变量,不然会提示找不到tinymce
declare var tinymce: any;

2.4 拷贝皮肤文件到assets目录下

Linux and MacOS
cp -r node_modules/tinymce/skins src/assets/skins

2.5 安装中文支持

中文语言包可以从这个地址下载:https://www.tinymce.com/downl...

下载下来的压缩文件中会有一个langs目录,里面有zh_CN.js,把这个目录拷贝到src/assets目录下,然后在全局中添加引用(.angular-cli.json):
"scripts": [

   "../node_modules/_tinymce@4.7.4/tinymce.js",
   "../node_modules/_tinymce@4.7.4/themes/modern/theme.js",
   "../node_modules/_tinymce@4.7.4/plugins/link/plugin.js",
   "../node_modules/_tinymce@4.7.4/plugins/paste/plugin.js",
   "../node_modules/_tinymce@4.7.4/plugins/table/plugin.js",
   "../src/assets/langs/zh_CN.js"

],

3. 创建TinyMCE组件
ng g c myeditor
import {
    Component,
    AfterViewInit,
    EventEmitter,
    OnDestroy,
    Input,
    Output
} from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Component({
    selector: "tiny-editor",
    templateUrl: "./tiny-editor.component.html",
    styleUrls: ["./tiny-editor.component.css"]
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
    @Input() elementId: String;
    @Output() onEditorContentChange = new EventEmitter();

    editor;

    constructor() { }

    ngAfterViewInit() {
        let self = this;
        tinymce.init({
            selector: "#" + this.elementId,
            height: 600,
            plugins: ["link", "table", "image"],
            skin_url: "assets/skins/lightgray",
            setup: editor => {
                this.editor = editor;
                editor.on("keyup change", () => {
                    const content = editor.getContent();
                    this.onEditorContentChange.emit(content);
                });
            }
        });
    }

    ngOnDestroy() {
        tinymce.remove(this.editor);
    }

}
// tiny-editor.component.html
4. 使用自定义TinyMCE组件
5. 增加图片上传功能
import {
    Component,
    AfterViewInit,
    EventEmitter,
    OnDestroy,
    Input,
    Output
} from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Component({
    selector: "tiny-editor",
    templateUrl: "./tiny-editor.component.html",
    styleUrls: ["./tiny-editor.component.css"]
})
export class TinyEditorComponent implements AfterViewInit, OnDestroy {
    @Input() elementId: String;
    @Output() onEditorContentChange = new EventEmitter();

    editor;

    constructor(private http: HttpClient) { }

    ngAfterViewInit() {
        let self = this;
        tinymce.init({
            selector: "#" + this.elementId,
            height: 600,
            plugins: ["link", "table", "image"],
            skin_url: "assets/skins/lightgray",
            setup: editor => {
                this.editor = editor;
                editor.on("keyup change", () => {
                    const content = editor.getContent();
                    this.onEditorContentChange.emit(content);
                });
            },
            // 图片上传功能
            images_upload_handler: function(blobInfo, success, failure) {
                var formData;
                formData = new FormData();
                console.log(blobInfo);
                formData.append("file", blobInfo.blob(), blobInfo.filename());
                console.log(formData);
                self.uploadFile("http://www.seenode.com/index/player/upload", formData).subscribe( response => {
                    let url = response["data"]["imagePath"];
                    success(url);
                });
            }
        });
    }

    // 上传图片
    private uploadFile(url: string, formData: any) {
        var self = this;
        var headers = new HttpHeaders();
        headers.set("Accept", "application/json");
        return self.http.post(url, formData, { headers: headers });
    }

    ngOnDestroy() {
        tinymce.remove(this.editor);
    }

}
6. 获取和设置编辑器内容
// 监听onEditorKeyup事件
private keyupHandler(event) {
    console.log("编辑器的内容:", event);
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92499.html

相关文章

  • 18.上传文件限制和使用富文本辑器【完结篇】

    摘要:本文首先完善一下前文上传头像的部分,增加上传文件的大小和格式限制,其次把发布问答部分中,问题的详细描述部分从普通的修改为富文本编辑器,这样可以在问题描述中添加各种格式的信息,如代码表格列表图片等。 本文是后端开发——Flask初体验专栏的最后一篇文章,整个Q&A demo的简单框架其实已经建立起来了,现在就是再优化、完善一些细节。本文首先完善一下前文上传头像的部分,增加上传文件的大小和...

    xialong 评论0 收藏0
  • tinymce与prism代码高亮实现及汉化的配置

    摘要:简单介绍是一个轻量级的基于浏览器的所见即所得编辑器,由写成。它对和都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。所以我们使用作为代码高亮插件。简单介绍:TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的...

    番茄西红柿 评论0 收藏0
  • django项目admin后台tinymce文本编辑并自定义添加图片本地上传和富文本中的回显

    摘要:选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文,标明了中文,同时需要下载语言包放到对应的文件夹下。 前言 我们常因为django的自带admin后台功能而选择该框架,但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚,鉴于项目已经采用了django,而后台要求能够直接上传富文本内容直接用于网页显示,定制性高,后来翻了目前较为知名的几款富文本编辑框,觉得还是tiny...

    HackerShell 评论0 收藏0
  • django项目admin后台tinymce文本编辑并自定义添加图片本地上传和富文本中的回显

    摘要:选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文,标明了中文,同时需要下载语言包放到对应的文件夹下。 前言 我们常因为django的自带admin后台功能而选择该框架,但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚,鉴于项目已经采用了django,而后台要求能够直接上传富文本内容直接用于网页显示,定制性高,后来翻了目前较为知名的几款富文本编辑框,觉得还是tiny...

    Honwhy 评论0 收藏0
  • django项目admin后台tinymce文本编辑并自定义添加图片本地上传和富文本中的回显

    摘要:选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文,标明了中文,同时需要下载语言包放到对应的文件夹下。 前言 我们常因为django的自带admin后台功能而选择该框架,但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚,鉴于项目已经采用了django,而后台要求能够直接上传富文本内容直接用于网页显示,定制性高,后来翻了目前较为知名的几款富文本编辑框,觉得还是tiny...

    k00baa 评论0 收藏0

发表评论

0条评论

zeyu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<