最近因项目需要,研究一个富文本编辑器的改造。改造过程中,发现IE和火狐浏览器中编辑区域四周多出来一些用于鼠标拖动以放大、缩小的锚点。直接上图:
正常情况:
异常情况:
相信有过改造富文本编辑经验的同学会遇到这样的问题。
打开控制台,发现多了一个_moz_resizing的属性,猜测与这个家伙有关系的可能性最大。
后经请教大牛、自己查资料,解决了问题,并了解到了相关的一些知识。
缩放控件可以通过使用“enableObjectResizing”命令来禁用掉。该命令必须在“designMode“被设置为“on”后执行才有效,即:
document.designMode = "on"; document.execCommand('enableObjectResizing', false, 'false');
一旦缩放控件被禁用,属性_moz_resizing也就看不到了。_moz_resizing只是本地控件的副产物,它的属性值并不影响本地控件。_moz_resizing唯一的作用就是为被缩放的元素添加一个外边框。
一旦元素的position属性值被改变了,那么上次执行的“enableObjectResizing”命令就失效了,必须重新执行以重新关闭本地控件。
“enableObjectResizing”命令影响处于可编辑区域的图片和绝对定位的元素。
下面是一个demo的代码,在火狐中运行一下,便知。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <script src="index.js"></script> <style> * { margin: 0; padding: 0; } .editor { position: absolute; width: 200px; height: 200px; left: 50%; top: 10px; margin-left: -100px; background-color: #eee; margin: 0 auto; } </style> </head> <body> <div class="editor" contenteditable="true"></div> <br> <div style="position:absolute;top:300px;width:600px;left:50%;margin-left:-300px;"> <button id="on">开启enableObjectResizing</button> <button id="of">关闭enableObjectResizing</button> </div> <script> window.onload = function() { var onBtn = document.querySelector('#on'); var offBtn = document.querySelector('#of'); offBtn.onclick = function(e) { document.designMode = "off"; document.execCommand('enableObjectResizing', false, 'false'); }; onBtn.onclick = function(e) { document.designMode = "on"; document.execCommand('enableObjectResizing', true, 'true'); }; } </script> </body> </html>