基于jQuery实现富⽂本的拖拽和修改⼤⼩
实现功能
实现富⽂本编辑器在定义区域内可以拖拽和调整其⼤⼩，编辑完成后可将内容⽣成图⽚。 由于系统较陈旧，所以选择的是基于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');
// 插⼊编辑器底下的操作栏，可进⾏编辑器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 () {asp富文本编辑器
// 隐藏编辑器⼯具栏
$(".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 = DataURL();
$("#previewImg").attr('src', dataUrl)
$(".w-e-text-container").css('border', '1px solid #ccc');
$('.tool').show();
$('.w-e-toolbar').css('visibility', 'visible');
}
});
});
复制代码
参考
关于html2canvas⽣成图⽚的坑，这篇⽂章讲得很详细了：。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。