xml地图|网站地图|网站标签 [设为首页] [加入收藏]

项目中引入,Angular整合最好用的富文本编辑器

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:148 发布时间:2019-08-01
摘要:花色中原来使用的富文本编辑器是wangEditor,那是贰个相当轻量、简洁编辑器 品种中原本使用的富文本编辑器是wangEditor,那是三个非常轻量、简洁编辑器 TinyMCETinyMCE是叁个轻量级的富文

花色中原来使用的富文本编辑器是 wangEditor,那是贰个相当轻量、简洁编辑器

品种中原本使用的富文本编辑器是 wangEditor,那是三个非常轻量、简洁编辑器

TinyMCETinyMCE是叁个轻量级的富文本编辑器,相对于CKEditor越发简洁,但能够满足绝大多数现象的急需。这段日子网上有关Angular整合TinceMCE的稿子相当多,但汇报得不是很显明,经过一番折腾,作者总算相比完善地将它构成到Angular项目中。

可是集团的事务晋级,想要一个意义更完善的编辑器,小编找了持久,最近大面积的编辑器有那个:

只是集团的作业进级,想要三个功力更全面包车型客车编辑器,小编找了遥遥无期,近来周围的编辑器有那几个:

图片 1

UEditor:百度前端的开源项目,功效庞大,基于 jQuery,但已经远非再维护,并且限定了后端代码,修改起来相比吃力

UEditor:百度前端的开源项目,功用壮大,基于 jQuery,但曾经未有再维护,何况限定了后端代码,修改起来相比较吃力

一、安装TinyMCE

官方网站上有比较完整的angular tinymce安装教导,所以那有个别自笔者就比较便捷带过。

地址在此处: Integration

图片 2

bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap jQuery...

bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap jQuery...

1、新建一个angular项目

ng new angular-tinymce

cd angular-tinymce

kindEditor:作用庞大,代码简洁,须要配置后台,并且好久没见更新了

kindEditor:作用庞大,代码简洁,需求配置后台,而且好久没见更新了

2、安装tinymce

npm install --save tinymce

wangEditor:轻量、简洁、易用,但是晋级到 3.x 之后,不便于定制化开采。可是小编很努力,广义上和自己是一亲朋基友,打个call

wangEditor:轻量、简洁、易用,但是晋级到 3.x 之后,不便于定制化开拓。可是小编很努力,广义上和本身是一亲人,打个call

3、设置tinymce全局访谈

与安装一般的npm包不一致,tinymce需求安装全局访谈之后技艺够选用,也正是要在档期的顺序的.angular-cli.json文件中拉长以下内容:

"scripts": [

"../node_modules/tinymce/tinymce.js",

"../node_modules/tinymce/themes/modern/theme.js",

"../node_modules/tinymce/plugins/link/plugin.js",

"../node_modules/tinymce/plugins/paste/plugin.js",

"../node_modules/tinymce/plugins/table/plugin.js"

],

在那边充裕的js在那之中,首要有3块,第一行是tinymce核心文件,第二行是核心风格。tinymce暗许提供了三套大旨,分别是modern、mobile、inlite,能够在.node_modulestinymcethemes目录中找到。接下来的几行是您要采取的插件。tinymce是中度可定制的,你只要求在这里大概援用一下要动用的插件,编辑器分界面就能够自行作出相应的调治。

图片 3

上海教室中大家在合丹麦语档的基本功上增添了image和imagetools多个插件,用于插入图片及图片上传。

quill:本人遵从相当的少,可是能够自行扩充,api 也很好懂,如若能看懂西班牙语的话...

quill:本身效力没有多少,不过能够活动扩张,api 也很好懂,如果能看懂罗马尼亚语的话...

4、定义全局变量

您还须要在品种中的.srctyping.d.ts中扬言tinymce全局变量,不然会唤起找不到tinymce

declare var tinymce: any;

图片 4

summernote:没深刻钻研,UI挺美丽,也是一款小而美的编辑器,但是我索要大的

summernote:没浓密钻研,UI挺美丽,也是一款小而美的编辑器,不过小编供给大的

5、拷贝皮肤文件到assets目录下

tinymce的核心(theme)跟皮肤(skin)是相互分开的,皮肤首倘使字体、Logo、css等片段内容。大家须要将有关文书拷贝到项目中的assets目录下。也正是将.node_modulestinymce中的skins目录整个拷贝到.srcassets目录下。

图片 5

在有如此参考的境况下,笔者末了如故选拔了 tinymce 那么些不搭梯子连官方网站都打不开的编辑器(简直是自讨苦吃),首要归因于两点:

 

6、安装粤语援助

tinymce默许是葡萄牙语分界面,若是要利用中文,大家必要先下载粤语语言包,然后将其路径加入到地点的大局配置当中。

中文语言包能够从那一个地点下载:

图片 6

选择Chinese(China)

下载下来的压缩文件中会有二个langs目录,里面有zh_CN.js,大家得以把那一个目录拷贝到.srcassets目录下,然后在全局中丰盛引用:

