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

实现功能

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

相关插件

• wangEditor
• jQuery UI
• html2canvas

具体实现

实现原理是使用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 「保存页面为图片」 的踩坑之旅。