AngularJS集成富文本编辑器
最近在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集成富文本编辑器的更多相关文章
- yii2集成富文本编辑器redactor
作者:白狼 出处:http://www.manks.top/article/yii2_redactor本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保 ...
- nodejs后台集成富文本编辑器（ueditor）
1 下载ueditor nodejs版本 2 复制public目录下面的文件 到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹 要复制进来的内容为 4 在根目录的 uedi ...
- Xadmin集成富文本编辑器ueditor
在xadmin中通过自定义插件,实现富文本编辑器,效果如下: 1.首先,pip安装ueditor的Django版本: pip install DjangoUeditor 2.之后需要添加到项目的set ...
- django—xadmin中集成富文本编辑器ueditor
一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...
- django后台集成富文本编辑器Tinymce的使用
富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...
- Django使用xadmin集成富文本编辑器Ueditor（方法二）
一.xadmin的安装与配置1.安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种 方式一:pip install xadmin 方式二:pip install git+g ...
- 集成富文本编辑器XSS预防过滤措施
# https://github.com/phith0n/python-xss-filter import re import copy from html.parser import HTMLPar ...
- 关于EasyUI与富文本编辑器结合使用的问题（kindueditor与uueditor）
最近使用easyui玩玩项目,在结合富文本编辑器时遇到了一些问题,很多人(在网上看到)集成富文本编辑器时常常不能显示, 第一次打开编辑的时候没有问题,但是第二次打开就出错了.为此我进行了一些调试研究. ...
- 「newbee-mall新蜂商城开源啦」 页面优化，最新版 wangEditor 富文本编辑器整合案例
大家比较关心的新蜂商城 Vue3 版本目前已经开发了大部分内容,相信很快就能够开源出来让大家尝鲜了,先让大家看看当前的开发进度: 开源仓库地址为 https://github.com/newbee-l ...
随机推荐
- Java泛型T与？
感谢大佬:http://m.mamicode.com/info-detail-2657551.html 一.区别 单独的T 代表一个类型 ,而 Class<T>代表这个类型所对应的类, C ...
- 用Java开发局域网内文件传输软件遇到的一些问题
项目地址:https://github.com/b84955189/FileTransfer 由于巨懒的我不太喜欢使用U盘操作文件,特此开发一个简易的文件传输程序. 目前仅限局域网内传输,后期会尝试写 ...
- ORA-22922:nonexistent LOB value问题及listagg()函数
1 现象及错误信息 在执行一次查询的过程,Oracle出现ORA-22922:nonexistent LOB value 的错误:根据提示,是在查询时没有找到lob对象: 2 问题分析 查看SQL,发 ...
- shell脚本命令（sotr/unip/tr/cut/eval）与正则表达式
shell脚本命令(sotr/unip/tr/cut/eval)与正则表达式 1.sort命令 概述: Linux sort命令用于将文本文件内容加以排序. sort命令可针对文本文件的内容,以行为单 ...
- Web集群调度器-Haproxy
Web集群调度器-Haproxy 目录 Web集群调度器-Haproxy 一.Web集群调度器 1.常用的Web集群调度器 2. Haproxy应用分析 3. Haproxy的主要特性 4. 常用集群 ...
- 取代 Mybatis Generator，这款代码生成神器配置更简单，开发效率更高！
作为一名 Java 后端开发,日常工作中免不了要生成数据库表对应的持久化对象 PO,操作数据库的接口 DAO,以及 CRUD 的 XML,也就是 mapper. Mybatis Generator 是 ...
- Solution -「国家集训队」「洛谷 P4451」整数的 lqp 拆分
\(\mathcal{Description}\) Link. 求 \[\sum_{m>0\\a_{1..m}>0\\a_1+\cdots+a_m=n}\prod_{i=1}^mf ...
- DevOpts 前端开发和 Spug
DevOpts 前端开发和 Spug 朋友新工作是进行 DevOpts 前端开发,涉及 Spug. DevOps 是什么 DevOps 是一种思想.用于促进开发和运维之间的沟通.协作或整合. Tip: ...
- 『无为则无心』Python基础 — 61、Python中的迭代器
目录 1.迭代的概念 2.迭代器的概念 3.可迭代的对象(Iterable) 4.迭代器对象(Iterator) 5.迭代器的使用体验 (1)基本用法 (2)实际应用 1.迭代的概念 (1)什么是迭代 ...
- 大数据BI系统搭建对企业经营的作用有哪些
随着数据化时代的到来,企业为了适应高速发展的业务.维持自身更好的发展,纷纷开始寻求适合自身企业发展的BI系统.为什么BI系统会受到企业如此的青睐?BI系统对企业经营究竟有哪些方面的作用呢? 下面,小编 ...