web-dev-qa-db-ja.com

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>
javascriptjqueryhtmlckeditor
27
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

19
Hemant Metalia

CKEditor 4.0では、次を使用する必要がありました。

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

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のサイズが変更されます。

14
Nere

//これは助けになります。

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

            });

</script>
8
user4709974

Cols =属性を使用してckeditorの高さ（行あたり20pxのスカラー）のサイズを変更する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>
4
linojon

私はこのソリューション（CKeditor4）を使用しました。

.cke_contents { height: 100% !important; }

ソース

それが役に立てば幸い ：）

4
Memonic

ckeditorバージョン4.5.5

使用により高さを強制的に変更できます

CKEDITOR.config.height = '800px';

3
Magara Maungchareon
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>
3
Chaitanya K

configを使用してスタイルを更新します

editor.config.width="100%";
editor.config.height="100px"
2
Vipul Bhatt

サイズ変更用のCkEditor：

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

バージョン4.3.4では、サイズ変更メソッドの使用に苦労しました。

私はハックをし、CSSの下で使用しました：-

.cke_reset {width:807px !important; }

魅力のように働いた！

2
Wali

Jqueryを使用してこれを解決する方法を見つけるのに私が永遠にかかったので、これに答えます。これは上記のいくつかの回答に似ていますが、徹底的なインスタンス作成が含まれています。

私の意見では、これはエレガントではなく、CKeditorが親コンテナのサイズであることが本質的ではない理由がわかりません。

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

このshouldは、IDだけでなく、クラスセレクターでも機能します。

1
rob

他の回答で述べたように、resize（）関数を使用する必要があります。このコードがどのように使用されるのか疑問に思っている人はeditor.resize( '100%', '350' )以下を参照してください。

名前属性テストを使用してテキストエリアのエディターを作成するとします。次に、CKEditorのインスタンスで次のようにresize（）関数を呼び出すことができます。

CKEDITOR.instances.test.resize( '100%', '80');
1
MaVRoSCy
CKEDITOR.config.width="80%";
CKEDITOR.config.height="500px"
1
kartikmaji

初期化時にCKEditorの高さを設定するには、以下の手順に従ってください。

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

これは完全に機能します。

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

まず、テキスト領域を定義します。

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

そして、scriptタグでckエディターを初期化します。

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

jQueryckeditorを使用して、最終的に私に耳を傾ける唯一の方法は、ちょっとしたハックを使用することでした。

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

エディターに100％の高さが必要な場合;

setInterval(function(){ 
      $('#cke_1_contents').css('height', $('#parent_div_id').outerHeight());
}, 700);
0
Erdogan
editor.resize('100%', '350');
editor.resize('550', '350');
0
priya786