实现功能

实现富文本编辑器在定义区域内可以拖拽和调整其大小，编辑完成后可将内容生成图片。由于系统较陈旧，所以选择的是基于jQuery的插件实现。

具体实现

实现原理是使用jQuery UI的Draggable和Resizable的特性实现富文本的拖拽和修改大小，使用html2canvas实现将DOM节点转成图片。

如果不需要jQuery UI的全部功能，可以只选择需要的功能进行下载，这样能减少引入文件的大小。

<div id="preview"><div id="editor"></div><button id="btnPreview">生成图片</button><img id="previewImg" />
</div>

// 初始化富文本编辑器
var E = window.wangEditor;
var editor = new E('#editor');
editor.create();// 插入编辑器底下的操作栏，可进行编辑器drag和resize的操作
$('#editor').append(`<div class="tool"><span class="drag"></span><embed src="./drag.svg"/><embed src="./resize.svg"/>
</div>`);$("#editor").draggable({ handle: '.drag', containment: "#preview" });
$("#editor").resizable({ containment: "#preview" });// 点击按钮将编辑的内容生成图片
$("#btnPreview").click(function (){// 隐藏编辑器工具栏$(".w-e-text-container").css('border', 'none');$('.tool').hide();$('.w-e-toolbar').css('visibility', 'hidden');html2canvas($("#preview"), {allowTaint: false,taintTest : false,logging: true,onrendered: function (canvas){var dataUrl = canvas.toDataURL();$("#previewImg").attr('src', dataUrl)$(".w-e-text-container").css('border', '1px solid #ccc');$('.tool').show();$('.w-e-toolbar').css('visibility', 'visible');}});
});

参考

关于html2canvas生成图片的坑，这篇文章讲得很详细了：一次 H5 「保存页面为图片」的踩坑之旅。

基于jQuery实现富文本的拖拽和修改大小相关推荐

基于jQuery的富文本编辑器summernote插件的使用教程
基于jQuery的富文本编辑器summernote插件的使用教程基于jQuery的富文本编辑器summernote插件的使用教程一:最近项目中遇到使用富文本编辑器的功能, JQuery的富文本编辑 ...
el-tiptap富文本框拖拽和复制的图片会跳过上传服务器解决方案
最近在业务上遇到个问题,因为富文本框存在一个漏洞,正常使用菜单栏上面的上传图片,会先传到服务器上,再将服务器返回的地址传给后端接口,但是通过拖拽或者复制的图片,依旧是base64格式,查看官方文档也没 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
jquery UI 跟随学习笔记——拖拽（Draggable）
jquery UI 跟随学习笔记--拖拽(Draggable) 引言这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI 插件,以及jquery库学习 ...
基于 SpringBoot + Vue 实现的可视化拖拽编辑的大屏项目
整理:抓哇笔记简介大屏设计(AJ-Report)是一个可视化拖拽编辑的全开源项目,直观,酷炫,具有科技感的图表工具.内置的基础功能包括数据源,数据集,报表管理. 多数据源支持,内置mysql.el ...
通过拖拽改变图片大小
<!doctype html> <html lang="en"><head><meta charset="utf-8" ...
简单的进度条拖动效果及拖拽改变层大小
业务需求价格区间的进度条拖动初级demo 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&qu ...
winform自定义窗体边框样式模板（支持四周边框拖拽改变窗体大小，支持鼠标拖动头部移动窗体）
winform自己的边框已经过时,但小伙伴们又觉得自定义太过麻烦.本文将手把手教你自定义winform边框样式,并提供源代码链接(可直接作为模板使用).话不多说,直接上操作步骤. 先上一张完成截图一 ...

基于jQuery实现富文本的拖拽和修改大小

实现功能

相关插件

具体实现

参考

基于jQuery实现富文本的拖拽和修改大小相关推荐

最新文章

热门文章