富文本编辑器Ueditor实战(一)

简介: 本文简单说明如何在tomcat中部署ueditor,并举例介绍了他的api以及相关工具栏,用户可以根据需要进行调整。

本文简单介绍Ueditor富文本编辑器的简单部署。在如今越来越丰富的富页面体验中,我们不仅仅满足于简单文本的编辑和展示。而可以由用户自定义的交互式制作模式,将极大的提高页面的交互性和灵活性,满足用户制作需求。世面上开源的富文本编辑器有很多,比如Ueditor、Kingeditor、markdown等等,本文重点将介绍Ueditor的简单部署用,其它产品可以参考其官方介绍。

一、相关软件说明

1、ueditor1_4_3_3-utf8-jsp

2、JDK1.8+

3、pache tomcat 8.5

二、ueditor下载地址

1、官方地址:http://fex.baidu.com/

2、发布版下载地址:https://github.com/fex-team/ueditor/releases

image.png

本文以jsp手动部署模式为例,下载utf8编码格式的jsp版本即可

三、将下载的压缩包解压到tomcat下的webapps目录下

如下图:

image.png

四、进入tomcat的bin目录,启动tomcat。

在地址栏中输入如下地址:http://localhost:8080/ueditor1_4_3_3-utf8-jsp/index.html,看到如下页面

image.png

看到以上界面说明静态手动部署成功(先别急,到此只能说明成功了一半,不信,打开控制台或者上传一张图片试试)。

控制台报错信息如下:

image.png

image.png

以上两个地方都说明,后台部署还是有问题,当有附件上传的功能时,系统不能正常提供服务。如果项目中没有图片、多媒体、附件等资源编辑,您可以忽略以上错误,直接进行集成就可以了(如何解决这些错误以及如何自定义上传将在下次分享)。

五、工具条说明

toolbar官方介绍:http://fex.baidu.com/ueditor/#start-toolbar

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', // 图表    ]
]

 六、编辑器配置说明

详细配置说明可参考:http://fex.baidu.com/ueditor/#start-config,以下为节选参考:

image.png

本文简单说明如何在tomcat中部署ueditor,并举例介绍了他的api以及相关工具栏,用户可以根据需要进行调整。同时在运行时发现了一些问题,计划在下一讲中介绍如何解决这些错误

目录
相关文章
|
6月前
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
567 0
|
JSON 前端开发 JavaScript
富文本编辑器Ueditor实战(三)-springboot集成
通过本文,您可了解springboot如何集成ueditor,如何自定义扩展后端的文件上传功能。
693 0
富文本编辑器Ueditor实战(三)-springboot集成
|
3月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
136 0
|
资源调度 JavaScript
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
vue项目:集成富文本编辑器 - 百度ueditor(vue-ueditor-wrap)
598 0
|
Java 应用服务中间件 对象存储
富文本编辑器Ueditor实战(二)-图片上传
本文重点阐述了如何扩展Ueditor的图片上传功能,以及在实际中,如何根据项目实际情况,设置图片信息的动态展示思路。
852 0
富文本编辑器Ueditor实战(二)-图片上传
|
前端开发
ueditor 百度富文本编辑器后端配置(上传图片)
ueditor 百度富文本编辑器后端配置(上传图片)
461 0
|
前端开发 JavaScript 搜索推荐
前端封装库/工具库的编辑器之UEditor
随着互联网时代的到来,Web应用程序的内容创作和编辑变得越来越重要。而为了更高效地进行内容编辑和管理,前端封装库/工具库的出现成为了一个非常好的解决方案。其中一个经典的编辑器就是UEditor。
137 0
|
开发框架 前端开发 JavaScript
【前端】简单配置使用百度在线文本编辑器UEditor
在本篇文章中,我们讲一起了解下百度在线文本编辑器UEditor的简单配置使用 目前在线编辑器插件网上挺多的,个人觉得UEditor在UI和功能上还是不错的
967 0
|
4月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容