最近在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. httpclient方式提交数据到服务器

    get方式: //使用HttpClient请求服务器将用户密码发送服务器验证 try{ String path = "http://192.168.13.83:8080/xuexi/serv ...

  2. ARP协议工作原理

    转载请注明来源:https://www.cnblogs.com/hookjc/ ARP数据包根据接收对象不同,可分为两种:    1. 广播包(Broadcast).广播包目的MAC地址为FF-FF- ...

  3. 基于redis5的redis cluster部署

    一.环境规划 #准备六台主机,地址如下 10.0.0.8 ---> master1 10.0.0.18 ---> master2 10.0.0.28 ---> master3 10. ...

  4. python基础语法_10错误与异常

    Python有两种错误很容易辨认:语法错误和异常. 语法错误 Python 的语法错误或者称之为解析错,是初学者经常碰到的,如下实例 异常 即便Python程序的语法是正确的,在运行它的时候,也有可能 ...

  5. Solution -「UVA 1104」Chips Challenge

    \(\mathcal{Description}\)   Link.   在一个 \(n\times n\) 的方格图中,有一些格子已经放了零件,有一些格子可以放零件,其余格子不能放零件.求至多放多少个 ...

  6. Vue脚手架报错 Component name "Student" should always be multi-word vue/multi-word-component-names

    报错信息分析: 新手在第一个次使用脚手架的时候难免会遇到各种各样奇怪的问题,最近在学习Vue的过程中就出现了如下问题 通过阅读报错信息可知: 是我们的组件名有一些问题,(报错信息翻译过来大概就是组件名 ...

  7. 密码破解工具Brutus

    实验目的 利用brutus将暴力破解ftp密码 实验原理 brutus将多次尝试ftp密码进行密码爆破 实验内容 利用brutus将暴力破解ftp密码 实验环境描述 1. 学生机与实验室网络直连; 2 ...

  8. RFC2544背靠背测试——信而泰Renix测试软件实操

    文章关键词:背靠背测试.合法最小帧间隙.缓存区结构.吞吐量测试. 背靠背测试背景: 随着网络规模的扩大,大量的路由更新消息.频繁的文件传输和数据备份等操作都会导致数据在一段时间内急剧增加,甚至达到该物 ...

  9. 命名空间 namespace

    ​ 命名空间是一块程序员可以自己命名的内存区域,用于解决同名冲突的问题. ​ 举例来说,某班及内有三个张三,分别坐在班级的第一排.第三排和最后一排.当老师喊张三时,三个张三都站起来应答,这就是同名冲突 ...

  10. java变量的初始化之后的默认值

    对于类的成员变量 不管程序有没有显示的初始化,Java  虚拟机都会先自动给它初始化为默认值. 1.整数类型(byte.short.int.long)的基本类型变量的默认值为0. 2.单精度浮点型(f ...