tinyMCE textarea 自动高度

Question

我想更改 tinyMCE textarea 的高度，这样所有内容都将可见，而无需滚动 textarea 本身，而是滚动主页。

textarea 的内容是动态变化的，所以它的高度应该是自动调整的。

<script>
    tinymce.init({
        selector: "textarea",
        plugins: ["code fullscreen"],
        toolbar: "bold italic | alignleft aligncenter alignright alignjustify"
    });
</script>

html

<form id='form1' action='?' method='post'>
    <input type='text' name='title' value='<?php echo $row['title'];?>'><br>
    <textarea name='content' ><?php echo $row['content'];?></textarea>
</form>  

js

$('textarea').each(function() {
    $(this).height($(this).prop('scrollHeight'));
});

文本区域现在是其内容的两倍高，底部有很多空白。

我尝试了很多其他帖子的代码，但没有成功。

有什么帮助吗？

Answer 1

我很困惑。您询问了 CKEditor，但是您的代码建议您使用 TinyMCE。它们是完全不同的编辑器，尽管它们都支持自动高度调整。

CKEditor

对于 CKEditor，您需要加载 autogrow 插件。可以在官方documentation了解更多

CKEDITOR.replace('editor', {
  extraPlugins: 'autogrow'
});

<script src="https://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>

<textarea id="editor"></textarea>

上面的sn-p运行有问题可以查看this fiddle。

TinyMCE

对于 TinyMCE，您需要加载 autoresize 插件。可以在官方documentation了解更多内容

tinymce.init({
  selector: '#editor',
  plugins: ['autoresize']
});

<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>

<textarea id="editor"></textarea>

上面的sn-p运行有问题可以查看this fiddle。