首页 > 其他分享> > 魔改HandyEditor，实现上传图片调整，字体大小单位使用px等功能

魔改HandyEditor，实现上传图片调整，字体大小单位使用px等功能

2021-05-12 17:36:34 作者：互联网

寻找一款小巧、使用简单的富文本编辑器

这几年像VUE、react这类的前端框架多了起来，自己做前端的时候也少，用原有的jquery+css+html框架调整下样式也能完成现有工作，也就懒的去折腾学习新框架。

之前有个项目需要用到富文本编辑器，搜了很多，发现现在很少有人使用富文本编辑器，甚至百度的ueditor都停止维护了。

以前用百度的ueditor的时候挺多的，功能完善，但是bug也不少(偶尔界面加载失败、上传配置无效等等)。

后来搜到了一款简单清爽的编辑器HandyEditor(官网地址：http://he.catfish-cms.com/)，功能完备，使用简单，引用下HandyEditor.min.js，然后 HE.getEditor('editor')就可以了。

遇到的问题

HandyEditor一般使用没什么问题，字体样式、排版布局、图片上传应有尽有。不过比较简单，有一些比较常用的功能就没有或者达不到要求了。

问题1：上传的图片无法修改尺寸和位置

HandyEditor上传后的图片显示代码直接就是<img src="XXX"/>，内容是有了，但是实际使用场景往往需要调整图片尺寸，所以魔改的第一步就放到了增加图片调整的功能。

先看下魔改后的效果。

图魔改后图片位置和尺寸调整效果

实现的思路比较简单，就是把上传的图片放入一个新建的div中，通过修改div的样式来达到设置图片样式的思路。

<html>
 <head></head>
 <body>
  <div class="HandyEditor" style="height: 540px; width: 100%;">
   <div></div>
   <div style="z-index: 9000;">
    <div id="HandyEditor_menu" class="HandyEditor_menu" tabindex="0" style="position: relative; outline: none;">
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_bold" style="display: inline-block;" title="加粗" draggable="true"><i class="he-bold"></i></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_italic" style="display: inline-block;" title="斜体" draggable="true"><i class="he-italic"></i></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_strike" style="display: inline-block;" title="删除线" draggable="true"><i class="he-strike"></i></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_underline" style="display: inline-block;" title="下划线" draggable="true"><i class="he-underline"></i></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_fontsize" style="display: inline-block;" title="字体大小" draggable="true">字号</span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_fontname" style="display: inline-block;" title="字体名称" draggable="true">字体</span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_color" style="display: inline-block;" title="字体颜色" draggable="true">字体颜色</span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_backcolor" style="display: inline-block;" title="背景颜色" draggable="true">背景色</span>
     <span class="HandyEditor_menu_gap"></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_left" style="display: inline-block;" title="左对齐" draggable="true"><i class="he-align-left"></i></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_center" style="display: inline-block;" title="居中" draggable="true"><i class="he-align-center"></i></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_right" style="display: inline-block;" title="右对齐" draggable="true"><i class="he-align-right"></i></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_full" style="display: inline-block;" title="两端对齐" draggable="true"><i class="he-align-justify"></i></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_indent" style="display: inline-block;" title="缩进" draggable="true"><i class="he-indent-right"></i></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_outdent" style="display: inline-block;" title="减少缩进" draggable="true"><i class="he-indent-left"></i></span>
     <span class="HandyEditor_menu_gap"></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_image" style="display: inline-block;" title="插入图片" draggable="true"><i class="he-picture"></i></span>
     <span class="HandyEditor_menu_gap"></span>
     <span class="HandyEditor_menu_item" id="HandyEditor_editor_save" style="display: inline-block;" title="undefined" draggable="true"><a href="#" class="btn btn-info btn-sm" onclick="main.saveBgImg()">保存</a></span>
    </div>
   </div>
   <div class="HandyEditor_editor" style="height: 540px; overflow: hidden; background-color: rgb(0, 176, 240);">
     <div contenteditable="true" style="height: 100%; overflow: auto; outline: none;">      
     </div>
     <div class="imgBox" id="1620721208316" oncontextmenu="HE.showContentMenu(this,event)" style="top: 91px; left: 10px;">
      <img draggable="false" src="/upload/9ab770d20f1d193cbd84dd91d2b029d9.png" style="width: 248px; height: 52px;" />
      <div class="coor" style="display: none;"></div>
     </div>
   </div>
  </div>
 </body>
</html>

　　实现这个只需要修改HandyEditor源码，在上传图片完成后，增加一个insertImg的方法，将图片的url传入并生成一段上述html到编辑器中即可。

insertImg:function(url){
            var id=(new Date()).getTime();
            var imgHtml = "<div class='imgBox' id='"+id+"' oncontextmenu='HE.showContentMenu(this,event)'><img draggable='false' src='" + url + "'/><div class='coor'></div></div>";            
            $(".HandyEditor_editor").append(imgHtml);
            HE.define.obj.focus();
        }

问题2：字体大小最大只能设置为48px

字体大小只能设置为最大48px这个问题，并不是HandyEditor的问题，这个大多数富文本编辑器都有，包括百度ueditor、ckeditor等等著名的富文本编辑器。

之所以出现这个问题，是因为document.execCommand("fontSize",xx,x)这个API支持传入的字体大小为1-7，这个单位不是px，而是字号。具体解释可以看MDN上面的说明(地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand)

以下是魔改后的字体大小选择效果，单位改为了px，支持0以上任意大小了。

图魔改后字体大小选择效果

这个的实现思路稍微复杂点，有几个地方需要考虑。

1) 没有直接的命令可以支持存入px为字体大小单位，即document.execCommand不支持

