#在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. 转:Gulp使用指南

    原文来自于:http://www.techug.com/gulp Grunt靠边,全新的建构工具来了.Gulp的code-over-configuration不只让撰写任务(tasks)更加容易,也更 ...

  2. 转:gpio_direction_output 与 gpio_set_value

    gpio_set_value(port_num,0/1) 一般只是在这个GPIO口的寄存器上写上某个值,至于这个端口是否设置为输出,它就管不了! 而gpio_direction_output (por ...

  3. 关于C#的委托

    作者  陈嘉栋(慕容小匹夫) 阅读目录 0x00 前言 0x01 从观察者模式说起 0x02 向Unity3D中的SendMessage和BroadcastMessage说拜拜 0x03 认识回调函数 ...

  4. GCD - Extreme (II)

    uva11424: 题目:给出n,求gcd(1,2)+gcd(1,3)+gcd(2,3)+gcd(1,4)+gcd(2,4)+gcd(3,4)+...+gcd(1,n)+gcd(2,n)+...+gc ...

  5. Arrays.sort的粗略讲解

    排序算法,基本的高级语言都有一些提供.C语言有qsort()函数,C++有sort()函数,java语言有Arrays类(不是Array).用这些排序时,都可以写自己的排序规则. Java API对A ...

  6. jquery 插件JTable使用

    http://www.jtable.org/ 下载后增加: Add these lines to the HEAD section of your HTML document: <!-- Inc ...

  7. Single Number III——LeetCode

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  8. Book for Opencv

    Upcoming: Learning OpenCV: Computer Vision in C++ with the OpenCV Library The second edition of the ...

  9. 开源库CImg 数据格式存储之二(RGB 顺序)

    在上一篇博客中已经初步说明了GDI和CImg数据的存储格式感谢博友 Imageshop 评论说明 CImg的说明文档中已有详细说明(详见上篇博客说明) CImg的数据格式确实是RRRGGGBBB顺序存 ...

  10. pgAdminIII使用图解

    原文地址:http://www.2cto.com/database/201312/267218.html pgAdmin III简介 要打开一个到服务的连接,在树中选择所需的服务,并双击它,或使用“工 ...