uEditor富文本编辑器
在配合vue和webpack使用时,在严格模式下注意会报错,需要修改配置。
对UEditor的严格模式报错文件,取消严格模式:
然后就没问题了。
{
"presets": ["vue-app"],
"ignore": [
'./src/assets/uEditor/ueditor.all.js'
]}
常用的方法:
1. 实例化编辑器到id为 container 的 dom 容器上:
var ue = UE.getEditor('container');
2. 设置编辑器内容:
ue.setContent('<p>hello!</p>');
3. 追加编辑器内容:
ue.setContent('<p>new text</p>', true);
4. 获取编辑器html内容:
var html = ue.getContent();
5. 获取纯文本内容:
ue.getContentTxt();
6. 获取保留格式的文本内容:
ue.getPlainTxt();
7. 判断编辑器是否有内容:
ue.hasContents();
8. 让编辑器获得焦点:
ue.focus();
9. 让编辑器失去焦点
ue.blur();
10. 判断编辑器是否获得焦点:
ue.isFocus();
11. 设置当前编辑区域不可编辑:
ue.setDisabled();
12. 设置当前编辑区域可以编辑:
ue.setEnabled();
13. 隐藏编辑器:
ue.setHide();
14. 显示编辑器:
ue.setShow();
15. 清空内容:
ue.execCommand('cleardoc');
16. 读取草稿箱:
ue.execCommand('drafts');
17. 清空草稿箱:
ue.execCommand('clearlocaldata');
配置工具栏:
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
$(function() {
//本来是这样的:UE.getEditor('editor'); 传入参数后就是下面那样子了,toolbars里的就是工具的图标
UE.getEditor('editor', {
toolbar: [
['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',
'underline','fontborder', 'backcolor', 'fontsize', 'fontfamily',
'justifyleft', 'justifyright','justifycenter', 'justifyjustify',
'strikethrough','superscript', 'subscript', 'removeformat',
'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist',
'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help']
]
});
})
</script> 配置项里用竖线 ‘|’ 代表分割线
完整的按钮列表 toolbars: [
[
'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'source', //源代码
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
'gmap', //Google地图
'insertvideo', //视频
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'attachment', //附件
'imagecenter', //居中
'wordimage', //图片转存
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
'scrawl', //涂鸦
'music', //音乐
'inserttable', //插入表格
'drafts', // 从草稿箱加载
'charts', // 图表
]
]
uEditor富文本编辑器的更多相关文章
- MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
- 百度ueditor富文本编辑器的使用
百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...
- 前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
- ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
- PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...
- ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...
- WEB项目中使用UEditor(富文本编辑器)
Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...
- UEditor富文本编辑器简单使用
UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...
- django之百度Ueditor富文本编辑器后台集成
Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...
- PHP Ueditor 富文本编辑器
2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...
随机推荐
- docker学习(一)
docker的安装 (一)环境要求: 容器需要管理工具.runtime 和操作系统,选择如下: 1.管理工具 - Docker Engine 2.runtime - runc 3.操作系统 (二)安装 ...
- caioj 1237: 【最近公共祖先】树上任意两点的距离 在线倍增ST
caioj 1237: [最近公共祖先]树上任意两点的距离 倍增ST 题目链接:http://caioj.cn/problem.php?id=1237 思路: 针对询问次数多的时候,采取倍增求取LCA ...
- php常用面试题
1. 有一列数的规则如下 1.1.2.3.5.8.13.21.34... 求第30位数是多少.写出相关函数和算法名称 //$pxx = array(1,1);//for($i=2;$i<=29; ...
- Python 开发与接口测试学习笔记
这是我跟着虫师学习中积累下来的学习笔记,写得比较简单,适合想学习Python开发与接口测试的初学者学习. 一.开发投票系统 1.参考官网文档,创建投票系统. https://docs.djangopr ...
- tomcat8权限分离
安装jdk tar xf jdk-8u121-linux-x64.tar.gz mv jdk-* /usr/local/jdk1.8 vi /etc/profile export JAVA_HOME ...
- ROC和AUC的区别
ROC是一个曲线,AUC是曲线下面的面积值. ROC曲线是FPR和TPR的点连成的线. 可以从上面的图看到,横轴是FPR, 纵轴是TPR (TPR = TP / (TP + FN):FPR = F ...
- HDU 2298 Toxophily(公式/三分+二分)
Toxophily Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- drupal 开发简单站点流程
友情推广:Uminicmf 一个基于thinkphp开发的OA框架.http://blog.csdn.net/youmypig/article/details/51727713 drupal 简单站点 ...
- recover all files with git
leon@DGLIRUAN2 /F/linux/android/leon/workspace/AngoWidget (master) $ git log commit 2f847e3a858ecb2f ...
- 【Linux探索之旅】第二部分第五课:用户和权限,有权就任性
内容简单介绍 .第二部分第五课:用户和权限,有权就任性 2.第二部分第六课预告:Nano,刚開始学习的人的文本编辑器 用户和权限.有权就任性 今天的标题也挺任性的啊,虽说小编是一个非常本分的人(真的吗 ...