web-dev-qa-db-fra.com

Comment changer la taille de l'éditeur de CKEditor?

Comme il s’agit d’une zone de texte, j’ai essayé cols = "50" en attribut HTML mais cela ne fonctionne pas.

J'ai également trouvé la réponse à la question précédente. Il a dit que je pouvais le faire en ajoutant . CKEDITOR.instances.myinstance.resize(1000, 900); Cependant, la taille n'a toujours pas changé. 

Voici le code que j'ai essayé, merci.

Mis à jour 

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

essayez de suivre

Pour ce faire, utilisez la fonction resize pour définir les dimensions de l’interface de l’éditeur, en attribuant à la fenêtre une valeur de largeur et de hauteur en pixels ou en unités acceptées par CSS.

// Set editor width to 100% and height to 350px.
editor.resize( '100%', '350' )

Lors de la définition de la valeur de hauteur, utilisez le paramètre isContentHeight pour déterminer si la valeur s'applique à l'interface entière de l'éditeur ou à la zone d'édition.

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

Allez dans le dossier ckeditor et trouvez config.js

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

};

Cela redimensionnera votre ckeditor en fonction de la taille de l'écran.

14
Nere

Pour CKEditor 4.0, je devais utiliser:

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

// Cela aiderait. Cela fonctionne pour moi.

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

            });

</script>
8
user4709974

Voici une fonction jQuery qui utilise l'attribut cols = pour redimensionner la hauteur de ckeditor (scalaire de 20 pixels par ligne)

(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();
})

alors votre html comme celui-ci sera automatiquement redimensionné

<textarea name="body" class="ckeditor" rows="10"></textarea>
4
linojon

J'ai utilisé cette solution (CKeditor4):

.cke_contents { height: 100% !important; }

la source

J'espère que ça aide :)

4
Memonic

dans la version 4.5.5 de ckeditor 

peut forcer le changement de hauteur par l'utilisation

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

Utilisez config pour mettre à jour les styles

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

CkEditor Pour redimensionner:

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

J'ai eu du mal à utiliser la méthode de redimensionnement dans la version 4.3.4.

J'ai fait un hack et utilisé ci-dessous css: -

.cke_reset {width:807px !important; }

Travaillé comme un charme!

2
Wali

Répondre à cette question, car il m'a fallu une éternité pour comprendre comment résoudre ce problème en utilisant jQuery. Ceci est similaire à certaines réponses ci-dessus, mais contient la création d'instance pour être approfondie.

À mon avis, cela n’est pas élégant et je ne vois pas pourquoi CKeditor n’a pas la taille inhérente à la taille de son conteneur parent, ce qui serait bien plus souhaitable. 

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

Ceci devrait fonctionne pour les sélecteurs de classe, pas seulement par ID. 

1
rob

Comme indiqué dans d'autres réponses, la fonction resize () est ce qui doit être utilisé. Pour ceux qui se demandent comment utiliser ce code, editor.resize( '100%', '350' ), voir ci-dessous.

Supposons que vous créiez un éditeur pour une zone de texte avec le test d'attribut name. Ensuite, vous pouvez appeler la fonction resize () sur l’instance de CKEditor comme suit:

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

Celui-ci est parfaitement travaillé.

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

Commencez par définir la zone de texte.

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

puis dans la balise de script initialiser l'éditeur ck.

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

En utilisant jQueryckeditor, le seul moyen de m'écouter enfin consistait à utiliser un peu de bidouille:

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

Pour définir la hauteur de CKEditor au moment de l’initialisation, vous pouvez suivre la procédure indiquée.

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

Si vous avez besoin de 100% de hauteur pour votre éditeur;

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