Erzwingen TinyMCE die gleiche Höhe wie Eltern sein

Question

Nur um Ihnen zu helfen, mein Problem verstehe ich diesen Stift erstellt das Thema anzuzeigen Ich habe: http://codepen.io/anon/pen/YZwvQz

Wie man sehen kann, wenn ich die Höhe des TinyMce auf 700px gesetzt Es geht über das Eltern-Div. Ich möchte nur, dass TinyMce an das Eltern-Div angefügt wird. Ich habe festgestellt, dass TinyMce keine Prozentangaben zur Höhe unterstützt. Gibt es das überhaupt, kann ich das tun, plus jede Größenänderung nach dem Eltern-Div, in dem sich TinyMce befindet, zu stoppen?

Hier ist mein HTML:

<script> 
    tinymce.init({ 
    selector: '#codeNotesEditor' 
    }); 
</script> 
<main> 
<div id="myClippetWrapper"> 

    <div id="clippetNav"> 



    </div> 

    <div id="codeAndNotesWrapper"> 

    <div id="codeView"> 

    </div> 

    <div id="noteView"> 

     <textarea id="codeNotesEditor"></textarea> 

    </div> 

    </div> 

</div> 

    </main> 

Meine CSS:

main 
{ 
    padding: 20px; 
} 

#myClippetWrapper { 
    display: flex; 
    height: 700px; 
} 

#clippetNav { 
    box-sizing: border-box; 
    padding: 10px; 
    width: 250px; 
    background-color: #222222; 
    margin-right: 10px; 
} 

#codeAndNotesWrapper { 
    box-sizing: border-box; 
    display: flex; 
    width: 100%; 
} 

#codeAndNotesWrapper>div { 
    flex-basis: 100%; 
} 

#codeView { 
    padding: 10px; 
    background-color: #222222; 
    margin-right: 10px; 
} 

#noteView { 
    padding: 10px; 
    background-color: #222222; 
} 

#codeNotesEditor {} 

JS:

tinymce.init({ 
    selector: 'textarea', 
    height: 500, 
    menubar: false, 
    plugins: [ 
    'advlist autolink lists link image charmap print preview anchor', 
    'searchreplace visualblocks code fullscreen', 
    'insertdatetime media table contextmenu paste code' 
    ], 
    toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
    content_css: '//www.tinymce.com/css/codepen.min.css', 
    height: 700 
}); 

Answer 1

Das ist sehr gut möglich!

Da TinyMCE dynamisch generiert wird, wird es direkt als Inline-Stil an die angehängt. Dies bedeutet, dass Sie es nicht mit höherer Spezifität anvisieren können, aber glücklicherweise können Sie stattdessen !important verwenden, um die Regeln zu überschreiben. Sie wissen auch nicht, den Namen des DIV von TinyMCE erstellt, so dass Sie den direkten Nachkommen #noteView nehmen müssen:

#noteView > div { 
    height: 100% !important; 
    overflow: hidden !important; 
} 

Es ist wichtig, ihm zu geben, sowohl eine Höhe, die die Höhe korreliert der Container, aber zu auch verstecken den Überlauf, so dass es nicht über den Boden des Behälters gehen.

Ich habe eine Arbeitsgeige erstellt, die diese here präsentiert.

Hoffe, das hilft! :)