Question

当TinyMCE位于绝对定位的容器内时，它如何适合他的内容，并且在编辑过程中宽度会保持更新。

<div class="container">
    <textarea>This is my very long text that shouldn't be broken. This is my very long text that shouldn't be broken</textarea>
</div>    
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector:'textarea',
        plugins: "autoresize"
    });
</script>

CSS：

.container {
    position: absolute;
    top: 10px;
    left: 10px;
    width: auto;
}

http://jsfiddle.net/charlesbourasseau/6a6187su/2

Answer 1

~~使width为包含元素宽度的99％~~

~~如果你将width设为98％，那么在没有任何滚动条的情况下看起来很不错。~~

使用here提供的答案之一（我将使用HTML5画布），获取当前在textarea（现在是tinyMCE容器）中输入的文本的宽度。

之后使用this调整tinyMCE iframe的大小。

Answer 2

<script type="application/javascript" language="javascript">
tinymce.init({
    selector: "textarea#page_content",
    theme: "modern",
    width: 'auto',
    height: 300,
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
 });
</script>

这对我有用..

使TinyMCE编辑器宽度动态适合内容

2 个答案: