如何更改CKEditor的編輯器大小？

由於它是一個textarea，我在html屬性中嘗試了cols =「50」，但它不起作用。如何更改CKEditor的編輯器大小？

另外，我找到了上一個問題的答案。他說我可以通過添加來做到這一點。 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>

來源

2012-04-03 user782104

嘗試以下

爲了實現這一點，使用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

來源

2012-04-03 09:06:52

謝謝。但是，我需要修改什麼文件？你介意解釋一下嗎？ – user782104 2012-04-03 09:18:07

參考jsfiddle http://jsfiddle.net/lathan/mxuNz/ – 2012-04-03 09:20:39

Thx再次，是否有必要有一個outter纔可以改變大小？ – user782104 2012-04-03 09:29:04

在其他的答案中所述的調整大小（）函數是必須使用的。對於那些想知道如何使用代碼editor.resize('100%', '350')的人，請看下面。

假設您爲name屬性爲test的textarea創建編輯器。然後，你可以呼籲CKEditor的像這樣的情況下調整大小（）函數：

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

來源

2013-04-24 06:00:25 MaVRoSCy

對於CKEditor的4.0，我不得不使用：

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

來源

2013-05-10 00:30:47

Resize函數在4.x版本中仍然存在，請參閱http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-resize。因此Blaze-Core的[answer]（http://stackoverflow.com/a/9990208/2049986）也適用於4.x版本。 – 2015-03-19 07:47:15

這工作，很容易，謝謝。 – 2015-10-23 21:16:33

也爲我工作。謝謝 – 2016-03-29 15:55:28

下面是一個使用的cols一個jQuery功能=屬性來調整CKEditor的高度（每行20像素的標量）

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

來源

2013-08-31 14:05:54 linojon

使用jQueryckeditor，它最終會聽我的唯一方法是使用一個黑客位的：

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

來源

2013-12-19 00:55:57

我用這個解決方案（CKeditor4）：

.cke_contents { height: 100% !important; }

source

希望它有幫助:)

來源

2014-02-12 13:07:37 Memonic

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

我做了黑客及以下CSS使用： -

.cke_reset {width:807px !important; }

工作就像一個魅力！

來源

2014-06-15 05:22:43 Wali

使用config更新樣式

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

來源

2014-06-25 20:18:44

是的，這工作多數民衆贊成在 CKEDITOR.replace（'editor1'）; CKEDITOR.config.width =「100％」; CKEDITOR.config.height =「700px」 – 2015-08-20 10:46:33

只要到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。

來源

2014-12-20 09:50:30 Nere

這是爲我工作的人！謝謝 – Roubi 2015-11-27 23:27:14

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

來源

2014-12-20 10:06:12 priya786

//這會幫助，它只對我有效。

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

      }); 

</script>

來源

2015-03-25 01:24:55 user4709974

關於你的答案的一些解釋會幫助我們理解它。 – 2015-03-25 01:37:30

終於有人給出了合理的答案。沒有別的工作，但這。那麼可能有其他人，但他們太想我想嘗試。謝謝！！！ – Macainian 2016-10-31 02:48:59

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>

來源

2015-08-20 10:48:04

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

來源

2015-10-10 20:35:24 kartikmaji

在CKEditor的版本4.5.5

可通過使用

CKEDITOR.config.height = '800像素' 強制改變高度

;

來源

2015-11-19 08:30:06

配置選項似乎並沒有爲我工作（雖然不能解釋爲什麼 - 這是我的錯誤），但是這只是在CKEDITOR.replace調用後完美工作。 – PaulD 2017-05-07 10:13:26

回答這個，因爲我花了永遠找出如何解決這個使用jQuery。這與上面的一些答案類似，但是包含實例創建是徹底的。

在我看來，這不是優雅的，我不知道爲什麼CKeditor不是固有的它的大小從它的父容器，這將是更加可取的。

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

這應爲類選擇工作，而不是僅僅通過ID。

來源

2016-10-06 19:06:03 rob

CKEDITOR調整大小：

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

來源

2016-12-12 14:45:43

要在初始化時設定的CKEditor的高度，你可以按照上市程序。

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

來源

2017-05-29 12:59:39

這是一個完美的工作。

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

來源

2018-01-02 02:58:45

如何更改CKEditor的編輯器大小？

回答

相關問題