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。它们是完全不同的编辑器，尽管它们都支持自动高度调整。

CK编辑器

对于 CKEditor，您需要加载autogrow插件。您可以在官方文档中了解更多信息

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

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

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

如果上面的代码片段无法运行，您可以查看这个小提琴。

微型MCE

对于 TinyMCE，您需要加载autoresize插件。您可以在官方文档中了解更多信息

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

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

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

如果上面的代码片段无法运行，您可以查看这个小提琴。