最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多，让我弄个别的，然后就找到了wangEditor,这个配置和上手都要简单一些，下面来看看具体操作步骤吧：

　　首先大家可以在https://github.com/wangfupeng1988/wangEditor或者官网http://www.wangeditor.com/ 进行下载，里面文档内容也很容易理解，可以自行配置。下载后解压，我们需要用到的主要是wangEditor.js或者 wangEditor.min.js。下面附上目录及代码:

 1 <html>

 2 <head>

 3     <title>angular集成wangEditor</title>

 4     <meta charset="utf-8">

 5     <script src="js/angular.min.js"></script>

 6     <script src="js/wangEditor.min.js"></script>

 7 </head>

 8 <body ng-app="myApp" ng-controller="myCtrl">

 9     <div id="editor" ng-model="sendPromt"></div>

10     <button ng-click="getContent()">获取html</button> <br />

11     <button ng-click="getContent2()">获取text</button> <br />

12 <script type="text/javascript">

13     var app = angular.module('myApp',[]);

14     app.controller('myCtrl',['$scope',function($scope){

15         //配置wangEditor

16         var E, editor;

17         E = window.wangEditor;

18         editor = new E('#editor'); //id一定要一致

19         editor.customConfig.menus = [

20             'head',  // 标题

21             'bold',  // 粗体

22             'fontSize',  // 字号

23             'fontName',  // 字体

24             'italic',  // 斜体

25             'underline',  // 下划线

26             'foreColor',  // 文字颜色

27             'backColor',  // 背景颜色

28             'link',  // 插入链接

29             'list',  // 列表

30             'justify',  // 对齐方式

31             'image',  // 插入图片

32             'table',  // 表格

33             'video',  // 插入视频

34             'code',  // 插入代码

35             'undo'  // 撤销

36         ];

37         //如果需要使用 base64 编码直接将图片插入到内容中，可参考一下示例配置

38         editor.customConfig.uploadImgShowBase64 = true;

39         // 将图片大小限制为 10M

40         editor.customConfig.uploadImgMaxSize = 10* 1024 * 1024;

41         editor.create();

42         //获取内容的方式

43         $scope.getContent = function(){

44             alert(editor.txt.html())

45         }

46         $scope.getContent2 = function(){

47             alert(editor.txt.text())

48         }

49 }]);

50 </script>

51 </body>

52 </html>

好了，最简单的及成就完成了，下面直接访问url进行测试即可，可以上传图片，获取文本内容等，需要其他配置的自行设置即可。

谢谢。

AngularJS集成富文本编辑器的更多相关文章

  1. yii2集成富文本编辑器redactor

    作者:白狼 出处:http://www.manks.top/article/yii2_redactor本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保 ...

  2. nodejs后台集成富文本编辑器（ueditor）

    1 下载ueditor nodejs版本 2 复制public目录下面的文件 到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹 要复制进来的内容为 4 在根目录的 uedi ...

  3. Xadmin集成富文本编辑器ueditor

    在xadmin中通过自定义插件,实现富文本编辑器,效果如下: 1.首先,pip安装ueditor的Django版本: pip install DjangoUeditor 2.之后需要添加到项目的set ...

  4. django—xadmin中集成富文本编辑器ueditor

    一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...

  5. django后台集成富文本编辑器Tinymce的使用

    富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...

  6. Django使用xadmin集成富文本编辑器Ueditor（方法二）

    一.xadmin的安装与配置1.安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种 方式一:pip install xadmin 方式二:pip install git+g ...

  7. 集成富文本编辑器XSS预防过滤措施

    # https://github.com/phith0n/python-xss-filter import re import copy from html.parser import HTMLPar ...

  8. 关于EasyUI与富文本编辑器结合使用的问题（kindueditor与uueditor）

    最近使用easyui玩玩项目,在结合富文本编辑器时遇到了一些问题,很多人(在网上看到)集成富文本编辑器时常常不能显示, 第一次打开编辑的时候没有问题,但是第二次打开就出错了.为此我进行了一些调试研究. ...

  9. 「newbee-mall新蜂商城开源啦」 页面优化，最新版 wangEditor 富文本编辑器整合案例

    大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...

随机推荐

  1. CocoaPods使用专题 by h.l

    cocoaPods安装 CocoaPods安装和使用教程(code4app) cocoapods使用问题解决 cocoapods慢如何解决? CocoaPods停在Analyzing dependen ...

  2. iOS 七大手势之轻拍，长按，旋转手势识别器方法-赵小波

    一.监听触摸事件的做法 如果想监听一个view上面的触摸事件,之前的做法通常是:先自定义一个view,然后再实现view的touches方法,在方法内部实现具体处理代码 通过touches方法监听vi ...

  3. ElasticSearch 基本介绍和读写搜索过程

    cluster 代表一个集群,集群中有多个节点,其中有一个为主节点,这个主节点是可以通过选举产生的,主从节点是对于集群内部来说的.es的一个概念就是去中心化,字面上理解就是无中心节点,这是对于集群外部 ...

  4. 使用Docker安装ElasticSearch和可视化界面Kibana【图文教学】

    一.前言 Elasticsearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java语言开发的,并 ...

  5. 一招教你IDEA中Java程序如何打包，以及打包后如何运行

    前言 编写程序 程序打包 测试运行 IDEA作为目前按最主流的Java程序项目编写工具,越来越受到开发人员的青睐.idea因为其五花八门的功能,让你在开发过程中效率显著提高.那么对于初学者来说,如何通 ...

  6. 简述CGI与FASTCGI区别

    CGI和FASTCGI都是服务器端与客户端进行交互的常见方式. CGI处理客户端请求,会生成一个子进程来专门调用外部程序来处理客户端请求,处理完成,子进程会随之关闭 FAST处理客户端请求时.服务器端 ...

  7. [源码解析] 模型并行分布式训练Megatron (5) --Pipedream Flush

    [源码解析] 模型并行分布式训练Megatron (5) --Pipedream Flush 目录 [源码解析] 模型并行分布式训练Megatron (5) --Pipedream Flush 0x0 ...

  8. pytest(7)-yield与终结函数

    通过上一篇文章,我们已经知道了pytest中,可以使用Fixture来完成运行测试用例之前的一些操作如连接数据库,以及测试执行之后自动去做一些善后工作如清空脏数据.关闭数据库连接等. 我们已经学会了f ...

  9. 从 MMU 看内存管理

    在计算机早期的时候,计算机是无法将大于内存大小的应用装入内存的,因为计算机读写应用数据是直接通过总线来对内存进行直接操作的,对于写操作来说,计算机会直接将地址写入内存:对于读操作来说,计算机会直接读取 ...

  10. 阿里云服务器ECS挂载数据盘—linux系统

    参考阿里云官网帮助文档:https://help.aliyun.com/document_detail/25426.html 里面有些步骤说的不是很清楚,初学者可能操作时会遇到问题.通过这篇文档进行进 ...