博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
基于jsp的百度Ueditor插件的使用
阅读量:5214 次
发布时间:2019-06-14

本文共 3344 字,大约阅读时间需要 11 分钟。

初次使用百度的富文本编辑器Ueditor,写下使用经验以备不时之需

只是简单的应用,如有错误,请指正

首先去下载编辑器插件

我选择的是开发版Jsp  UTF-8版

这样我们就得到一个ZIP压缩包

解压该压缩包我们会得到utf-8-jsp的文件夹,文件夹的内容包括

在web项目中的webapp文件夹底下新建static/js/ueditor这样的文件结构

文件夹里所有的文件通通拷入ueditor中,我使用的idea集成开发工具,遇到文件dialogs文件拷不进去的情况,那就直接右键ueditor点击Show in Explorer直接拷入文件底下

 

这样准备工作就完成了。

接下来,在需要集成编辑器的jsp页面中导入js文件

导入这几个,文件目录是相对于webapp的

然后在script中写页面优先加载

<script id="editor" type="text/plain" style="width:1024px;height:500px;">编辑内容初始化</script>

将该段代码放入from表单中或你想显示的地方,当然这些操作官网也可以获得

关键是如何通过from表单提交内容,在我的项目中,from表单根本不认识script

我通过隐藏域

 

 将从富文本编辑器中获得内容填充到隐藏域中

这样就完成了富文本编辑器的集成

此外,上传图片的配置在config.json文件下,重点关注imageUrlPrefix和imagePathFormat两个value值,也可以看其他博友写的关于上传图片的博文

 怎样控制富文本编辑器的工具图标?

在实例化富文本编辑器的时候传入想要显示的值即可

可将以下代码复制粘贴,不想用那个功能直接注释

ue_s = UE.getEditor('editor',{toolbars: [[         'fullscreen',//全画面         'source',//源代码         '|',         'undo',//取消         'redo',//还原         '|',         'bold',//黑字体         'italic',//斜字体         'underline',//下划线         'fontborder',//字体边框         'strikethrough',//删除线         'superscript',//上标高度         'subscript',//下标         'removeformat',//清除格式         'formatmatch',//格式刷         'autotypeset',//自动排版         'blockquote',//引用,用来设定一段较长的文字段落 缩进的标签.文本会2端都缩进         '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',//居中         '|',         'simpleupload',//单图上传         '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',//查询替换         'drafts',//从查稿箱加载         'help'//帮助 ]] });

 

转载于:https://www.cnblogs.com/f-bob/p/9511503.html

你可能感兴趣的文章
树莓派安装系统
查看>>
Spring的JdbcTemplate、NamedParameterJdbcTemplate、SimpleJdbcTemplate
查看>>
Mac下使用crontab来实现定时任务
查看>>
303. Range Sum Query - Immutable
查看>>
伪造请求IP
查看>>
解析大型.NET ERP系统 20条数据库设计规范
查看>>
元组关系的演算
查看>>
菜鸟切记
查看>>
Android 虚拟机安装SD卡
查看>>
[leetcode]Dynamic Programming-121. Best Time to Buy and Sell Stock
查看>>
香菱学诗(zhuan)
查看>>
关于easyui combobox下拉框实现多选框的实现
查看>>
[并查集][贪心]Luogu P1525 关押罪犯
查看>>
项目开发日志(其一)
查看>>
ubuntu乌班图安装配置NFS
查看>>
CentOS6.6修改系统盘的默认的LVM卷组VolGroup
查看>>
酷,无极限!3D打印「活」跑鞋研发中,会自行充放气、再生
查看>>
迪杰斯特拉算法---单源点最短路径
查看>>
【python】TCP/IP编程
查看>>
JVM 类型的生命周期学习
查看>>