火狐下出现缩放控制框的问题(firefox _moz_resizing)

最近因项目需要，研究一个富文本编辑器的改造。改造过程中，发现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>

posted on 2016-08-23 16:41 -大灰羊- 阅读(1597) 评论(0) 编辑收藏举报