图片 7

  1. GitHub 上点儿比比较多,功用也齐全;

  2. 独一二个从 word 粘贴过来还可以够维系绝超过48%格式的编辑器;

  3. 不供给找后端人士扫码改接口,前后端分离;

  4. 说好的两点吗!

在有这样参谋的情况下,笔者最终依然选项了 tinymce 这个不搭梯子连官方网址都打不开的编辑器(简直是自讨苦吃),首要因为两点:

二、尝试运用tinymce

产生上述手续后,我们就能够在页面中动用tinymce了。由于编辑器只怕在多处选取,所以大家单独建设构造多少个component来放置编辑器

ng g c myeditor

仿照效法官方文书档案指导,大家将myeditor.component.ts文件改成如下内容:

import { Component, OnDestroy, AfterViewInit, EventEmitter, Input, Output } from '@angular/core';

@Component({ selector: 'simple-tiny', template: `` })

export class MyeditorComponent implements AfterViewInit, OnDestroy {

@Input() elementId: String;

@Output() onEditorKeyup = new EventEmitter();

editor;

ngAfterViewInit() {

tinymce.init({

        selector: '#' this.elementId,

        plugins: ['link', 'paste', 'table','image'],

        skin_url: 'assets/skins/lightgray',

        setup: editor => {

            this.editor = editor; editor.on('keyup', () => {

                const content = editor.getContent();

                this.onEditorKeyup.emit(content); });

        },

    });

}

ngOnDestroy() {

    tinymce.remove(this.editor);

}

}

位置的剧情中,我们还增多了image插件的援引,别的要小心skin_url是对应你存放skin的目录。

接下去,我们在app.component.html中选择那么些component。由于大家是应用anglar-cli生成myeditor组件的,所以不必declare了,直接在文件中参与代码就足以了。

图片 8

施行ng serve看一下是否足以健康运行。

图片 9

未曾问题,分界面是汉语显示,况且也见到了我们加多的image插件Logo。点击一下该Logo,弹出插入图片对话框。

图片 10

能够看出这么些插入图片对话框很简短,只可以输入图片地址,并不曾上传的效劳,所以接下去大家还要一而再全力。

一、财富下载

  1. GitHub 上点滴非常多,成效也齐全;

三、扩展图片上传功效

要让tinymce帮衬图片上传成效,只须求在开始化文件中追加images_upload_handler配置就能够,代码如下:

图片 11

uploadFile方法的概念如下:

图片 12

重新点击插入图片Logo,能够见到对话框扩充了“上传”功效了。

图片 13

关于上传后端的贯彻这里就不详述了,一般大家会回到一个图纸地址,然后选择方面包车型地铁success()来接受就足以了。

tinymce 官方为 vue 项目提供了二个零件 tinymce-vue

2. 唯一二个从 word 粘贴过来还是可以维系绝超过二分一格式的编辑器;

四、获取和安装编辑器内容

要获得tinymce的内容特别轻巧,上边的代码其实早就达成了这几个功用了,再看一下myeditor.component.ts文件:

图片 14

此间大家早已设置了贰个键盘监听事件,当键盘弹起时修改编辑器的剧情,相同的时候触发多个onEditorKeyup事件,编辑器的开始和结果将经过emit向外发布。

然后,我们在应用组件中只须要监听onEditorKeyup事件就可以。

图片 15

图片 16

图片 17

而要设置剧情,则要求先安装二个输入属性:

@Input() initialContent: String;

下一场完结OnChanges接口,那样,当initialContent产生变化的时候编辑器内容将发生变化

图片 18

修改援用组件的代码:

图片 19

这里的_detail是我们和好定义的变量,举例恐怕是一篇小说的剧情。

npm install @tinymce/tinymce-vue -S
  1. 无需找后端人士扫码改接口,前后端分离;

  2. 说好的两点啊!

在 vscode、webstorm 的终点运营这段代码可能会报错,最佳使用操作系统自带的命令行工具

 

例如有买入 tinymce 的服务,能够参照 tinymce-vue 的验证,通过 api-key 直接动用 tinymce

一、能源下载

像作者这样没置办的,依然要诚实下载 tinymce

tinymce 官方为 vue 项目提供了八个组件 tinymce-vue

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

设置之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下

在 vscode、webstorm 的极限运维这段代码大概会报错,最棒使用操作系统自带的命令行工具

// 纵然是应用 vue-cli 3.x 创设的 typescript 项目,就放到 public 目录下,文中全数 static 目录相关都那样管理

设若有购买 tinymce 的劳动,能够参见 tinymce-vue 的辨证,通过 api-key 直接利用 tinymce

tinymce 默许是克罗地亚共和国(Republika Hrvatska)语分界面,所以还索要下载多少个汉语语言包(记得搭梯子!搭梯子!搭梯子!)

像自家那样没置办的,如故要诚实下载 tinymce

下一场将以此语言包放到 static 目录下,为了组织清晰,作者包了一层 tinymce 目录

npm install tinymce -S

图片 20

安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:项目中引入,Angular整合最好用的富文本编辑器

关键词: 68399皇家赌场 日记本

上一篇:MySQL必知必会,基础Sql语句之一

下一篇:没有了

最火资讯