TinyMCE 没有环绕整个部分

Question

我有一个 textarea 模型字段，您可以使用 Django 的就地编辑在没有管理员的情况下进行编辑。就地编辑还使用 TinyMCE 适配器。在 Chrome 中单击文本区域时，TinyMCE 文本编辑器仅环绕该部分的三分之二。 TinyMCEs init 方法中有什么东西可以让它环绕整个部分吗？我尝试切换高度，但它对文本编辑器的高度没有影响

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，但是看起来编辑器有固定的宽度和高度，内容溢出。

TinyMCE 可能有也可能没有抽象此内容的 API 函数，但您可以尝试将以下内容添加到 #textarea 选择器：

overflow: auto;

这将在任何内容被剪辑时添加一个滚动条，即当它溢出容器边界时。

我不确定这是否会出现在content_css 属性指定的editor.css 中，或者您是否需要editor_css 属性，根据this。