TinyMCE宽度和高度不听话!

时间:2011-06-22 08:22:59

标签: javascript jquery tinymce

根据TinyMCE的(冲突的)文档,编辑器会采用它替换的textarea(或其他)元素的大小。它还说您可以通过在{ height: '123', width: '123' }方法中指定init来设置编辑器的大小。

我已经尝试了两次并且仍然只获得了一个结果 - 编辑器调整自身的大小(它记得如何超出我),这是用户最后一次调整大小的时间。

12 个答案:

答案 0 :(得分:28)

由于主题设置,它会保存最后一个尺寸。您可以使用以下

将其关闭
$('textarea.tinymce').tinymce({
    theme_advanced_resizing: true,
    theme_advanced_resizing_use_cookie : false,

答案 1 :(得分:18)

我知道这一切, 非常讨厌。

将此添加到任何已加载的CSS文件中为我修复了宽度(我只是把它放在全局css中,而不是在任何TinyMCE css文件中,我没有测试高度):

.mceEditor > table {
    width:/* my width */ !important;
}

这会影响所有实例,在我的情况下这很好。您可以使用.mceToolbar

定位工具栏本身

你有点希望TinyMCE调整textarea的大小,因此它可以足够宽以适应所有工具栏图标。

答案 2 :(得分:3)

这是我的修复。
它也适用于TinyMCE编辑器的多个实例(init(),'height'属性仅适用于第一个实例,因此它是一种解决方法,可以实现编辑框的固定或最小高度。)

.mceEditor td.mceIframeContainer iframe {
    min-height: 350px !important;
}
.mceEditor table {
    height: auto !important;
}

答案 3 :(得分:1)

是的,这很烦人。我编写了自己的函数来调整给定输入的高度。您可以修改它以根据需要设置高度/宽度:

    resizeIframe: function(frameid) {
        var frameid = frameid ? frameid : this.editor.id+'_ifr';
        var currentfr=document.getElementById(frameid);

        if (currentfr && !window.opera){
            currentfr.style.display="block";
            if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
                currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
            }
            else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
                    currentfr.height = currentfr.Document.body.scrollHeight;
            }
            styles = currentfr.getAttribute('style').split(';');
            for (var i=0; i<styles.length; i++) {
                if ( styles[i].search('height:') ==1 ){
                    styles.splice(i,1);
                    break;
                }
            };
            currentfr.setAttribute('style', styles.join(';'));
        }
    },

答案 4 :(得分:1)

tinyMCE.init({
        mode : "exact",
         .....

模式:“exact”将禁用通过拖动调整网格大小的功能

答案 5 :(得分:0)

我可以像这样设置编辑区域的宽度和高度

<style>
#content{width: 620px; height: 500px;} 
</style>

<textarea name="content" id="content" cols="50" rows="15"></textarea>

答案 6 :(得分:0)

我注意到一个包含的表强制执行宽度,而且图标集也是td的,所以它们会折叠到最小宽度,所以如果你在一行中有很多图标 - 它可能会搞乱你的宽度。

我的相关SO问题的排序,最终与您的问题密切相关:Able to float td elements consistently?

答案 7 :(得分:0)

我发现TinyMCE文本区域(在我的主题中称为“.mceContentBody”)在新的帖子内容区域中太小而且难以边缘化。 在我的主题中有一个名为editor-style的css文件。我更改了宽度(达到98%),因​​为TinyMCE使用cookie来记住编辑器大小,CSS更改并没有坚持。在清除我的浏览器缓存之后,CSS宽度/边距更改生效。最后。尔加。

答案 8 :(得分:0)

添加&#39; body_id&#39;使用tinymce.init然后在&#39; content_css&#39;中使用该ID为编辑提供所需的css行为。像这样:

tinymce.init({
    selector: "textarea",
    content_css: '/css/app.css',
    body_id: 'new-journal-editor'
});

然后在app.css中:

#new-journal-editor {
    height: 123px;
    width: 123px;
}

答案 9 :(得分:0)

虽然这里有很多好的建议,但我通过阅读这个问题找到了答案。高度或宽度没有问题,所以为什么所有这些都使用CSS或编写函数,文档中的方法有效。

最初的挑战是关于调整大小,作者从不说高度或宽度不起作用,它只是没有做他/她预期的事情 - 它只是如下所述:

&#34;编辑器调整自身(如何记住超出我),这是用户最后一次调整大小的时间。&#34;

Saidul Islam正确地回答了这个问题,并进一步向Stuart继续描述了如何关闭cookie。如果需要设置高度和宽度,请在init()中完成。你可以在这里阅读更多内容:

https://www.tinymce.com/docs/configure/editor-appearance/#min_height

在高度和宽度上调整输入区域的大小如下所述。

tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});

答案 10 :(得分:0)

我面临同样的问题,但我最终还是这样做了

#tinymce-textarea_ifr {
  min-height: 500px !important;
}
.mce-tinymce {
  width: 96% !important;
  margin: 0 auto !important;
}

答案 11 :(得分:-1)

我发现限制宽度的最佳方法tinyMCE 4+ textarea是将textarea包装在一个新的div或span标签中。然后应用宽度。这样您就可以使用百分比宽度而不是固定的px。如果你想调整高度编辑行=&#34; 15&#34;值。

示例:

<div style="width:90%!important;" ><textarea name="content"cols="100" rows="15" class="mceEditor" id="content"><?php echo $content;?></textarea></div>