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怎么对接到项目中去, 主 ...
随机推荐
- pymysql 模块介绍
pymysql模块是python与mysql进行交互的一个模块. pymysql模块的安装: pymysql模块的用法: import pymysql user=input('user>> ...
- python并发编程之多进程二
一,multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...
- Delphi 7中对StretchBlt, StretchDIBits, DrawDibDraw, BitBlt 的性能测试 - 原创
我的天哪,上一篇博文是2年前的事情了.看来又虚度了2年光阴,继续学习... 本文算是副产品,正品是利用FFmpeg从任意视频中生成GIF片段的小程序,等写完了再发.不为别的,只是为了给儿子做动图,且看 ...
- UWP 用Thumb 控件仿制一个可拖动悬浮 Button
参考了 http://www.cnblogs.com/zhanggaoxing/p/6403430.html,并加以改进. 最终效果::: Thumb 的原生事件 DragStarted,DragDe ...
- 深入常用CSS声明(一) —— Background
一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这些声明的属性和值的时候做到不陌生. 这里 ...
- mac mono Fiddler.exe启动失败
mono version 5.4 fiddler version 4.6 启动fiddler:mono Fiddler.exe 启动报错 WARNING: The Carbon driver has ...
- 实践作业3:白盒测试----我是如何写测试用例DAY6
一开始接到写白盒测试的任务,我感觉挺难的,因为感觉之前我所想到的都是黑盒测试啊,说到测试系统逻辑,感觉就有些神秘的样子没有思路了,那黑盒和白盒写的到底有啥区别.后来我请教了实验室的一个同学,他虽然还没 ...
- java学习笔记之StringBuilder
StringBuilder总结 StringBuilder概述: StringBuilder是一个线程不安全的类,他在字符串连接方面性能尤其出色 StringBuilder类的构造方法: 1.空参数构 ...
- macox下编译snappy静态库
源代码地址:https://github.com/google/snappy 下载 git clone https://github.com/google/snappy 编译 进入snappy源代码文 ...
- libmemcached的安装及測试
1.安装memcached ~$ wget http://memcached.googlecode.com/files/memcached-1.2.8.tar.gz. $ tar xvzf lmemc ...