djangogoogle-chrometinymcedjango-inplaceedit

TinyMCE not wrapping around entire section


I have a textarea model field, that you can edit without admin using Django's inplace edit. The inplace edit also uses a TinyMCE adaptor. When clicking on the textarea in Chrome, the TinyMCE text editor wraps around only like two thirds of the section. Is there something in TinyMCEs init method to make it wrap around the entire section ? I tried switching the height, but it had no affect on the height of the text editor

enter image description here

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

Solution

  • I don't know TinyMCE at all, but it looks like the editor has a fixed width and height, and the content is overflowing.

    TinyMCE may or may not have an API function that abstracts this, but you could try adding the following to the #textarea selector:

    overflow: auto;
    

    This would add a scrollbar when any content is clipped, i.e. when it would spill outside the boundary of the container.

    I'm not sure if that would go in editor.css specified by the content_css property, or if you need the editor_css property, as per this.