最近在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. 浮动float、浮动影响和清除浮动

    普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆放到合适的位置? CSS ...

  2. 【收藏】Supervisor的作用与配置

    原文链接:https://www.jianshu.com/p/0226b7c59ae2 supervisor supervisor管理进程,是通过fork/exec的方式将这些被管理的进程当作supe ...

  3. UITextFIeld的输入格式问题 ----W.P

    ---恢复内容开始--- 1.银行卡的输入格式,四个数字,一个空格. 2.金额的输入格式限制,不能以"."开头,"."后精确两位. 注意:第三方输入软件(百度, ...

  4. day1 -- Python变量、注释、格式化输出字符串、input、if、while、for

    1.python变量 不需要声明类型,直接 变量名 = 变量值,如 : name = "hahaha" 2.注释: 单行注释,前面加 #,如  # print(info) 多行注释 ...

  5. Solution -「POJ 3710」Christmas Game

    \(\mathcal{Decription}\)   Link.   定义一棵圣诞树: 是仙人掌. 不存在两个同一环上的点,度数均 \(\ge 3\).   给出 \(n\) 棵互不相关的圣诞树,双人 ...

  6. 你所不知道的 C# 10新特性

    我们很高兴地宣布 C# 10 作为 .NET 6 和 Visual Studio 2022 的一部分已经发布了.在这篇文章中,我们将介绍 C# 10 的许多新功能,这些功能使您的代码更漂亮.更具表现力 ...

  7. [自动化]ansible-系统安全加固整改

    基线漏洞安全整改 修复环境:centos7及以上 安全基线的概念 安全基线是一个信息系统的最小安全保证,即该信息系统最基本需要满足的安全要求.信息 系统安全往往需要在安全付出成本与所能够承受的安全风险 ...

  8. CobaltStrike逆向学习系列(4)：Beacon 上线协议分析

    这是[信安成长计划]的第 4 篇文章 关注微信公众号[信安成长计划] 0x00 目录 0x01 Beacon 发送 0x02 TeamServer 处理 0x03 流程图 0x04 参考文章 在上一篇 ...

  9. centos7挂载U盘，查看U盘文件

    .在根目录下创建挂载的目录:mkdir mnt/usb 2.查看U盘在系统中的命称:fdisk -l 3.使用mount命令挂载U盘:mount /dev/sdb1 mnt/usb,一半就是第一个 但 ...

  10. 详解用OpenCV绘制各类几何图形

    摘要:本文详细介绍了OpenCV绘制几何图形的方法,利用cv2.line().v2.circle().cv2.rectangle().cv2.ellipse().cv2.polylines().cv2 ...