TinyMCE没有环绕整个部分

时间:2016-06-30 19:52:21

标签: django google-chrome tinymce django-inplaceedit

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

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

1 个答案:

答案 0 :(得分:1)

我根本不了解TinyMCE,但看起来编辑器有一个固定的宽度和高度,而且内容溢出。

TinyMCE可能有也可能没有提取此功能的API函数,但您可以尝试将以下内容添加到ANS : 9, 10, 11, 5, 4选择器中:

#textarea

当剪切任何内容时,即当它将溢出容器的边界之外时,这将添加滚动条。

我不确定这是否会在overflow: auto; 属性指定的editor.css中,或者如果您需要content_css属性,则按this