إزالة معالجات تغيير الحجم على contentEditable div

Question

لقد أنشأت div contentEditable لاستخدامه كمنطقة نصية غنية.يحتوي على معالجات تغيير الحجم من حوله والتي أرغب في التخلص منها.هل لديك أي فكرة كيف سأفعل هذا؟

يحرر:يبدو أن هذا يحدث لأنني أقوم بتحديد موضع div تمامًا، لذلك يضيف Firefox سمة _moz_resize المثيرة للغضب إلى العنصر الذي لا يمكنني إيقاف تشغيله.

Answer 1

ويبدو وكأنه سوف تكون قادرة على العمل في جميع أنحاء هذا بإضافة شعبة المجمع وقطعا المواقع المجمع ثم جعل شعبة الداخلي contentEditable.

Answer 2

وفقط كملاحظة جانبية، يمكنك تعطيل ميزة مقبض تغيير الحجم التلقائي فايرفوكس عن طريق إرسال (إلى حد ما سيئة موثقة) قيادة enableObjectResizing للوثيقة:

document.execCommand("enableObjectResizing", false, false);

، وهذا لا يمكن إلا أن يكون بأمان القيام به

وAFAIK بمجرد تحميل المستند، وليس هناك طريقة أعرف لتعطيل المختطف، والتي هي ميزة منفصلة.

Answer 3

في Chrome 39، يبدو أن هذه المقابض غير موجودة، حتى لو كنت تريدها.

في Firefox، يمكن للمرء ببساطة استخدام execCommand, ، مثل أجاب ZoogieZork.

ولكن في Internet Explorer لا يمكن إيقاف تشغيل هذا.يجب أن يتم العمل حولها.

في WYMeditor التنمية، وهنا ما وجدته.

النتائج التالية في:

• في IE، تظهر واجهة مستخدم تغيير الحجم لجزء من الثانية ثم تختفي.يبدو أنه لا توجد طريقة للمستخدم لاستخدامه.
• الصور هي نص محدد على mouseup
• القدرة على سحب الصور.في بعض المتصفحات، قد يلزم تحديدها قبل السحب.كما هو مكتوب في البند السابق، بسيط mouseup سيؤدي إلى تحديد الصورة.
• يتم تحديد الصور باستخدام تحديد النص وليس "تحديد التحكم" (الذي يوفر واجهة المستخدم لتغيير الحجم).

هذا هو أفضل ما يمكن أن أتوصل إليه بعد ساعات من التنفس العميق.أعتقد أنه أمر جيد بما فيه الكفاية إذا كنت تريد حقًا التخلص من تلك المقابض.

في IE، الإعداد oncontrolselect لكي ترجع false في الصورة، يمنع ظهور هذه المقابض حقًا، ويمكنك القيام بذلك بذكاء، عن طريق إرفاق المعالج التالي بـ mousedown حدث:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

    if (evt.tagName.toLowerCase() === "img") {
        img = evt.target;
        img.oncontrolselect = returnFalse;
    }
}

في الواقع لا يعمل بشكل جيد تماما.السبب في أنها لم تعمل بشكل جيد هو أنه من أجل بدء عملية السحب والإفلات على الصورة، كان على المرء الضغط مع الاستمرار على الماوس، دون تحريكه، لجزء من الثانية، وبعد ذلك فقط يبدأ تحريكه لمدة السحب.إذا ضغط أحد الأشخاص بالماوس وبدأ السحب على الفور، فستبقى الصورة في مكانها ولن يتم سحبها.

لذلك لم أفعل ذلك.

ما فعلته هو ما يلي.في جميع المتصفحات التي استخدمتها mouseup للنص حدد الصورة المستهدفة حصريًا.في غير IE وIE11، بشكل متزامن:

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        selectSingleNode(img); // In my case, I used Rangy
    }
}

في IE 7 إلى 10، بشكل غير متزامن:

function (evt) {
    if (evt.target.tagName.toLowerCase() !== "img") {
        return;
    }

    window.setTimeout(function () {
        selectSingleNode(img); // In my case, I used Rangy
    }, 0);
}

أدى هذا إلى التأكد من أنه بعد ظهور تلك المقابض، فإنها تختفي في أسرع وقت ممكن، لأن الصورة تفقد "تحديد التحكم" الخاص بها لأنه يتم استبدال هذا التحديد بتحديد نص عادي.

في Internet Explorer من 7 إلى 11، قمت بإرفاق معالج بـ dragend الذي يزيل كل التحديد:

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        deselect(); // I use Rangy for this, as well
    }
}

يؤدي هذا إلى اختفاء المقابض التي تظهر بعد السحب والإفلات.

آمل أن يساعد هذا وآمل أن تتمكن من جعله أفضل.

Answer 4

ولIE11 (I havn't اختبار الإصدارات القديمة من IE، لكنني أشعر بأن ذلك من شأنه أن يعمل) يمكنك إضافة = contenteditable "كاذبة" السمة إلى العلامة img. هذا سيمنع أي إعادة التحجيم من يجري القيام به مع الحفاظ على السحب والإسقاط في المكان.

Answer 5

... فقط أفضل من أي وقت مضى الإصلاح

<div contenteditable="true">
    <label contenteditable="false"><input/></label>
</div>

وأو أي عنصر HTML والتي يلتف الإدخال / IMG

ويعمل على IE11 مثل السحر

Answer 6

وأنا فقط مواجهة هذه المشكلة. حاولت document.execCommand("enableObjectResizing", false, false); لكن، رمز الحركة ما زالت تظهر. فقط ما حل مشكلتي كان e.preventDefault() فقط عندما يحدث حدث onmousedown.

element.onmousedown = function(e){
       e.preventDefault();
}

Answer 7

هل حاولت إضافة النمط

border: none;

إلى شعبة؟