Angular集成UEditor
1、Ueditor的集成主要通过把UEditor做成一个Component来实现,先上Component代码:
import {
AfterContentInit, Component, Input, OnDestroy, OnInit
} from '@angular/core';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser'; @Component({
selector: 'app-ueditor',
template: '<div [innerHTML]="trustedHtml"></div>'
})
export class UeditorComponent implements OnInit, OnDestroy, AfterViewInit {
ngOnDestroy(): void {
this.ueditor.destroy();
this.ueditor = null;
} @Input() content: string;
ueditor: any; trustedHtml: SafeHtml;
constructor(private sanitizer: DomSanitizer) {
// javascript: URLs are dangerous if attacker controlled.
// Angular sanitizes them in data binding, but you can
// explicitly tell Angular to trust this value:
}
ngOnInit(): void {
const html = '<script id="textdescription" name="content" style="display: inline-block;" type="text/plain">' + this.content + '</script>';
this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(html); }
ngAfterViewInit(): void {
this.ueditor = UE.getEditor('textdescription', {'initialFrameHeight': 580});
//console.log(this.ueditor);
} }
简单解释一下,这个代码干了啥,用DomSanitizer这个组件把本来模板中不合法的Script标签合法化,而且只能通过属性绑定的赋值,才能让模板把它渲染出来。Ng的模板自带XSS过滤,像Script标签会被直接省略掉,导致的结果是UE找不到holder的位置,执行出错。
2、上面这个代码里面的UE是一个全局库,有个比较直接懒的只是让其可见的声明方式是如下,细致的接口声明,同志们自己搞吧:
declare var UE: any;
3、把Ueditor的那两个js文件ueditor.config.js、ueditor.all.js加进angular-cli的scripts配置项。
4、要把Ueditor用到的静态资源扔进assets
5、ueditor.config.js中的UEDITOR_HOME_URL改成静态文件URL父目录,serverUrl改成后端服务器URL。
最后补一句后端修改点,由于SPA往往跨域部署,后端正常的CORS配置以外,Ueditor会自动把某些调用(config)改成jsonp调用,后端需要根据callback参数做对应额jsonp方式返回响应。最后做个广告:如果你用Django,推荐DUEditor插件:https://github.com/dhcn/DUEditor
Angular集成UEditor的更多相关文章
- Typecho集成ueditor笔记
前言:萝卜青菜各有所爱,因为个人需求所以需要在博客中集成ueditor,并非是我不喜欢md语法 其实本篇的笔记的书写最早也是在本地的md编辑器上完成的 1. 首先下载ueditor编辑器,然后重命名文 ...
- 微服务迁移记(五):WEB层搭建(5)-集成ueditor编辑器,伪分布式图片上传
一.redis搭建 二.WEB层主要依赖包 三.FeignClient通用接口 以上三项,参考<微服务迁移记(五):WEB层搭建(1)> 四.SpringSecurity集成 参考:< ...
- 在Vue2.0中集成UEditor 富文本编辑器
在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很 ...
- vue-cli中如何集成UEditor 富文本编辑器?
1.根据后台语言下载对应的editor插件版本 地址:https://ueditor.baidu.com/website/download.html 2.将下载好的资源放在/static/uedito ...
- Laravel 框架集成 UEditor 编辑器的方法
㈠. 背景 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 MarkDown 更为简单,但是感觉暂时只适合程序猿 此文介绍如何在 Laravel5.5 ...
- angular集成tinymce
1.前言 我使用的是angular的7.x版本,和之前的低版本集成方式有所区别.这里记录下基本的集成步骤. 2.集成步骤 2.1安装tinymac包 npm install tinymce --sav ...
- angular中ueditor插件的使用
#在angularjs中使用ueditor编辑器需要注意事项: 在ui-view中使用放置ueditor的div,页面加载时编辑器在页面中是不显示的,需要通过指令手动replay 例: /** * u ...
- php随笔9-thinkphp OA系统 集成UEditor
版本信息:thinkphp 3.1.3 full UEditor 1.4.3.1 utf8-php 1.将EUditor放在项目public目录下. 2.在指定页面加载编辑器 <!-- ...
- xadmin集成ueditor
from DjangoUeditor.models import UEditorField content = UEditorField(u"内容", imagePath=&quo ...
随机推荐
- How To: Run Tapestry5 On JBoss 6/7
Tapestry 5.x cannot find the core pages and components from the URLs provided from classloaders in J ...
- iOS 解决键盘挡住输入框的问题
iOS开发中经常会用到输入框UITextField,所以也常会遇到键盘挡住输入框而看不到输入框的内容. 在这里记录一种方法,用UITextField的代理来实现View的上移来解决这个问题. 首先设置 ...
- Mysql group by语句的优化
默认情况下,MySQL排序所有GROUP BY col1, col2, ....,查询的方法如同在查询中指定ORDER BY col1, col2, ....如果显式包括一个包含相同的列的ORDER ...
- 利用openssl管理证书及SSL编程第1部分: openssl证书管理
利用openssl管理证书及SSL编程第1部分 参考:1) 利用openssl创建一个简单的CAhttp://www.cppblog.com/flyonok/archive/2010/10/30/13 ...
- Java创建柱状图及饼状图
Java创建图表其实还是很方便的,但是要引入相关的jar包.如下 jfreechart.jar jcommon,jar gnujaxp.jar 其中最主要的是jfreechart.jar. 下面就让我 ...
- 关于reverse_iterator
这个reverse_iterator曾经搞得我头大,其对应的函数也是那么的可不理解...现在一切都好了. 对于left_null>1->2->3->4->right_nu ...
- Android View底层到底是怎么绘制的
Android绘制链图: 网上很多讲Android view的绘制流程往往只讲到了Measure - Layout - Draw. 但是,这只是一个大体的流程,而我们需要探讨的是Android在我们 ...
- 【Linux 操作系统】Ubuntu 基础操作 基础命令 热键 man手册使用 关机 重启等命令使用
. : 关机, 如果将Linux默认运行等级设置为0, 系统将无法启动; -- : 多用户模式, 允许使用网络文件系统, 一般不使用图形界面登陆就是这种模式; -- : 多用户图形界面模式, 该模式下 ...
- 反对抄袭 正解spring的@Autowired 不要相信网上的错误版本
首先,最重要的, @Autowired的就是用来来消除 set ,get方法. 有些介绍,如著名的马士兵,说要在set方法上进行注入.我当时就看不明白了,既然只取消了一个GET,这个@Autowire ...
- android 常用方法集合
private static Contextcontext; privatestatic Displaydisplay; private static String TAG = "MyToo ...