TinyMCEはセクション全体をラップしません

Question

私はDjangoのインプレース編集を使用して管理者なしで編集できるテキストエリアモデルフィールドを持っています。インプレイス編集では、TinyMCEアダプタも使用されます。 Chromeのテキストエリアをクリックすると、TinyMCEのテキストエディタはセクションの3分の2のようにしか折り返されません。 TinyMCEsのinitメソッドにセクション全体を囲むようなものがありますか？私は全くのTinyMCEを知りませんが、それがどのように見える私は高さを切り替えてみましたが、それには、テキストエディタの高さ

tinymce.init

tinymce.init({ 
    selector: "textarea", 
    theme: "modern", 
    plugins: [ 
     "template advlist autolink lists link image charmap hr anchor", 
     "searchreplace wordcount visualblocks visualchars code fullscreen", 
     "insertdatetime media nonbreaking table contextmenu directionality textcolor", 
    ], 
    menubar: "edit insert view format table tools", 
    toolbar1: "template insertfile undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media", 
    image_advtab: true, 
    content_css:'/static/admin_css/editor.css?v=1', 
    width: "98%", 
    height: 500, 
    file_browser_callback : FileBrowser, 
    image_dimensions: false, 
    style_formats : [ 
     {title : 'Header 1', block : 'h1'}, 
     {title : 'Header 2', block : 'h2'}, 
     {title : 'Header 3', block : 'h3'}, 
     {title : 'Header 4', block : 'h4'}, 
     {title : 'Header 5', block : 'h5'}, 
     {title : 'Header 6', block : 'h6'}, 
     {title : 'Div', block: 'div'}, 
     {title : 'Paragraph', block: 'p'}, 
     {title : 'Alpha List', selector: 'ol', styles: {'list-style-type': 'lower-alpha'}}, 
     {title : 'Button', selector: 'a', classes: 'btn'}, 
     {title : 'Dialog Link', selector: 'a', classes: 'dialog-link'} 
    ], 
    extended_valid_elements : 'iframe[src|title|width|height|allowfullscreen|frameborder|webkitallowfullscreen|mozallowfullscreen],', 
    templates: [ 
     {'title': '1 Column Center', 'description': '1 Centered Column.', 
      'url': '/static/tinymce_templates/1-col-center.html'}, 
     {'title': 'Schedule Demo Button', 'description': 'Button that links to schedule demo page', 
      'url': '/static/tinymce_templates/schedule-demo-button.html'}, 
     {'title': '1 Column Center w/ Button', 'description': '1 Centered Column w/ button', 
      'url': '/static/tinymce_templates/1-col-center-button.html'}, 
     {'title': '1 Column', 'description': '1 Full Width Column.', 
      'url': '/static/tinymce_templates/one_col.html'}, 
     {'title': '2 Column', 'description': '2 Equal Columns', 
      'url': '/static/tinymce_templates/2-col.html'}, 
     {'title': '2 Column w/ Contact Form', 'description': '2 Equal Columns w/ a Contact Form on the Right', 
      'url': '/static/tinymce_templates/2-col_contact.html'}, 
     {'title': '3 Column', 'description': '3 Equal Columns', 
      'url': '/static/tinymce_templates/3-col.html'}, 
     {'title': '4 Column', 'description': '4 Equal Columns', 
      'url': '/static/tinymce_templates/4-col.html'}, 
     {'title': '2 Column Wide Right', 'description': 'One Skinny Column & One Wide Column', 
      'url': '/static/tinymce_templates/wide_col_right.html'}, 
     {'title': '2 Column Wide Left', 'description': 'One Skinny Column & One Wide Column', 
      'url': '/static/tinymce_templates/wide_col_left.html'}, 
    ], 
    visual 

blocks_default_state: true, 
    paste_as_text: true, 
    paste_data_images: true, 
    browser_spellcheck: true, 
}); 

Answer 1

に影響を与えていましたエディタの幅と高さが固定されていて、内容がオーバーフローしています。

TinyMCEのがよく、またはこれを抽象化API機能を持っていないかもしれませんが、あなたは#textareaセレクタに以下の追加を試みることができる：

overflow: auto; 

これは、スクロールバーを追加するすべてのコンテンツがクリップされ、すなわち、それを容器の境界の外側にこぼれてしまう。

私はそれがcontent_cssプロパティで指定されたeditor.cssに行くかどうか分からない、またはあなたがthisごとに、editor_cssプロパティが必要な場合。