使用UEditor
在http://ueditor.baidu.com/website/上下载官方文件
文本编辑器的配置文件在ueditor.config.js
需要注意一下几点
首先
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
这里是获取文件的基本安装目录,如果将代码放在服务器上时,发现无法加载下来,可以直接将替换这个地址
替换如下
window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
还有修改工具栏的功能选项
, toolbars:[
['fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'help', 'drafts']
]
这里的功能繁多,可以根据自己的需要修改
有时候我们根据不同的页面,需要的功能不一样,也可以在页面初始化的时候,对这个进行修改
var editor = new baidu.editor.ui.Editor({initialFrameHeight:320,toolbars:[
['fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'help', 'drafts']
]});
editor.render('editor');
工具栏的配置向对应的功能
分组 |
全屏 FullScreen
源代码 Source
撤销 Undo
重做
Redo
加粗 Bold
斜体 Italic
Border
上标 Superscript
下标 Subscript
清除格式
RemoveFormat
引用 BlockQuote
纯文本粘贴模式 PastePlain
文字颜色 ForeColor
背景颜**ackColor
有序列表 InsertOrderedList
无序列表 InsertUnorderedList
下划线
Underline
格式 Paragraph
字体 FontFamily
字体大小 FontSize
从左读
DirectionalityLtr
从右读 DirectionalityRtl
左对齐 JustifyLeft
居中对齐
JustifyCenter
右对齐 JustifyRight
两端对齐 JustifyJustify
添加外连 Link
清除外连
Unlink
添加图片 Image
特殊字符 Spechars
添加表情 Emoticon
添加视频 Video
添加地图
Map
分割线 Horizontal
添加日期 Date
添加时间 Time
删除表格 InsertTable
删除表格
DeleteTable
向表格前插入行 InsertParagraphBeforeTable
向前插入行 InsertRow
删除行
DeleteRow
向前插入列 InsertCol
删除列 DeleteCol
合并多个单元格 MergeCells
向右合并单元格
MergeRight
向下合并单元格 MergeDown
完全拆分单元格 SplittoCells
拆分成行
SplittoRows
拆分成列 SplittoCols
全选 SelectAll
清空文档 ClearDoc
替换查询
SearchReplace
打印 Print
预览 Preview
帮助 Help
使用UEditor的更多相关文章
- 在ASP.NET Core中使用百度在线编辑器UEditor
在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
- 关于百度编辑器UEditor的一点说明
大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径 2.首先要把这个路径配置好了.才能正常的显示, ...
- UEditor编辑器使用示例
1. UEditor下载 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 下载链接:http ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用
系列目录 目录: 前言 开发环境 知识点 初始使用 自定义工具栏 设置和读取编辑器内容 文件上传 ueditor加水印 ---------------------------------------- ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案
问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElemen ...
- 百度编辑器UEditor与UEditor 公式插件完整Demo
1.下载UEditor(我的是.net项目) 2.下载UEditor公式插件 3.新建解决方案和项目 4.在浏览器中预览index.html页面 结果: 5.index.html源码 <!DOC ...
- Ueditor上传图片后自定义样式类名
Ueditor是百度的一个富文本插件,如果使用者会前端语言的话,那适用性就很好,特别是现在移动端纵横的情况.但往往使用者并不懂编程,要让他们使用前端语言的话是不可能的,这就需要我们在开发时就定义好整个 ...
- easyui与ueditor合用问题
在联合使用easyui与ueditor的时候,当在dialog中通过href打开一个页面,页面中含有ueditor,如果使用dialog的close方法,可以理解为只是将dialog给隐藏了,再将点击 ...
随机推荐
- Codeforces 335B Palindrome
http://codeforces.com/contest/335/problem/B 题意: 给定一个长度不超过5*10^4的只包含小写字母的字符串,要求你求它的回文子序列,如果存在长度为100的 ...
- qtpanel
https://github.com/MadFishTheOne/qtpanel https://github.com/xiangzhai/qtpanel
- 为MVC 添加下载权限
今天碰到一个错误,极其郁闷,本地开发和本地部署测试没有问题,但是放到阿里云上,出现了权限问题. 报错:ASP.NET 无权访问所请求的资源.请考虑对 ASP.NET 请求标识授予. 参考网上很多资料, ...
- wan口mac=lan口mac加一,wlan是lan口mac加二
(1)路由器有两个mac地址,一个用于外网(wan),一个用于内网(wlan和lan): (2)一般路由器上面或者配置路由器的网页上面只标注外网的mac地址: (3)内网的mac地址和外网mac地址一 ...
- cf443B Kolya and Tandem Repeat
B. Kolya and Tandem Repeat time limit per test 2 seconds memory limit per test 256 megabytes input s ...
- Struts2简单例子
Struts实现注册功能 ControlFilter.java package com.jikexueyuan.filter; import java.io.IOException; import j ...
- python标准库之字符编码详解
codesc官方地址:https://docs.python.org/2/library/codecs.html 相关帮助:http://www.cnblogs.com/huxi/archive/20 ...
- wex5添加视频播放
我使用的播放器是ckplayer http://www.ckplayer.com/ ckplayer存放路,项目路径下: 方法一: 在monitor.w里加一个div标签 <div id=&qu ...
- ZigBee心电传输(二)
不管怎样,还是在高手的帮助下完成了前面的硬件部分,现在进行ZigBee的心电AD采集和转换.需要把ZigBee重新拾起来. 首先明确下目标和思路吧,目标是将模拟心电信号通过AD转换,变为数字信号,再用 ...
- HADOOP集群监控工具AMBARI
HADOOP集群监控工具AMBARI安装 Apache Ambari是对Hadoop进行监控.管理和生命周期管理的开源项目.它也是一个为Hortonworks数据平台选择管理组建的项目.Ambari向 ...