使用百度UEditor 和Websocket 实现手机端实时预览页面编辑效果

最新推荐文章于 2026-05-15 11:01:11 发布
原创 最新推荐文章于 2026-05-15 11:01:11 发布 · 1.3w 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#websocket #idea #ueditor
本文介绍如何使用百度UEditor及Websocket技术实现在手机端实时预览页面编辑效果的方法。主要内容包括：所需开发环境（如JDK1.8、Apache Tomcat 8.5等）、开发工具（Eclipse或IntelliJ IDEA），并强调了需修改IP以便客户端能正确接收即时编辑结果。

使用百度UEditor 和Websocket 实现手机端实时预览页面编辑效果

准备工作
- JDK1.8
- 安装Apache Tomcat 8.5
- Eclipse 或IntelliJ IDEA

下图标注的地方需要改为你自己电脑的IP，不然客户端不能看到即时编辑的结果
这里写图片描述

这里写图片描述

注意
手机端连接后出现如下图所示界面表示连接websocket成功。
这里写图片描述

最终效果

PC端
移动端

代码很简单， 就不贴上来了
点此下载

利用WebSocke+Ueditor实现兼容手机端页面的WEB实时编辑器
11-02
利用WebSocke+Ueditor实现兼容手机端页面的WEB实时编辑器 页面也简陋， 主要是提供一个思路。
百度富文本编辑器手机端预览插件开发
qq_40194668的博客
02-24 2401
在百度富文本编辑器编辑的时候担心在手机端打开格式乱掉，编辑提交再去手机端刷新查看比较麻烦，希望在编辑器可以直接查看，效果如下： 代码修改如下： 文件一、路径：ueditor\themes\default\css\ueditor.css 找到文件，在最下面加上如下代码： /*手机预览样式*/ .edui-default .edui-for-previewmobile.edui-icon{ background-image:url("../images/previewMobile...
百度编辑器ueditor自适应手机端
笔记
01-11 4192
找个几个方法要么没效果，要么不合适。 我的目录：\public\vendor\ueditor\ueditor.all.js function callback(){ try{ var link, json, loader, body = (ifr...
【VUE】16、使用 wangEditor 富文本编辑器
最新发布
Asurplus
05-15 8561
wangEditor 是一款基于 JavaScript 开发的 Web 富文本编辑器，以其开箱即用、配置简单的特点深受开发者喜爱。目前最新版本为 V5，相比之前的版本，V5 进行了彻底的重构，功能更强大，使用更灵活。
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
苦夏木禾
07-20 2677
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个
直到世界的尽头
08-08 1万+
我们在之前的文章中已经做过富文本插件的调研。富文本插件Ueditor是百度推出的一款开源在线 HTML 编辑器。http://fex-team.github.io/ueditor/比较好用，我们本章详细记录它的应用过程，以及在不同场景下的具体配置。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 ueditor用法。应用bootstrap
UEditor适配移动端
hq.zheng的博客
03-06 5202
一.全局内容设置 使用getContent()接口，获取编辑器里的内容的HTML文档，用下面的格式去包裹，可以得到一个内容居中，屏幕两边留有一定边距，禁用缩放的页面 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/...
ueditor编辑器手机端的粘贴复制无法实现图片复制缘由
lin18824161857的博客
12-10 1363
ueditor编辑器手机端的粘贴复制无法实现图片复制，然而用输入法的却可以，后来又发现其实不管用不用输入法的粘贴复制，都可以实现复制。但是有一个应该注意的地方，就是css3有个属性，user-select可以精致界面复制粘贴 https://www.css88.com/book/css/properties/user-interface/user-select.htm 这是手册，然后点用户界面...
【亲测免费】 推荐一款高效HTML预览工具：Ueditor-Preview-HTML
gitblog_00078的博客
04-01 1590
推荐一款高效HTML预览工具：Ueditor-Preview-HTML 在这个数字化的时代，无论是开发者还是内容创作者，对文本编辑和预览的需求日益增强。今天，我将向大家推荐一个开源项目——，它是一个轻量级但功能强大的HTML预览插件，旨在提升你的工作效率。 项目简介 Ueditor-Preview-HTML是由开发者Hauk0101创建的，它可以无缝集成到富文本编辑器Ueditor中，提供实时的H...
ueeditor添加手机预览
wanlichang200的博客
09-13 2881
1 ueditor.config.js 修改toolbars 添加需要的按钮如 prephone 2zh-cn.js 找到labmap添加 悬浮时中文显示 如'prephone':'手机预览' 3 ueditor.all.js 找打var btnCmds 添加 'prephone' 在其中添加点击事件 如 UE.commands['prephone'] = { execC
ueditor 进行html预览,使用ueditor进行页面预览和打印
weixin_39732825的博客
07-11 1500
UEditor文档官网下载 UEditor打印的方式有很多，这里其实注重于训练如何使用ueditor。把编辑器的状态栏和工具栏全部隐藏，仅仅让其作为一个现实的工具，然后调用其打印方法进行打印。下载压缩包ueditor-dev-1.5.0.zip，解压后_examples就是示例页面，在该文件夹下新建一个html名为printDemo.html代码如下：HTMLPUBLIC"-//W3C//DT...
ASP.NET MVC 使用百度富文本编辑器 ueditor 预览
weixin_44632474的博客
05-31 568
这两天在用富文本编辑器 ueditor 时，想把 demo 中，点击放大镜后的预览页面拿出来，单独展示，之前不太会，网上找了一圈也没看到我想要的信息，都是废话。最终的预览效果就和编辑器中的一毛一样了，比如表格、代码格式等，效果就都有了。ASP.NET MVC 预览，页面代码 Content 是富文本内容。如果不用uParse，直接展示的话，效果如下（代码块等也不会渲染）欢迎大家互相交流，如果还有别的好办法，请多指教，在此感激不尽！是项目中 ueditor 包所在路径，以我的项目为例。研究一波，记录一下。
百度富文本编辑器UEditor功能介绍以及提交预览
weixin_33882443的博客
12-01 1027
2019独角兽企业重金招聘Python工程师标准>>> ...
UEditor生成适配移动端的HTML
热门推荐
来啊 快活啊
09-23 2万+
使用getContent()接口，获取编辑器里的内容的HTML文档，用下面的格式去包裹，可以得到一个内容居中，屏幕两边留有一定边距，禁用缩放的页面，这个页面在移动端已经比较好看了：
[笔记]百度UEditor_解决图片在手机端的自适应问题
独禅的司令
02-21 7844
问题: 手机端展示的图片超出屏幕 解决方法: 在页面引入 {ueditor_home}/ueditor.all.js 找到以下内容并添加红色部分 function callback(){ try{ var link, json, loader, body = (iframe.contentDocument || iframe.contentW...
百度UEDITOR编辑器可以如何直接复制WORD的图文内容到编辑器中?
weixin_52050572的博客
11-21 1470
编辑器：百度ueditor前端：vue2,vue3,vue-cli,html5需求：复制粘贴word内容图片，word图片转存交互,导入pdf,导入PowerPoint(PPT)要求：开源，免费，技术支持用户体验：Ctrl+V快捷键操作今天早上又有网友加我微信私聊，说是想了解一下这块的技术和方案。实际我的微信号之前就已经在网上公开了，但是很多网友还是说找不到，这个可真有点难度了。
优化百度ueditor编辑器，增加秀米插件、手机端预览等功能，与egg-ueditor完美结合
江下飞雪
12-25 7337
ueditor 优化百度ueditor编辑器，增加秀米插件、手机端预览等功能，与egg-ueditor完美结合 源码地址：https://github.com/inmyjs/ueditor 主要优化项 关闭了多余的功能项，主要针对手机端内容编辑； 原来很Low的图标替换了（这是抄别人的）； 增加秀米插件，内容编辑真是方便啊，如果有秀米vip的就更好使了； 增加手机端预览功能，方便检查内容； 关闭...
UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案
weixin_34220623的博客
01-21 824
问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句   document.getElementById('preview').innerHTML = editor.getContent();   在它上面加一句 parent.document.g...
百度UEditor编辑文章，移动端适配问题
lph107的博客
08-24 1904
/** * 将文本中的相对地址转换成对应的绝对地址 此方法用于百度UEditor图片的 * @return */ public static String processImgSrc(String content,String baseUrl){ Document document = Jsoup.parse(content); document.setBaseUri(ba...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值