使用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给隐藏了,再将点击 ...
随机推荐
- NGINX的CORS--跨域访问配置
阻止交叉源访问问题. 网上可搜N多,解决办法都差不多,其中一种: add_header Access-Control-Allow-Origin http://xxxx:port; add_header ...
- wan口mac=lan口mac加一,wlan是lan口mac加二
(1)路由器有两个mac地址,一个用于外网(wan),一个用于内网(wlan和lan): (2)一般路由器上面或者配置路由器的网页上面只标注外网的mac地址: (3)内网的mac地址和外网mac地址一 ...
- hdu4085
http://acm.hdu.edu.cn/showproblem.php?pid=4085 斯坦纳树. 用状压DP. 一共有2K个关键点:1,2...,K和N-K+1,N-K+2...,N,我们用一 ...
- cf443A Anton and Letters
A. Anton and Letters time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- ubuntu14.04 + cocos2d-x-2.2.6 + eclipse发布android + Qt Creator4
先把需要的东西准备好,打开控制台,执行以下语句: sudo apt--jdk lib32z1 lib32ncurses5 lib32bz2- 接下来,准备好cocos2d-x-2.2.6和 andro ...
- Object-c学习之路十二(OC的copy)
oc中的拷贝分为:copy(浅拷贝)和mutablecopy(深拷贝). 浅拷贝也为指针拷贝,拷贝后原来的对象计数器会+1: 深拷贝为对象拷贝,原来的对象计数器不变. 注意:自定义对象拷贝时要实现NS ...
- iphone开发 IOS 组织架构图
转载自 :http://blog.csdn.net/mashi321323/article/details/18267719 登录|注册 mashi321323的专栏 目录视图 ...
- LB集群
LB集群 1. LB.LVS介绍LB集群是load balance 集群的简写,翻译成中文就是负载均衡集群LVS是一个实现负载均衡集群的开源软件项目 LVS架构从逻辑上可分为调度层(Directo ...
- 解决System.Data.SQLite兼容32位和64位问题
将当前说明文档的目录下的x64.x86目录和System.Data.SQLite.dll文件复制到您的应用程序根目录中(注意更新引用,引用System.Data.SQLite.dll即可,两目录中的不 ...
- Linux基础知识笔记
1.case的命令格式 #!/bin/sh echo "please input number 1 to 3" read number case $number in ) e ...