2) 如何获取选中的文字，并设置样式

以上问题解决方法可以参考我以前写的一篇博客，解决document.execCommand执行fontSize不能超过48px的问题

不过解决方法后也出现了一些问题，例如文字原有样式缺失、文字的换行消失。

这次重点就是如何在保留原有样式的基础上只修改字体大小，修改HandyEditor源代码fontsizeEx方法，实现代码如下：

fontsizeEx: function () {
            var e = this.id.split("_");
            HE.deldiv();
            var fontSize = e[e.length - 1];            

            //01 先试用内置命令将字体size设置为1
            //修改后富文本编辑器中不再使用size属性，所以先使用内置方法设置字体size为1，后续通过筛选这个属性为font-size达到修改字体尺寸的目的
            HE.handy("fontSize", 1);
            
            //02 判断本身元素是否为纯文本，纯文本情况下直接设置父元素字体尺寸
            var dom=$(window.getSelection().getRangeAt(0).commonAncestorContainer);
            if(dom.length==1&&dom[0].nodeType== 3){
                //纯文本
                dom.parent().removeAttr("size").css("font-size",fontSize + "px");
            }

            //03 本身是font类型或者有size属性，修改字体尺寸
            if(dom.attr("size")=="1")
                dom.removeAttr("size").css("font-size",fontSize + "px");
        
            //04 获取选中dom子元素中所有font元素
            var children=dom.find("font");
            for(var i=0,length=children.length;i<length;i++){
                if($(children[i]).attr("size")=="1")
                    $(children[i]).removeAttr("size").css("font-size",fontSize + "px");
            }
        }

突发奇想，类似PPT般的导出图片

魔改HandyEditor的过程中，突发奇想，能不能把HandyEditor当做一个图片设计器，像PPT一样做一些简单的宣传标语图，然后导出图片。

以前用过html2canvas.js，这个js插件可以支持将任意html转换为图片，我们的HandyEditor编辑器本身就是html，那么应该是可行的。

先看下实现后的效果。

图 HandyEditor编辑器内容转为图片效果

集成使用方法

引用js

<script src="jquery-1.10.2.min.js"></script>
<script src="handyEditor/HandyEditor.js"></script>
<script src="handyEditor/html2canvas.min.js"></script>j

增加一个textarea文本域控件

<textarea id="editor" name="editor" ></textarea>

初始化，这里我只写一些改动后增加的接口和参数使用方法

var editor = HE.getEditor('editor', {
      uploadCallback: uploadImgCallback,//图片上传后处理方法
      uploadPhotoUrl:"",//图片上传的URL
      saveImgCallback:saveCallback //保存编辑器内容为图片后处理方法

})

　uploadCallback：这个是自定义的上传图片后处理方法，因为每个人自己写的上传接口返回内容不一样，于是就把这个处理给单独弄了回调，集成后再通过执行editor.insertImg(url)的方法将图片插入到编辑器中。

function uploadImgCallback (content) {
  var url="你的上传返回结果中的图片url地址"
  editor.insertImg(url);
}

　uploadPhotoUrl：这个是自定义的上传图片的后台接口地址。

saveImgCallback：这个是导出编辑器内容为图片后的自定义回调方法，参数是图片的base64格式，具体后续怎么使用就用这个回调。

function saveCallback(base64Img){
    var win=window.open("","_blank");
    win.document.write("<img src='"+base64Img+"'/>");
}

源码下载地址：https://download.csdn.net/download/jiangfei200809/18624638

标签：HandyEditor,字体大小,魔改,var,size,上传,图片
来源： https://www.cnblogs.com/tracyjfly/p/14760310.html