كيف يتم تغيير حجم الصفيح التلقائي؟

Question

لديّ tinymce تم تعيينه على نص ، وأريد أن تضع هذه المنطقة المحرر كل مساحة الوالد Div ، في جميع الأوقات.

لدي وظيفة JS التي تحصل على المساحة الحالية وتعيين textarea.style.

أيضا ، فإن النص له عرض: 100 ٪ ؛ لا يتم تغيير حجمه عن طريق عرض HTML عند استخدام Tinymce أيضًا.

أيه أفكار؟

Answer 1

في الوقت الحاضر ، يجب عليك استخدام البرنامج المساعد التلقائي الذي يأتي مع tinymce. سيتعين عليك استدعاء Tinymce مثل هذا (إصدار jQuery):

$('.tinymce').tinymce({
  theme : 'advanced',
  plugins : 'autoresize',
  width: '100%',
  height: 400,
  autoresize_min_height: 400,
  autoresize_max_height: 800,
});

لقد صنعت التجربة ، وأنه قد يكون من المفيد استدعاء الحجم اليدوي في init_instance_callback لتوفير الارتفاع الصحيح على init. أضف هذه المعلمة إلى الخيارات التي تم تمريرها ، إذا كنت بحاجة إلى هذا:

init_instance_callback: function (inst) { inst.execCommand('mceAutoResize'); }

Answer 2

النقطة هي أن tinymce يولد iframe في مكان textarea ، مع هذا المعرف: OriginalId+"_ ifr" ، وجدول OriginalId+"_ tbl" لعقد عناصر التحكم ومنطقة المحرر.

لجعل عرض السوائل:

document.getElementById(id+'_tbl').style.width='100%'

لجعل ارتفاع السوائل:

تغيير ديناميا document.getElementById(id+'_ifr').style.height إلى الارتفاع الذي تريده ، من خلال JS.
هذا هو البرنامج النصي الذي أستخدمه لهذا:

function toScreenHeight(id, minus) {
    var height;

    if (typeof(window.innerHeight) == "number") //non-IE
        height = window.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight) //IE 6+ strict mode
        height = document.documentElement.clientHeight;
    else if (document.body && document.body.clientHeight) //IE 4 compatible / IE quirks mode
        height = document.body.clientHeight;

    document.getElementById(id).style.height = (height - minus) + "px";
}

يمكنك استخدام الكود ومكالمات الوظائف في الداخل onload و onresize body الأحداث.

Answer 3

في Tinymce 3.4.6 ، مجموعة

width:'100%'

في خيار init سيحل المشكلة.

Answer 4

إذا كنت تقوم بعمل MCE Tiny بشكل ديناميكي عبر JS ، فيمكنك مواجهة مشكلات توقيت حيث لم يكن محرر MCE متاحًا بعد للتعديلات على الأنماط. لمكافحة هذا ، يمكنك استخدام مهلة المدرسة القديمة.

في هذا المثال ، أستخدم مساحة اسم "J" لـ JQuery. إذا كان المحرر الخاص بك في div السائل يتغير حجمه ، فقد ترغب في تضمين هذا في $ (window) .resize (function () {}) ؛ المستمع.

setTimeout(function(){ 
  $j('.mceEditor').css('width','100%').css('minHeight','240px');
  $j('.mceLayout').css('width','100%').css('minHeight','240px');
  $j('.mceIframeContainer').css('width','100%').css('minHeight','240px');
  $j('#'+[INSERT TEXTAREA ID HERE]+'_ifr').css('width','100%').css('minHeight','240px');
},500) 

Answer 5

لم يكن أي مما سبق يعمل بالنسبة لي في Tinymce V4 ، لذلك كان حلي هو حساب الارتفاع بناءً على أشرطة الأدوات/شريط القائمة/شريط الحالة ، ثم ضبط ارتفاع المحرر ، مع مراعاة تلك المرتفعات.

function resizeEditor(myHeight) {
    window.console.log('resizeEditor');
    myEditor = getEditor();
    if (myEditor) {
        try {
            if (!myHeight) {            
                var targetHeight = window.innerHeight; // Change this to the height of your wrapper element
                var mce_bars_height = 0;
                $('.mce-toolbar, .mce-statusbar, .mce-menubar').each(function(){
                    mce_bars_height += $(this).height();
                });
                window.console.log('mce bars height total: '+mce_bars_height);                          
                myHeight = targetHeight - mce_bars_height - 8;  // the extra 8 is for margin added between the toolbars
            }
            window.console.log('resizeEditor: ', myHeight);
            myEditor.theme.resizeTo('100%', myHeight);  // sets the dimensions of the editable area
        }
        catch (err) {
        }
    }
}

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

window.onresize = function() {
    resizeEditor();
}

Answer 6

مع الإصدار 4 وخيار استخدام Flexbox Layout في المتصفح ، قمت بما يلي للحصول على عرض كامل ، تجربة تحرير الارتفاع في Div.

يجب أن يكون من السهل وضع CSS في ملف إذا كنت تفضل إضافته إلى أنماطك الحالية.

