最近在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. c语言之sizeof总结+strlen函数

    一.sizeof的概念 Sizeof是C语言的一种单目操作符,如C语言的其他操作符++.–等.它并不是函数.Sizeof操作符以字节形式给出了其操作数的存储大小.操作数可以是一个表达式或括在括号内的类 ...

  2. 优化UITableViewCell高度计算的那些事 by －－胡 xu

    这篇总结你可以读到: UITableView高度计算和估算的机制 不同iOS系统在高度计算上的差异 iOS8 self-sizing cell UITableView+FDTemplateLayout ...

  3. 【密码学工具】Ciphey和WinDecrypto的使用随笔

    1.Ciphey 官方文档 这个工具安装起来也很容易,用pip下载即可. pip install ciphey -i https://pypi.mirrors.ustc.edu.cn/simple/ ...

  4. 基于反熔丝FPGA、QSPI FLASH的高可靠程序存储、启动控制系统

    1      涉及术语解释 1.1     三模冗余 三模冗余系统简称TMR(Triple Modular Redundancy),是最常用的一种容错设计技术．三个模块同时执行相同的操作,以多数相同的 ...

  5. Spring中的属性注入注解

    @Inject使用 JSR330规范实现的 默认按照类型注入 如果需要按照名称注入,@Inject需要和@Name一起使用 @Resource JSR250规范实现的,需要导入不同的包 @Resour ...

  6. Linux目录结构详细

    今日内容 解析映射文件 在 window 和 Linux 系统中都有解析文件,一般名为 host,存放在配置目录 etc 中 在本地机访问网络输入域名时,首先会解析 host 文件,如果域名有对应的i ...

  7. Solution -「LOCAL」大括号树

    \(\mathcal{Description}\)   OurTeam & OurOJ.   给定一棵 \(n\) 个顶点的树,每个顶点标有字符 ( 或 ).将从 \(u\) 到 \(v\) ...

  8. Solution -「CF 757F」Team Rocket Rises Again

    \(\mathcal{Description}\)   link.   给定 \(n\) 个点 \(m\) 条边的无向图和一个源点 \(s\).要求删除一个不同与 \(s\) 的结点 \(u\),使得 ...

  9. Solution -「ARC 104E」Random LIS

    \(\mathcal{Description}\)   Link.   给定整数序列 \(\{a_n\}\),对于整数序列 \(\{b_n\}\),\(b_i\) 在 \([1,a_i]\) 中等概率 ...

  10. 基于myscript.js的web手写板（支持中文识别）

    网上的手写板模板不少,但是支持中文识别的却不多,而且基本上都收费的,毕竟别人的中文库凭什么免费提供给你(说好的开源呢?说好的开源呢? ←_←) 好了,进入主题,myscript.js,在官网其实我并没 ...