angular中ueditor插件的使用
#在angularjs中使用ueditor编辑器需要注意事项:
在ui-view中使用放置ueditor的div,页面加载时编辑器在页面中是不显示的,需要通过指令手动replay
例:
/**
* ueditor使用指令手动replay
*/
mainModule.directive('editor', function($http) {
return {
restrict: 'A'
, scope: {
content: '='
}
, link: function(scope, element, attrs){
var editor = new UE.ui.Editor({initialContent: scope.content});
editor.render(element[0]);
var token = sessionStorage.getItem('token');
console.log(token);
editor.ready(function(){
// editor.addListener('contentChange', function(){
// scope.content = editor.getContent();
// scope.$root.$$phase || scope.$apply();
// });
// scope.$watch('content', function(newValue){
// editor.setContent(newValue);
// });
});
$('#btn1').click(function(){
/**通过getcontent方法获取文本内容时需要对文本中的双引号进行转义,同时通过scope绑定从数据库查询的文本时需要通过$sce服务,使ng-bind-html不会过滤掉文本自带的样式
//$scope.text = "<p style=\"text-align: center;\">ssssssss</p>
//$scope.texts = $sce.trustAsHtml($scope.text);*/
var content = editor.getContent().replace(/"/gm,'\\"');
console.log(content);
//获得发布的图片地址
var imageUrls = $("#filepic2").data('fileinput').getUploadSucFile();
var imgUrl = JSON.stringify(imageUrls);
//创建对象拼接字符串参数
var obj = {};
obj.title = $('#title').val();
obj.content = content;
obj.summary = $('#summary').val();
obj.cover = imgUrl;
//data对象json化
var data = JSON.stringify(obj);
console.log(data);
$http({
method : 'post',
url : '../article/create',
data:data,
headers : {
'token' :token
}
})
.success(
function(resp) {
alert('保存成功')
});
})
}
};
})
html中使用
<div class="inp-elem">
<div editor style="min-height: 200px; width: 100%;" id="content"
content="content" style="margin-top:200px"></div>
</div>
angular中ueditor插件的使用的更多相关文章
- 随笔:关于 FastAdmin ueditor 插件 中的 rand mt_rand mt_getrandmax 问题
随笔:关于 FastAdmin ueditor 插件 中的 rand mt_rand mt_getrandmax 问题 问题来源 一位小伙伴在使用 Ueditor 插件时出错,因为用的是 php7.1 ...
- ASP.NET中UEditor使用
ASP.NET中UEditor使用 0.ueditor简介 UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点.开源基于BSD协议,所有源代 ...
- ueditor插件 -- 插入填空题
插入填空题,一个看似小小的需求,但是却是折腾了很9.主要产品那边的要求,空格上面要标有序号,并且再页面当中能够同步空格答案列表. 1.ueditor插件 插件入门,官方的例子还是很简单直接的,对于我们 ...
- springmvc集成Ueditor插件实现图片上传2、
一.下载Ueditor插件. 地址:http://ueditor.baidu.com/website/download.html 二.环境搭建. 具体可以参看http://fex.baidu.com/ ...
- Angular中ui-grid的使用详解
Angular中ui-grid的使用 在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验.最近,项目中用到的表格特别多,而且表格的列数和行数也超多.为了让用户浏览更爽,产品经理提出,当表格 ...
- angular中如何监控dom渲染完毕
刚刚看到群上一个人说,他们公司凡是用angular和jquery插件一起用的人,都被解雇了,没看到这句话之前我很惭愧的说我有这样用过,其实angular的生态系统那么完善,完全可以不用去操作任何的do ...
- Angular中的$cacheFactory的作用和用法
1.Angular中的$cacheFactory的作用: (1)put(key,value); 在缓存对象中插入一个键值对(key,value). (2)get(key); 在缓存对象中通过指定 ...
- Angular中引入外部js的使用方式
在Angular中我们或许会用到部分外部插件的时候,像Bootstrap,Jquery这些当然我们可以通过Npm安装包的形式引入,但是还有一些其它的js库需要引入的话,我们又应该怎样操作呢? 在这里做 ...
- 富文本编辑器——百度UEditor插件安装教程
一.使用环境 Win7 Eclipse jettty9 chrome 二.下载百度UEditor插件 1.下载地址:http://ueditor.baidu.com/website/download. ...
随机推荐
- 编译内核出错:invalid option `abi=aapcs-linux' 解决办法
出现此问题的原因是由于kernel feature中选中了Use the ARM EABIto compile the kernel引起的,有两各解决办法: 1)换编译器为arm-linux-gcc ...
- j
在Java程序或JSP程序中,其实有很多的代码段是可以重复使用的,比如对数据库的操作.用户的有效性检查及某些项特定功能的实现等.为了很好的解决这个问题,提高开发效率,Sun公司推出了JavaBean, ...
- 关于Verilog 中的for语句的探讨
在C语言中,经常用到for循环语句,但在硬件描述语言中for语句的使用较C语言等软件描述语言有较大的区别. 在Verilog中除了在Testbench(仿真测试激励)中使用for循环语句外,在Test ...
- linux中VI编辑器使用个人记录
VI编辑器有三种编辑模式:命令模式.最后行模式.文本编辑模式 启动VI后进入的第一种模式是”命令模式“.从命令模式可进入最后行模式和编辑模式.而后两种模式之间不能直接切换.必须按ESC键退回到命令模式 ...
- core dump
Core Dump?! 整理:Wilbur Lang 何谓 core? 在使用半导体作为内存的材料前,人类是利用线圈当作内存的材料(发明 者为王安),线圈就叫作 core ,用线圈做的内存就叫作 co ...
- 面向对象涉及SOLID原则
S = Single Responsibility Principle 单一职责原则 O = Opened Closed Principle 开放闭合原则 L = Liscov Substituti ...
- github上的一些Delphi开源项目
https://github.com/FMXExpress?tab=repositorieshttps://github.com/stars/maurobottahttps://github.com/ ...
- bzoj2502
学到很多知识的一道题目一开始读错题,后来发现是每条边必须至少访问一次明显是一个有下界的最小流首先是我自己脑补的比较渣的算法,可以无视:对于有下界的最小流,我不会做,但是我会做有下界的费用流,而且注意这 ...
- 【KMP】【最小表示法】NCPC 2014 H clock pictures
题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1794 题目大意: 两个无刻度的钟面,每个上面有N根针(N<=200000),每个 ...
- java工作流bpm开发ERP实例
今天看了一个java工作流bpm开发ERP的例子,文章介绍:http://tech.it168.com/a2009/0507/275/000000275294_14.shtml 增加数据块 一路照做就 ...