var css = '.tinycme-full .mce-edit-area {display:flex;flex-flow:column;} .tinycme-full .mce-edit-area iframe {flex:1 1 auto;}  .tinycme-full {height:100%;} .tinycme-full .mce-tinymce.mce-container { width:100%;height:100%;border:0; } .tinycme-full .mce-panel{border:0} .tinycme-full .mce-container-body.mce-stack-layout {display: flex; flex-flow: column;height: 100%;} .tinycme-full .mce-stack-layout-item{  flex: 0 0 auto;} .tinycme-full .mce-edit-area{flex:1 1 auto;} ',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet) {
    style.styleSheet["cssText"] = css;
} else {
    style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

والفكرة هي أنها تجعل جميع divs المطلوبة تشغل مساحة العمود أكبر من ذلك حسب الحاجة لملء الأصل 100 ٪ وفعله عن طريق وضع div حول النص الخاص بك: <div class="tinycme-full"> <textarea ... /></div>

لا توجد حاجة إلى أي jQuery أو التبعيات الأخرى وتوغل الآن الوالد بنسبة 100 ٪.

Answer 7

واجهت نفس المشكلة ، بعد قراءة هذا الموضوع ، انتهى بي الأمر بهذا الرمز

init_instance_callback: function (inst) { 
  setTimeout(function () {
    document.getElementById(inst.id + '_ifr').style.height= (document.getElementById("theContainerDiv").offsetHeight-85) + 'px';
   },1000);
},

أقوم بتغيير حجم العنصر "_ifm" بدلاً من "_tbl" ، لأن تغيير حجم "_tbl" لم يغير حجم منطقة التحرير بالنسبة لي. ثم أترك بعض المساحة لشريط الأدوات و status من خلال جعل "_ifr" 85 بكسل أقصر ثم الحاوية div.

اضطررت إلى استخدام setTimeout لجعلها تعمل ، ربما لأن لديّ رسوم متحركة تعرض عنصر الحاوية.

Answer 8

أنا أستخدم حل CSS النقي لتحقيق ذلك (Tinymce 4.0.20).

1. حدد ارتفاع IFRAME إلى 100 ٪:

   tinymce.init ({ارتفاع: '100 ٪'})

2. أضف أنماطًا إلى حاوية iframe ذات الحجم التلقائي:

   .mce-tinymce {الارتفاع: Auto ؛ العرض: 100 ٪ ؛ الموقف: مطلق ؛ اليسار: 0 ؛ أعلى: 0 ؛ القاع: 0 ؛ }

   .bq-editor .mce-container-body {الارتفاع: 100 ٪ ؛ }

   .bq-editor .Mce-Edit-area {position: absolute ؛ أعلى: 57 بكسل ؛ القاع: 0 ؛ العرض: 100 ٪ ؛ الارتفاع: السيارات ؛ }

ملحوظة: لدي خط شريط أدوات واحد ، وأعلى: 57 بكسل ؛ في .bq-editor .Mce-Edit-area هو حشوة شريط الأدوات.

Answer 9

Sycoder على حق لكنني تابعت مسارًا مختلفًا قليلاً على الرغم من أن نفس النتائج.

/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
    min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
    position: absolute;
    top: 69px;
    bottom: 37px;
    left: 0;
    right: 0;
}
/*Footer*/
.mce-tinymce .mce-statusbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

المنقحة لأن Tinymce يغير المعرف مع إضافات أو حذف شريط الأدوات. هذا يعمل بغض النظر عما تفعله به.

Answer 10

يعد غلاف IFRAME (إنهاء المعرف الخاص به بواسطة _ifr) أول أحد الوالدين للمتابعة التي يكون لها تطبيق كدور. وبالتالي ، للحصول على الغلاف:

$('span[role=application]').parents(':eq(0)')

لذلك لتغيير حجم الارتفاع:

$('[id$=_ifr]').css('height',$('span[role=application]').parents(':eq(0)').css('height'))

لتغيير حجم العرض

$('[id$=_ifr]').css('width',$('span[role=application]').parents(':eq(0)').css('width'))

Answer 11

لم يعمل أي من هذه الحلول بنسبة 100 ٪ بالنسبة لي. كنت بحاجة إلى الارتفاع للضبط على التهيئة وأثناء التعديلات. ما فعلته هو الاستيلاء على ارتفاع عنصر HTML في iframe ، ثم طبقت الارتفاع على iframe مع 100 بكسل إضافي.

إليك الحل الخاص بي: (تمت إضافة IMG Max-Width للصور المستجيبة)

على التهيئة

   setup: function(editor) { 
        editor.on('init', function (e) { 
            $("#editor_textarea_ifr").contents().find('img').css("max-width","100%");
            iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();            
            $("#editor_textarea_ifr").css("height",iframeHeight + 100);                     
        });             
    },

على تغيير العقدة (التعديلات)

  init_instance_callback: function (editor) {
    editor.on('NodeChange', function (e) {
      $("#editor_textarea_ifr").contents().find('img').css("max-width","100%");               
      iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();              
      $("#editor_textarea_ifr").css("height",iframeHeight + 100);   
    });
}