1、TextAngular:
https://github.com/fraywing/textAngular

textAngular是一个强大的Text-Editor/Wysiwyg 编辑器,用于Angular.js应用中。
安装使用方便,可以创建多个编辑器实例,双向绑定HTML内容,可以查看编辑内容的变化。
不足之处是不支持上传文件到服务器,只能进行简单的文字编辑,可用于网站的用户评论模块


2、angular.xheditor:

https://github.com/cipchk/angular.xheditor

xhEditor的AngularJS版本,没有研究


3、angular-ueditor:

http://inhu.net/publish-angular-ueditor.html

Ueditor是百度提供的在线编辑器,功能非常丰富,angular-ueditor 是一款整合了 angular 和 UEditor 的插件。目的是为了更方便的在angular基础上使用UEditor。
安装非常方便:

(1)首先到官网下载百度ueditor1_4_3-utf8-jsp.zip

(2)解压ueditor1_4_3-utf8-jsp.zip到自己的工程web目录,将jsp/lib目录下的jar包剪切到WEB-INF/lib目录下,这些jar是用来进行文件上传操作的,如果缺少的话是无法进行文件上传动作的。

(3)下载angular-ueditor-master.zip,解压缩后,将其中的angular-ueditor.js拷贝到自己的工程web目录中

(4)在单页面应用中需要增加的js文件

<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="angular-ueditor.js"></script>

(5)在app.js中将angular-ueditor引入到模块;在html应用中并绑定ng-model

angular.module('app', ['ng.ueditor'])
......
<div class="ueditor" ng-model="content"></div>

(6)上传图片默认路径的修改(参考www . suchso . com/UIweb/baidu-UEditor-image-upload-config-url.html)

所有的上传配置选项都在一个文件中配置,这个文件就是ueditor/jsp/config.json,例如imagePathFormat表示了文件上传到什么目录下。

"imagePathFormat": "./ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"

Angularjs在线编辑器的更多相关文章

  1. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  2. 在线编辑器的使用-KindEditor

    第一种:KindEditor编辑器 步骤一:加载相应的核心的文件 下载地址:http://kindeditor.net/demo.php <link rel="stylesheet&q ...

  3. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

  4. Method Draw – 很好用的 SVG 在线编辑器

    Method Draw 是一款在线 SVG 编辑器,是 SVG Edit 的一个分支.Method Draw 的目的是改进 SVG Edit 的可用性和用户体验.它移除了 line-caps/corn ...

  5. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

  6. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程

    UEditor是百度开发团队奉献的一款很不错的在线编辑器.在百度自己很多产品上都有应用,本文主要是该编辑器的配置教程. 1.下载UEditor,当前最新版本是1.3.6.这里下载的.net版本,选择U ...

  7. 05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能

    这篇文章讲的是在线编辑器功能,之前的部门模块中,增加部门的功能jsp页面起先是这么做的.

  8. 将kindeditor在线编辑器制作成smarty插件

    在web开发中,在线编辑器是经常要用到的功能模块,虽说配置在线编辑器没有多大难度,但是每一次编写重复的代码,总是让人感觉不爽. 本篇,就来讲解一下,如何将kindeditor制作成smarty的一个自 ...

  9. 在线编辑器 (UBB, FCK)

    这里主要说明一下:UBB UBB 使用类型HTML的语法.  UBB相对FCK的HTML方式, 安全性高. 用户不可以直接嵌入HTML代码.   UBB 在线编辑器(JS版): http://www. ...

随机推荐

  1. UIDatePicker的时间选择器里的时区的问题

    转自:http://www.cocoachina.com/bbs/simple/?t70445.html 初始化代码: - (void)viewDidLoad { [super viewDidLoad ...

  2. Python学习 之 switch语句

    1.python并没有提供switch语句,python可以通过字典实现switch语句的功能,实现方法分为两步 —首先,定义一个字典 —其次,调用字典的get()获取相应的表达式 通过字典调用函数 ...

  3. php引入公用部分html出现了一行空白(原创)

    在导入公用部分html(客服信息)时,莫名其妙出现了一行空白,样式,html均无问题 后来才发现是html多了一行空白 <div class="ad-module-item3 fn-m ...

  4. oracle数据字典和动态性能视图

    数据字典和动态性能视图数据字典是oracle数据库中重要的组成部分,提高了数据库的一些系统信息.(静态信息)动态性能视图记载了例程启动后的信息.(动态信息) 数据字典记录了数据的系统信息,是只读表和动 ...

  5. input两种默认显示文字方式

    First Note: placeholder属性 规定帮助用户填写输入字段的提示,值不会被提交, 且该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 如 <input type=&qu ...

  6. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  7. HttpClient(4.3.5) - HttpClient Proxy Configuration

    Even though HttpClient is aware of complex routing scemes and proxy chaining, it supports only simpl ...

  8. Nginx - HTTP Configuration, Module Directives

    Socket and Host Configuration This set of directives will allow you to configure your virtual hosts. ...

  9. Nginx - HTTP Configuration, Module Variables

    The HTTP Core module introduces a large set of variables that you can use within the value of direct ...

  10. Ubuntu系统中Sogou输入法面板问题解决方案

    好消息- Ubuntu Kylin团队与搜狗公司合作开发了“搜狗输入法 for Linux”版本,支持Ubuntu 12.04 和 Ubuntu 14.04操作系统,在Sougou官网就可以下载到,附 ...