1

How can TinyMCE fit his content when it's inside a absolute positioned container and also that the width keep updated during editing.

<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>

The CSS:

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

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

Charles
  • 11,367
  • 10
  • 77
  • 114

2 Answers2

0

Make width to be 99% of the width of the containing element

In fiddle if you make width to be 98% it looks nice without any scrollbars.

Use one of the answers provided here (I would go with the HTML5 canvas one), to get the width of the text currently entered inside the textarea (now the tinyMCE container).

After that use this to resize your tinyMCE iframe.

Community
  • 1
  • 1
ikromm
  • 523
  • 6
  • 13
  • It does not really fit. It just take the whole place inside `.container`. What I want is that the editor only takes the needed space, and that it grows during writing. – Charles Oct 28 '14 at 10:45
  • maybe the answer in the other post will help. take a look at the link – ikromm Oct 28 '14 at 10:58
  • Height is not a problem. I'm using the plugin `autoresize` and it works very well, but only for height... The width stays fixed. – Charles Oct 28 '14 at 11:03
  • if you can do something for the height, you can also do it for the width. take a look at the other link I gave you. – ikromm Oct 28 '14 at 11:26
0
<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>

This works for me..

Annanta
  • 31
  • 8
  • Thanks for your answer. Could you please provide a jsfiddle. Your example is not working as I expect: http://jsfiddle.net/charlesbourasseau/6a6187su/3/ – Charles Oct 28 '14 at 12:38
  • not how I would expect. The content inside TinyMCE is displayed on two lines. I would like to have only one line until I press enter. – Charles Oct 29 '14 at 13:41