Question

由于它是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>

Answer 1

尝试以下

要实现此目的，请使用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

Answer 2

对于CKEditor 4.0，我不得不使用：

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

Answer 3

转到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的大小。

Answer 4

//这会有所帮助。它只适合我。

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

            });

</script>

Answer 5

这是一个jQuery函数，它使用cols =属性来调整ckeditor高度（每行20px的标量）

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

Answer 6

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

.cke_contents { height: 100% !important; }

source

希望有所帮助：）

Answer 7

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>

Answer 8

在ckeditor 4.5.5版本中

可以使用

强制更改高度

CKEDITOR.config.height ='800px';

Answer 9

CkEditor For Resize：

CKEDITOR.replace('OnThisDateIwillLook',
{
    toolbar: [['Bold', 'Italic', 'Underline'],],
    skin: 'v2',               
    extraPlugins: 'autogrow',
    autoGrow_minHeight: 250,
    //autoGrow_maxHeight: auto,
});

Answer 10

我努力在版本4.3.4中使用resize方法。

我做了一个黑客并在css下面使用： -

.cke_reset {width:807px !important; }

像魅力一样工作！

Answer 11

使用config更新样式

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

Answer 12

如其他答案所述，resize（）函数必须使用。对于那些想知道如何使用此代码的人editor.resize( '100%', '350' )，请参阅下文。

假设您为具有名称属性test的textarea创建编辑器。然后你可以像这样调用CKEditor实例上的resize（）函数：

CKEDITOR.instances.test.resize( '100%', '80');

Answer 13

回答这个问题是因为我花了很长时间才弄清楚如何使用jquery来解决这个问题。这与上面的一些答案类似，但包含要彻底的实例创建。

在我看来，这并不优雅，我不知道为什么CKeditor没有固定它的大小来自它的父容器，这将更加可取。

 var new_editor = $('#selected_textarea').ckeditor(function(){ 
      var set_editor_height = $('#parent_container').height()
      $('.cke_contents').css({ 'height': set_editor_height });
     });

此应该适用于类选择器，而不仅仅是ID。

Answer 14

CKEDITOR.config.width="80%";
CKEDITOR.config.height="500px"

Answer 15

editor.resize('100%', '350');
editor.resize('550', '350');

Answer 16

使用jQuery ckeditor，它最终听我说的唯一方法是使用一些黑客攻击：

    $('.ckeditor textarea').ckeditor(function () {
        editor = $('.ckeditor textarea').ckeditorGet();
        $('.cke_inner').css({ 'width': '802px' });
    });

Answer 17

要在初始化时设置CKEditor的高度，您可以按照列出的步骤进行操作。

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

Answer 18

这个是完美的。

<script type="text/javascript">
    CKEDITOR.replace('article-ckeditor',
    {
    height: '800px',
    });
</script>

Answer 19

如果你的编辑需要100％的身高;

setInterval(function(){ 
      $('#cke_1_contents').css('height', $('#parent_div_id').outerHeight());
}, 700);

Answer 20

首先，定义文本区域。

<textarea type="text" name="title" id="textEditor" required></textarea>

，然后在脚本标签中初始化ck编辑器。

<script type="text/javascript">
    CKEDITOR.replace('textEditor',
    {
       height: '800px'
    });
</script>

Answer 21

使用以下脚本代码在编辑器初始化后调整高度。

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => {
            editor.editing.view.change( writer => {
                writer.setStyle( 'height', '200px', editor.editing.view.document.getRoot() );
            } );
        } )
        .catch( error => {
                console.error( error );
        } );
</script>

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

21 个答案: