如何更改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的编辑器大小？

回答

相关问题