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

use*_*104 27 html javascript jquery ckeditor

由于它是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>
Run Code Online (Sandbox Code Playgroud)

Hem*_*lia 19

尝试下面

要实现此目的,请使用resize函数定义编辑器界面的尺寸,为窗口指定宽度和高度值(以像素为单位)或CSS接受的单位.

// Set editor width to 100% and height to 350px.
editor.resize( '100%', '350' )
Run Code Online (Sandbox Code Playgroud)

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

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

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


tom*_*eng 14

对于CKEditor 4.0,我不得不使用:

  CKEDITOR.replace('body', {height: 500});
Run Code Online (Sandbox Code Playgroud)


Ner*_*ere 14

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

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

};
Run Code Online (Sandbox Code Playgroud)

这将根据屏幕大小调整您的ckeditor的大小.


use*_*974 8

//这会有所帮助.它对我有用.

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

            });

</script>
Run Code Online (Sandbox Code Playgroud)

  • 关于你的答案的一些解释将有助于我们理解它. (3认同)

Mem*_*nic 5

我使用了这个解决方案(CKeditor4):

.cke_contents { height: 100% !important; }

来源

希望能帮助到你 :)


Cha*_*a K 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>
Run Code Online (Sandbox Code Playgroud)