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

最新推荐文章于 2024-06-26 18:00:54 发布
最新推荐文章于 2024-06-26 18:00:54 发布
阅读量1.3w 收藏 2
点赞数 6
分类专栏： Java 文章标签： websocket idea ueditor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sw69366/article/details/53008413
版权

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

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

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

这里写图片描述

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

最终效果

PC端
移动端

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

sw69366
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ueeditor添加手机预览
wanlichang200的博客
09-13 2713
1 ueditor.config.js 修改toolbars 添加需要的按钮如 prephone 2zh-cn.js 找到labmap添加 悬浮时中文显示 如'prephone':'手机预览' 3 ueditor.all.js 找打var btnCmds 添加 'prephone' 在其中添加点击事件 如 UE.commands['prephone'] = { execC
百度UEditor编辑文章，移动端适配问题
lph107的博客
08-24 1732
/** * 将文本中的相对地址转换成对应的绝对地址 此方法用于百度UEditor图片的 * @return */ public static String processImgSrc(String content,String baseUrl){ Document document = Jsoup.parse(content); document.setBaseUri(ba...
利用WebSocke+Ueditor实现兼容手机端页面的WEB实时编辑器
11-02
利用WebSocke+Ueditor实现兼容手机端页面的WEB实时编辑器 页面也简陋， 主要是提供一个思路。
使用ueditor上传附件（pdf, mp4等）可直接预览
最新发布
followly的博客
06-26 707
最近遇到一个需求，在使用富文本框编辑文章内容时，需要上传附件，同时上传的这个附件需要以附件的格式或者直接预览的方式展现。
百度富文本编辑器UEditor功能介绍以及提交预览
weixin_33882443的博客
12-01 937
2019独角兽企业重金招聘Python工程师标准>>> ...
百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个
直到世界的尽头
08-08 9850
我们在之前的文章中已经做过富文本插件的调研。富文本插件Ueditor是百度推出的一款开源在线 HTML 编辑器。http://fex-team.github.io/ueditor/比较好用，我们本章详细记录它的应用过程，以及在不同场景下的具体配置。我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架，在此基础上记录 ueditor用法。应用bootstrap
vue 百度编辑器ueditor使用文件
10-28
总的来说，将Vue与百度编辑器UEditor结合使用，可以方便地在Vue项目中实现功能丰富的文本编辑功能。记得根据实际项目需求调整配置，以满足用户体验和功能需求。在开发过程中，查阅UEditor的官方文档...
ASP.NET百度Ueditor编辑器实现上传图片添加水印效果
01-03
最近工作中遇到一个需求，是要实现asp.net百度ueditor图片上传添加水印的功能，通过查找相关的资料终于实现了，下面来给大家分享下实现的效果，文末给出了实例代码，大家可以参考学习，下面来一起学习学习吧。...
百度ueditor编辑器.zip
04-23
百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器
yii2实现Ueditor百度编辑器的示例代码
10-17
主要介绍了yii2实现Ueditor百度编辑器的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
优化百度ueditor编辑器，增加秀米插件、手机端预览等功能，与egg-ueditor完美结合
江下飞雪
12-25 7008
ueditor 优化百度ueditor编辑器，增加秀米插件、手机端预览等功能，与egg-ueditor完美结合 源码地址：https://github.com/inmyjs/ueditor 主要优化项 关闭了多余的功能项，主要针对手机端内容编辑； 原来很Low的图标替换了（这是抄别人的）； 增加秀米插件，内容编辑真是方便啊，如果有秀米vip的就更好使了； 增加手机端预览功能，方便检查内容； 关闭...
html5富文本编辑器，手机端编辑器
03-12
最近在有项目需要手机端编辑器，找到两个自我感觉不错的，分享下。
ueditor 进行html预览,使用ueditor进行页面预览和打印
weixin_39732825的博客
07-11 1301
UEditor文档官网下载 UEditor打印的方式有很多，这里其实注重于训练如何使用ueditor。把编辑器的状态栏和工具栏全部隐藏，仅仅让其作为一个现实的工具，然后调用其打印方法进行打印。下载压缩包ueditor-dev-1.5.0.zip，解压后_examples就是示例页面，在该文件夹下新建一个html名为printDemo.html代码如下：HTMLPUBLIC"-//W3C//DT...
推荐一个移动端的适配方案
zhanglongdream的博客
02-08 1636
(function (doc, win) { var docEl = doc.documentElement,//根元素html //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'res
百度富文本手机端图片展示UM,UE
12-12 309
经过项目验证 1.在html中加入 <metaname="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> （UE百度编辑器呢会自动把添加的图片设置宽高属性，所以我们要把这两行代码干掉——找到js所在位置ued...
[笔记]百度UEditor_解决图片在手机端的自适应问题
独禅的司令
02-21 7589
问题: 手机端展示的图片超出屏幕 解决方法: 在页面引入 {ueditor_home}/ueditor.all.js 找到以下内容并添加红色部分 function callback(){ try{ var link, json, loader, body = (iframe.contentDocument || iframe.contentW...
UEditor适配移动端
hq.zheng的博客
03-06 5005
一.全局内容设置 使用getContent()接口，获取编辑器里的内容的HTML文档，用下面的格式去包裹，可以得到一个内容居中，屏幕两边留有一定边距，禁用缩放的页面 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/...
百度ueditor富文本编辑器如何使用
07-09
百度UEditor是一个功能强大的富文本编辑器，使用它可以方便地在网页上进行富文本编辑。下面是使用百度UEditor的一般步骤： 1. 下载UEditor：访问百度UEditor的官方网站（http://ueditor.baidu.com/website/），下载...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值