在配合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富文本编辑器的更多相关文章

  1. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

  2. 百度ueditor富文本编辑器的使用

    百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...

  3. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  4. ASP.NET MVC5 中百度ueditor富文本编辑器的使用

    随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...

  5. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  6. ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议

    ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...

  7. WEB项目中使用UEditor(富文本编辑器)

    Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...

  8. UEditor富文本编辑器简单使用

    UEditor富文本编辑器简单使用 一.下载地址:https://ueditor.baidu.com/website/ 官网中并没有 python 版本的 UEditor 富文本编辑器,本文简单介绍 ...

  9. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  10. PHP Ueditor 富文本编辑器

    2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...

随机推荐

  1. Jackson将json string转为Object,org.json读取json数组

    从json文件读取json string或者自定义json string,将其转为object.下面采用的object为map,根据map读取json的某个数据,可以读取第一级的数据name,后来发现 ...

  2. CCF-201312-3-最大的矩形

    问题描述 试题编号: 201312-3 试题名称: 最大的矩形 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ ...

  3. Python-01 学习第一节

    python是一种解释型.面向对象.动态数据类型的高级程序设计语言. 执行Python程序: 对于大多数程序语言,第一个入门编程代码便是"Hello World!",以下代码为使用 ...

  4. WebStorm10 控制台中文乱码解决方案

    工作时发现无论是使用ctrl+F搜索还是查看提交的注释中文都是口,看的本小白十分蛋疼菊紧,所以抽时间找了方法去搞定它. 首先点击左上角的File,选择Setting 然后选择Appearance &a ...

  5. VSCode jQuery代码提示

    在VSCode中,ctrl+`打开终端: 运行命令: npm install @types/jquery --save 最后在项目中会生成: 说明安装成功! 详情可参见:链接

  6. (二)—Linux远程连接与常用命令

    要学linux ,一定得用命令界面的,怎么也得是shell语言,用就最难最原始的,用的人都是专家,历史最少也得30年,不管有三七二十一上来就敲ls ,先看看当前目录都有什么.一口专业的linux范儿, ...

  7. 如何用shell脚本取出服务器图片

    一 ,SHELL 是什么 (1)shell是一种命令行解释器. (2)是用户和Linux内核之间沟通的桥梁,属于中间件.见下图 (3)交互流程:shell接受用户输入的指令 =>将指令传达给Li ...

  8. 【quickhybrid】H5和Native交互原理

    前言 Hybrid架构的核心就是JSBridge交互,而实现这个交互的前提是弄清楚H5和Native端的交互 本文主要介绍Native端(Android/iOS)和H5端(泛指前端)的交互原理 (之前 ...

  9. [每天一个Linux小技巧] 强制让内核按单核模式启动

    在启动參数里追加 nosmp nosmp的说明例如以下: nosmp [SMP] Tells an SMP kernel to act as a UP kernel, and disable the ...

  10. 命令行界面下使用emca安装配置Oracle Database Control实战

    作为命令行忠有用户,server端软件的运维都倾向于使用命令或 脚本完毕,非常讨厌资源占用非常大的GUI.Oracle数据库作为重要的server端软件.其安装运维自然也全然支持纯命令行方式.虽然同一 ...