it-swarm.com.de

Wie kann man tinyMCE automatisch verkleinern?

Ich habe ein TinyMCE, das über eine TextArea gesetzt ist, und ich möchte, dass dieser Editorbereich den gesamten Platz seines übergeordneten Divs zu jeder Zeit überdeckt.

Ich habe eine JS-Funktion, die das aktuelle Leerzeichen abruft und die textarea.style.height auf es setzt, aber wenn ich TinyMCE aktiviere, scheint es nicht mehr zu funktionieren.

Die Textfläche hat auch eine Breite von: 100%; Bei HTML-Rendering wird die Größe nicht geändert, wenn auch TinyMCE verwendet wird.

Irgendwelche Ideen?

31
igorsantos07

Heutzutage sollten Sie das mit tinyMCE mitgelieferte autoresize plugin verwenden. Sie müssen tinyMCE wie folgt aufrufen (jQuery-Version):

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

Ich habe die Erfahrung gemacht, dass es hilfreich sein kann, die Größenänderung in init_instance_callback manuell aufzurufen, um die korrekte Höhe bei init anzugeben. Fügen Sie diesen Parameter zu den übergebenen Optionen hinzu, wenn Sie dies benötigen:

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

Der Punkt ist, dass TinyMCE anstelle des Textbereichs einen iframe mit dieser ID generiert: originalID + "_ ifr" und eine Tabelle originalID + "_ tbl" zum Halten der Steuerelemente und des Editorbereichs.

Um die Breite der Flüssigkeit herzustellen:

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


Flüssigkeitshöhe machen:

Ändern Sie dinamisch document.getElementById(id+'_ifr').style.height durch JS auf die gewünschte Höhe.
Dies ist das Skript, das ich dafür verwende:

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";
}

Sie können den Code- und Funktionsaufruf in den Ereignissen onload und onresizebody verwenden.

14
igorsantos07

in Tinymce 3.4.6, .__ 

width:'100%'

in init Option wird das Problem lösen.

9
ZHAO Xudong

In TinyMCE v4 funktionierte nichts von mir. Daher war meine Lösung, die Höhe anhand der Symbolleisten/Menüleiste/Statusleiste zu berechnen und dann die Höhe des Editors unter Berücksichtigung dieser Höhen festzulegen.

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) {
        }
    }
}

In meinem Fall wollte ich, dass das Editorfenster der Breite und Höhe des tatsächlichen _ window entspricht, da der Editor in einem Popupfenster angezeigt wird. Um Änderungen zu erkennen und die Größe zu ändern, habe ich einen Rückruf eingestellt:

window.onresize = function() {
    resizeEditor();
}
3
Kyle Falconer

Wenn Sie winzige MCE dynamisch über JS ausführen, kann es zu Timing-Problemen kommen, bei denen der MCE-Editor noch nicht für Stilanpassungen verfügbar ist. Um dies zu bekämpfen, können Sie ein Timeout der alten Schule verwenden.

In diesem Beispiel verwende ich einen "j" -Namensraum für JQuery. Wenn sich Ihr Editor in einem flüssigen Div befindet, dessen Größe sich ändert, möchten Sie dies möglicherweise in ein $ (Fenster) .resize (function () {}) einschließen. Hörer.

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) 
3
Noel Baron

Mit Version 4 und der Option, das Flexbox-Layout im Browser zu verwenden, habe ich folgende Schritte ausgeführt, um eine Bearbeitung der gesamten Breite und Höhe des übergeordneten div zu erhalten.

Es sollte leicht sein, die CSS in eine Datei zu packen, wenn Sie es lieber zu Ihren vorhandenen Stilen hinzufügen möchten.

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);

Die Idee ist, dass alle benötigten divs so viel Spaltenplatz beanspruchen, wie erforderlich ist, um die übergeordneten 100% zu füllen, und dies geschieht, indem ein div um den Textbereich gelegt wird: <div class="tinycme-full"> <textarea ... /></div>

Es werden keine Jquery oder andere Abhängigkeiten benötigt und es füllt nun die übergeordneten Elemente zu 100% aus.enter image description here

2

SyCoDeR hat recht, aber ich habe einen etwas anderen Weg eingeschlagen, wahrscheinlich mit den gleichen Ergebnissen.

/*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;
}

Überarbeitet, weil TinyMCE die IDs mit Menü-/Symbolleisten-Ergänzungen oder -Löschungen ändert. Dies funktioniert unabhängig davon, was Sie damit machen.

1
liquibyte

Ich hatte das gleiche Problem, nachdem ich diesen Thread gelesen hatte, endete ich mit diesem Code

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

Ich verändere das "_ifm" -Element anstelle des "_tbl" -Elements, da die Größenänderung des "_tbl" nicht den Bearbeitungsbereich für mich geändert hat. Dann lasse ich etwas Platz für die Symbolleiste und die Statusleiste, indem der "_ifr" um 85 Pixel kürzer als der Container div ist. 

Ich musste setTimeout verwenden, damit es funktioniert, vielleicht weil ich eine Animation habe, die das Containerelement anzeigt.

1
emmanuel2004

Ich verwende dafür eine reine css-Lösung (tinyMCE 4.0.20).

  1. Setzen Sie die Höhe des Frames auf 100%:

    tinymce.init ({ height: '100%' })

  2. Fügen Sie Stile hinzu, um die Größe des iframe-Containers automatisch zu ändern:

    .mce-tinymce {height: auto; Breite: 100%; Position: absolut; links: 0; oben: 0; unten: 0; }

    .bq-editor .mce-container-body {height: 100%; }

    .bq-editor .mce-edit-area {position: absolut; oben: 57px; unten: 0; Breite: 100%; Höhe: Auto; }

Hinweis: Ich habe eine Symbolleistenzeile und oben: 57px; Im .bq-Editor .mce-edit-area ist ein Auffüllen der Symbolleisten.

0
SyCoDeR

Keine dieser Lösungen hat zu 100% für mich funktioniert. Ich brauchte die Höhe, um mich bei der Initialisierung und während der Bearbeitung anzupassen. Was ich getan habe, ist die Höhe des HTML-Elements im iFrame zu ziehen und dann die Höhe mit zusätzlichen 100px auf den iFrame anzuwenden.

Hier ist meine Lösung: (img max-width für responsive Bilder hinzugefügt)

bei der Initialisierung

   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);                     
        });             
    },

bei Knotenänderung (Änderungen)

  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);   
    });
}   
0
DobotJr

Der Wrapper von iframe (seine ID wird durch _ifr beendet) ist das erste übergeordnete Element von span, dem die Anwendung als Rolle dient. So erhalten Sie den Wrapper: 

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

So ändern Sie die Höhe:

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

Breite ändern

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