ueditor编辑器使用总结
一、简介
ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/
完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html
为了方便开发学习,我们下载它的完整版和.net版。
ueditor_release_ueditor1_4_3_1-src.zip
ueditor_release_ueditor1_4_3_1-gbk-net.zip
二、如何引入ueditor编辑器
下载包的index.html是编辑器示例,主要几处代码如下:
<head>
……
<!--编辑器基本配置-->
<script type="text/javascript" charset="gbk" src="ueditor.config.js"></ script>
<!--编辑器完整代码-->
<script type="text/javascript" charset="gbk" src="ueditor.all.js"> </script >
……
</head>
<body>
<div>
<script id="editor" type="text/plain"></ script>
</div>
<script type="text/javascript">
//实例化编辑器
var ue = UE.getEditor( 'editor', {
autoHeightEnabled: true,
autoFloatEnabled: true,
initialFrameWidth: 690,
initialFrameHeight:483
});
</script>
三、如何调整ueditor工具栏
ueditor功能强大,但是有些功能我们是用不到的,可以在ueditor.config.js中配置。搜索"toolbars"找到工具栏配置项,删掉不必要的功能就可以了。
,toolbars: [[
'undo', 'redo' , '|',
'bold', 'forecolor' , 'removeformat', 'autotypeset', 'pasteplain' , '|', '|',
'justifyleft', 'justifycenter' , '|',
'link', 'unlink' , '|',
'insertimage', 'insertvideo' , '|',
'wordimage', '|' ,
'inserttable', 'insertrow' , 'deleterow', 'insertcol', 'deletecol' , 'mergecells', 'splittocells', '|' , 'mybtn1','mydialog1'
]]
四、如何修改ueditor默认样式
如果想修改编辑器默认的字体等,可以找打开ueditor.all.js,搜索editor.js中的"render:"方法,修改以下部分:
var html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
'<html xmlns=\'http://www.w3.org/1999/xhtml\' class=\'view\' ><head>' +
'<style type=\'text/css\'>' +
//设置四周的留边
'.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\n' +
//设置默认字体和字号
//font-family不能呢随便改,在safari下fillchar会有解析问题
'body{margin:8px;font-family:sans-serif;font-size:16px;}' +
//设置段落间距
'p{margin:5px 0;}</style>' +
( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml(options.iframeCssUrl) + '\'/>' : '' ) +
(options.initialStyle ? '<style>' + options.initialStyle + '</style>' : '') +
'</head><body class=\'view\' ></body>' +
'<script type=\'text/javascript\' ' + (ie ? 'defer=\'defer\'' : '' ) +' id=\'_initialScript\'>' +
'setTimeout(function(){editor = window.parent.UE.instants[\'ueditorInstant' + me.uid + '\'];editor._setup(document);},0);' +
'var _tmpScript = document.getElementById(\'_initialScript\');_tmpScript.parentNode.removeChild(_tmpScript);</script></html>';
五、ueditor上传图片插入正文后如何默认居中
修改\dialogs\image\image.js文件的initAlign()和setAlign方法。
六、ueditor如何自定义工具栏按钮
如果现有的功能不能满足需求,我们想在工具栏上新增一个自定义按钮,该如何实现呢?
1.首先修改ueditor.config.js,为toolbars添加'mybtn1';
,toolbars: [[
'undo', 'redo' , '|',
'bold', 'forecolor' , 'removeformat', 'autotypeset', 'pasteplain' , '|', '|',
'justifyleft', 'justifycenter' , '|',
'link', 'unlink' , '|',
'insertimage', 'insertvideo' , '|',
'wordimage', '|' ,
'inserttable', 'insertrow' , 'deleterow', 'insertcol', 'deletecol' , 'mergecells', 'splittocells', '|' , 'mybtn1'
]]
2.然后修改ueditor.all.js,找到变量btnCmds,添加'mybtn1';
var btnCmds = ['undo' , 'redo', 'formatmatch',
'bold', 'italic' , 'underline', 'fontborder', 'touppercase' , 'tolowercase',
'strikethrough', 'subscript' , 'superscript', 'source', 'indent' , 'outdent',
'blockquote', 'pasteplain' , 'pagebreak',
'selectall', 'print' ,'horizontal', 'removeformat', 'time' , 'date', 'unlink',
'insertparagraphbeforetable', 'insertrow' , 'insertcol', 'mergeright', 'mergedown' , 'deleterow',
'deletecol', 'splittorows' , 'splittocols', 'splittocells', 'mergecells' , 'deletetable', 'drafts', 'mybtn1' ];
3.最后在ueditor.all.js,新增mybtn1命令执行的代码:
UE.commands['mybtn1'] = {
execCommand: function (cmdName, align) {
var range = this .selection.getRange();
this.execCommand('inserthtml' , '<p>click mybtn1</p>');
return true ;
}
};
这样就完成了对工具栏功能的扩展。
七 ueditor如何自动抓取远程图片
如果想实现粘贴网页时,直接将其中的图片上传到自己的图片服务器,该怎么做呢?这其中主要用到的js是plugins/catchremoteimage.js。
首先设置编辑器选项:catchRemoteImageEnable:true。这样便开启了自动抓取图片的功能。
如果想自定义图片上传方式,而不用ueditor默认的图片上传地址,那么需要修改catchremoteimage.js这里:
把这里的url改成自定义的ashx文件地址即可。
八 ueditor上传图片窗口,如何实现选择图片后自动上传
上传图片窗口操作需要先选择图片,点击“开始上传”,然后插入图片。操作过程略显繁琐,其实可以去掉“开始上传”,在选中图片后自动上传。
首先找到dialogs/image/image.html,隐藏image.html的“开始上传”按钮。
然后修改dialogs/image/image.js文件,找到addFile方法,然后在方法结尾添加以下代码:
function addFile(file) {
……
//自动上传
clickUpload = function () {
$upload.click();
}
setTimeout("clickUpload()", 200);
}
代码示例:https://github.com/cathychen00/ueditor1
作者:陈敬(Cathy)
出处:http://www.cnblogs.com/janes/p/5072496.html
博客文章仅供交流学习,请勿用于商业用途。如需转载,请务必注明出处。
转载于:https://www.cnblogs.com/summary-2017/p/7203183.html
ueditor编辑器使用总结相关推荐
- ueditor html显示图片,百度ueditor编辑器上传图片后img标签的title、alt属性优化简单方法...
<百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法>要点: 本文介绍了百度ueditor编辑器上传图片后img标签的title.alt属性优化简单方法,希望 ...
- 在YII2框架中使用UEditor编辑器发布文章
在YII2框架中使用UEditor编辑器发布文章 创建文章数据表 文章数据表主要有4个字段 id 主键(int) title 标题(varchar) content 内容(text) created ...
- ueditor集成实例php,Laravel框架集成UEditor编辑器的方法图文与实例详解
本文实例讲述了Laravel框架集成UEditor编辑器的方法.分享给大家供大家参考,具体如下: 一. 背景 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 ...
- 百度UEditor编辑器关闭抓取远程图片功能(默认开启)
2019独角兽企业重金招聘Python工程师标准>>> 这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白 ...
- 在ueditor编辑器的光标停留处插入内容
业务场景: 首先在ueditor编辑器中插入一段文本,然后我想在文本的某个位置(光标停留处)插入一个字符串,这个字符串是从页面的其他地方选择得来的. 注意,当我们点击ueditor编辑器以外的地方,编 ...
- 开发中使用UEditor编辑器的注意事项
最近在一个刚结束的一个项目中使用到了UEditor编辑器,下面总结一下遇到的问题以及使用时需要注意的地方: 1. 使用UEditor插件需要先对其进行路径配置: 在ueditor.config.js文 ...
- html编辑器 br 被div,百度Ueditor编辑器DIV,html标签替换及代码被过滤问题解决方法...
解决"织梦DEDECMS使用百度Ueditor编辑器和代码高亮设置教程"中遗留的html标签过滤问题.前者资源盒子主要描述了如何在织梦CMS中使用百度Ueditor编辑器,但遗留了 ...
- 织梦html编辑器功能在哪,织梦dede自带编辑器替换百度ueditor编辑器
用过dedecms的朋友都知道dede自带的文本编辑器很不好用,且有些功能还需要我们自己手动去修改源码,才能完成我们想要的效果.现在广大用dedecms的朋友们,你们有福啦!我们可以利用百度的Uedi ...
- 百度ueditor编辑器注入漏洞修补查杀程序
百度ueditor编辑器注入查杀程序,用于对百度ueditor的漏洞补丁进行查杀,使用时需要保证本地正确部署了.net 4.0服务. 百度ueditor编辑器是目前网上比较流行的一个网站编辑器,但由于 ...
- ueditor 编辑html文件名,UEditor编辑器自定义上传图片或文件路径的修改方法,ueditor修改方法...
UEditor编辑器自定义上传图片或文件路径的修改方法,ueditor修改方法 使用ueditor编辑器,附件默认在ueditor/php/upload/, 我的附件地址是网站根目录下/data/u ...
最新文章
- 31 元素滚动scroll系列
- 岗位推荐 | 蚂蚁金服招聘机器学习、自然语言处理算法工程师
- boost::contract模块实现简单queue的测试程序
- python提取html表格_想知道世界谁最有钱?3行Python代码告诉你
- Java实现复数Complex的加减乘除运算、取模、求幅角角度
- pyinotify结合ftplib自动上传新建的文件
- 只安装和配置instantclient,用plsql developer,navicat for oracle,sqlplus连接oracle数据库 ....
- NB企业级微服务框架
- 又一任务被Transformer攻陷!NVIDIA开源HORST,用Transformer解决早期动作识别和动作预期任务...
- 【带着canvas去流浪(14)】Three.js中凹浮雕模型的生成方式
- 强迫症设计师最爱的对称构图,促销模板
- [DFA|有限状态机] leetcode 8 字符串转换整数(atoi)
- 表单设置 disabled 后无法传值到后台的解决办法
- 淘宝小程序开发demo下载
- android高效模拟器,51模拟器
- 2021机器学习面试必考面试题汇总(附答案详解)
- 关于字体的px和pt
- Enter的使用计算机,电脑键盘上enter为什么叫回车键
- 对于LabVIEW操作者框架的理解
- 一篇文章,只用看三遍,终生不忘网络分层