最近在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. NSArray 与字符串

    1.把数组元素链接成字符串 - (NSString )componentsJoinedByString:(NSString )separator; 这是NSArray的方法, 用separator作拼 ...

  2. Linux下Mysql报错

    报错内容为:[mysql]ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/ ...

  3. Socket和数据库的一些使用---郭雪彬

    最近偶尔有时间,研究了下Socket的使用,虽然不简单,不过还是挺有意思,刚好咱们带头大哥需要我们发檄文,也罢,那就来一篇,废话不多说,直接入正题 struct sockaddr_in server_ ...

  4. checkstyle使用介绍

    1.我下载的是checkstyle-5.5-bin.zip:下载地址 http://sourceforge.net/projects/checkstyle/files/ 另一个是checkstyle的 ...

  5. Shell条件练习题

    Shell条件练习题 目录 Shell条件练习题 1.检查用户家目录中的 test.sh 文件是否存在,并且检查是否有执行权限 2.提示用户输入100米赛跑的秒数,要求判断秒数大于0且小于等于10秒的 ...

  6. windows设备相关位图与设备无关位图

    windows支持两种位图格式,DDB(device-dependent bitmap),DIB(device-independent bitmap).设备相关位图用于windows显示系统中,其图像 ...

  7. Dapp开发petshop——truffle官方例程

    truffle-pet-shop pet-shop是truffle的官方例程. 之前参考https://learnblockchain.cn/2018/01/12/first-dapp/的中文教程,但 ...

  8. Java多线程Thread类了解和使用

    创建线程的两种方式 extends Thread 类 public class WelComeApp { public static void main(String[] args) { Welcom ...

  9. 攻防世界Web_python_template_injection

    题目: 就一句话啥也没有.python 模板注入.刚学菜鸡还不知道python模板有哪些注入漏洞,上网查一下.又学到一个知识点. python常用的web 模板有 Django,Jinja2,Torn ...

  10. 防世界之NaNNaNNaNNaN-Batman

    题目: 只有一个附件,下载解压放到桌面. web应该是个html文件,改下后缀打开看看 发现就一个框和按钮,测试发现也没注入点,应该不是考sql.打开源码查看一下,发现是个js脚本,但是,代码是乱码, ...