如何更改CKEditor编辑器的大小？

Question

如何更改CKEditor编辑器的大小？

javascriptjqueryhtmlckeditor

28

由于它是一个文本区域（textarea），我尝试在HTML属性中使用cols="50"，但它不起作用。

此外，我从以前的问题中找到了答案。他说我可以通过添加以下内容来实现： CKEDITOR.instances.myinstance.resize(1000, 900); 然而，尺寸仍然没有改变。

这是我尝试过的代码，谢谢。

更新

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script src="../plugin/jquery-1.6.1.min.js"></script>
    <script src="../plugin/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../plugin/ckeditor/ckeditor.js"></script>

    <script>
$(document).ready(function(){   
$("#addlist").validate();
var editor = CKEDITOR.replace('editor1');
var div = document.getElementById('editor');
editor.resize($(div).width(),'900');
}); 
    </script>
</head>
<body>
    <form method="post" action="confirm.php">
        <p><br />
        <div id="editor">
            <textarea id="editor1" name="editor1">
            </div>
            <? if (isset($_GET['file']))
            {$filepath=$_GET['file']; 
                require_once("../template/".$filepath);}?> </textarea>
        </p>
        </br>
            File Name </br>
            <b>(Naming Without .html e.g. MyTemplate1) :</b>
            </br>
            <input id="tname" name="tname" class="required" />

            <input type="submit" />

        </p>
    </form>
</body>
</html>

- user782104

22个回答

15

只需转到 ckeditor 文件夹并找到 config.js

    CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
     config.height = '80vh';

};

这将根据屏幕尺寸调整您的ckeditor大小。

- Nere

14

对于 CKEditor 4.0，我必须使用：

  CKEDITOR.replace('body', {height: 500});

- tommy chheng

调整大小功能在4.x版本中仍然存在，请参见http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resize。因此，Blaze-Core的答案（https://dev59.com/SWkw5IYBdhLWcg3wUIxW#9990208）也适用于4.x版本。 - Jacob van Lingen

也适用于我。谢谢。 - Moxet Khan

这个可以正常工作，但我收到了一个已被废弃的警告。 - Keutelvocht

8

//这会有所帮助。这对我来说很有效。

<script>
            CKEDITOR.replace( 'editor1', {
                uiColor: '#14B8C4',
                toolbar: [
                    [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
                    [ 'FontSize', 'TextColor', 'BGColor' ]
                ],
                width:['250px']

            });

</script>

- user4709974

3

一些关于您答案的解释会帮助我们理解它。 - Martin Serrano

终于有人给出了一个明智的答案。除了这个以外，其他什么也没有起作用。可能还有其他方法，但它们对我来说太繁琐了，我不想尝试。谢谢！ - Macainian

5

我使用了这个解决方案（CKeditor4）:

.cke_contents { height: 100% !important; }

希望它有所帮助 :) source

- Memonic

5

Yes this worked perfectly We have to use config to override the styles



    <textarea  rows="1000" id="editor1" name="newsletter"></textarea>
    <script>
    CKEDITOR.replace('editor1');
    CKEDITOR.config.width="100%";
    CKEDITOR.config.height="700px"
    </script>

- Chaitanya K

4

这是一个使用cols属性来调整ckeditor高度（每行20像素的标量）的jQuery函数。

(function($) {
jQuery.fn.cke_resize = function() {
   return this.each(function() {
      var $this = $(this);
      var rows = $this.attr('rows');
      var height = rows * 20;
      $this.next("div.cke").find(".cke_contents").css("height", height);
   });
};
})(jQuery);

CKEDITOR.on( 'instanceReady', function(){
  $("textarea.ckeditor").cke_resize();
})

那么您的HTML就会自动调整大小

<textarea name="body" class="ckeditor" rows="10"></textarea>

- linojon

3

在 CKEditor 版本 4.5.5 中，可以通过以下方式强制更改编辑器的高度：

CKEDITOR.config.height = '800px';

- Magara Maungchareon

配置选项似乎对我无效（尽管无法解释原因 - 这让我很困扰），但在CKEDITOR.replace调用之后，它完美地运行了。 - PaulD

3

您可以按照以下步骤在初始化时设置CKEditor的高度。

<script>
       CKEDITOR.replace( 'editor1',{
          height:['500px']
       });
</script>

- Kapil Kumar

哇，CKEDITOR文档中没有提到这是v4.6的方法。谢谢！ - Mark Carpenter Jr

2

请使用config更新样式

editor.config.width="100%";
editor.config.height="100px"

- Vipul Bhatt

是的，这个有效，那就是<textarea rows="1000" id="editor1" name="news"></textarea> CKEDITOR.replace('editor1'); CKEDITOR.config.width="100%"; CKEDITOR.config.height="700px" - Chaitanya K

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hemant Metalia · Accepted Answer

请尝试以下操作

为了实现这一点，使用resize函数定义编辑器接口的尺寸，将窗口分配一个像素或CSS可接受的单位的宽度和高度值。

// Set editor width to 100% and height to 350px.
editor.resize( '100%', '350' )

在设置高度值时，使用isContentHeight参数来决定该值是应用于整个编辑器界面还是仅适用于编辑区域。

// The height value now applies to the editing area.
editor.resize( '100%', '350', true )

http://docs.cksource.com/CKEditor_3.x/Howto/Editor_Size_On_The_Fly