#在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插件的使用的更多相关文章

  1. 随笔:关于 FastAdmin ueditor 插件 中的 rand mt_rand mt_getrandmax 问题

    随笔:关于 FastAdmin ueditor 插件 中的 rand mt_rand mt_getrandmax 问题 问题来源 一位小伙伴在使用 Ueditor 插件时出错,因为用的是 php7.1 ...

  2. ASP.NET中UEditor使用

    ASP.NET中UEditor使用 0.ueditor简介 UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点.开源基于BSD协议,所有源代 ...

  3. ueditor插件 -- 插入填空题

    插入填空题,一个看似小小的需求,但是却是折腾了很9.主要产品那边的要求,空格上面要标有序号,并且再页面当中能够同步空格答案列表. 1.ueditor插件 插件入门,官方的例子还是很简单直接的,对于我们 ...

  4. springmvc集成Ueditor插件实现图片上传2、

    一.下载Ueditor插件. 地址:http://ueditor.baidu.com/website/download.html 二.环境搭建. 具体可以参看http://fex.baidu.com/ ...

  5. Angular中ui-grid的使用详解

    Angular中ui-grid的使用 在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验.最近,项目中用到的表格特别多,而且表格的列数和行数也超多.为了让用户浏览更爽,产品经理提出,当表格 ...

  6. angular中如何监控dom渲染完毕

    刚刚看到群上一个人说,他们公司凡是用angular和jquery插件一起用的人,都被解雇了,没看到这句话之前我很惭愧的说我有这样用过,其实angular的生态系统那么完善,完全可以不用去操作任何的do ...

  7. Angular中的$cacheFactory的作用和用法

    1.Angular中的$cacheFactory的作用:    (1)put(key,value); 在缓存对象中插入一个键值对(key,value). (2)get(key); 在缓存对象中通过指定 ...

  8. Angular中引入外部js的使用方式

    在Angular中我们或许会用到部分外部插件的时候,像Bootstrap,Jquery这些当然我们可以通过Npm安装包的形式引入,但是还有一些其它的js库需要引入的话,我们又应该怎样操作呢? 在这里做 ...

  9. 富文本编辑器——百度UEditor插件安装教程

    一.使用环境 Win7 Eclipse jettty9 chrome 二.下载百度UEditor插件 1.下载地址:http://ueditor.baidu.com/website/download. ...

随机推荐

  1. Asp.Net Mvc - 在OnResultExecut* 拦截Action返回的HTML

    在Asp.Net MVC项目中通过重写ActionFilterAttribute中的方法,我们就可以在轻松的在Action方法执行前后做一些特殊的操作如:[身份认证.日志记录.内容截取等]. 但是我们 ...

  2. OC 之 谓词

    NSPredicate 分类: Objective-C iOS XCode Mac2012-10-26 17:26 10557人阅读 评论(1) 收藏 举报 简述:Cocoa框架中的NSPredica ...

  3. IFrame中Session丢失的解决办法

    1.打开IIS管理器 inetmgr2.选择被嵌入iframe源站点或者目录,右键点击打开属性框3.切换到HTTP头4.添加5.自定义HTTP头名: P3P6.自定义HTTP头值: CP=" ...

  4. ESXI转HYPER-V,问题接二连三啊(VMDK转VHD)

    首先说软件: 要不是用SCVMM来转的话,我用得最爽的还是WINIMAGE,自然流畅.其它的都有各种问题. 其次说说配置更改: 如果原ESXI里只有一个硬盘,一切好说,如果里面挂载了两个,甚至三个硬盘 ...

  5. hashCode() 和equals() 区别和作用

    HashSet和HashMap一直都是JDK中最常用的两个类,HashSet要求不能存储相同的对象,HashMap要求不能存储相同的键. 那么Java运行时环境是如何判断HashSet中相同对象.Ha ...

  6. Gvim各种插件配置(windows环境下)

    1.Vundle插件:https://github.com/gmarik/Vundle.vim 用于管理Vim插件,安装此插件需要系统中已安装git,参考链接:Git for Windows安装和基本 ...

  7. bzoj1430

    这道题只是给bzoj1005做一个铺垫这里介绍了一个叫prufer编码的东西,就是给定一棵带标号的无根树,找出编号最小的叶子节点,写下与它相邻的节点的编号,然后删掉这个叶子节点.反复执行这个操作直到只 ...

  8. 【转】Android 菜单(OptionMenu)大全 建立你自己的菜单--不错

    原文网址:http://www.cnblogs.com/salam/archive/2011/04/04/2005329.html 菜单是用户界面中最常见的元素之一,使用非常频繁,在Android中, ...

  9. ASP.Net MVC-Web API使用Entity Framework时遇到Loop Reference

    原文地址:http://www.it165.net/pro/html/201210/3932.html 最近开始研究Web API,运气不错第一个测试项目就遇到问题@@-当新增Control时选择[A ...

  10. 2012 A 《中国近现代史纲要》课程期末考试试卷

    湖南人文科技学院2012—2013学年第1学期公共课 2011级<中国近现代史纲要>课程期末考试试卷 考核方式:(开卷)                                   ...