Új hozzászólás Aktív témák

• #374 Sk8erPeter nagyúr Siriusb #368

  Új Válasz 2013-01-20 11:48:49 #374

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Sk8erPeter

  nagyúr

  válasz Siriusb #368 üzenetére

  No, sorry, kicsit több lett, mint negyed óra, társaságom lett, aztán végül már nem volt energiám ezzel foglalkozni.

  Ami működőképes az átméretezésre, most modulból méretezek át, de ugyanezt meg lehetne tenni sminkből is (végül is sminkelési feladat inkább, mivel adott helyen szeretnéd átszabni, a megjelenésnek megfelelően, de a lényeg ugyanaz):

  /**
  * Implements hook_form_alter().
  */
  function testmodule_form_alter(&$form, &$form_state, $form_id) {
  
  // az after_build függvényben már megvannak az egyes elemek HTML id-jai (itt még nem)
  $form['#after_build'][] = 'testmodule_form_alter_after_build';
  
  }
  
  /**
  * Form after build function
  */
  function testmodule_form_alter_after_build($form, &$form_state) {
  $form_id = $form['#form_id'];
  
  switch ($form_id) {
  // most a példa kedvéért az Article content type formjánál fogom átszabni a CKEditor szélességét, magasságát
  case 'article_node_form':
  drupal_add_js(drupal_get_path('module', 'testmodule') . '/js/ckEditorResizing.behaviors.js', array('type' => 'file', 'scope' => 'footer', 'weight' => 100));
  
  // itt az Article content type body-jánál a summary-hez és a fő törzsszöveghez tartozó CKEditort fogom átméretezni!
  // a HTML id azért kell, mert a CKEDITOR.instances tömböt fogjuk felhasználni a JS-kódban, és ebben HTML id-k kulcsai szerint vannak meg az objektumok, a rá vonatkozó attribútumok és metódusok
  
  drupal_add_js(array(
  'testmodule' => array(
  'ckEditorResizing' => array(
  array(
  'id' => $form['body']['und'][0]['summary']['#id'],
  'width' => 400,
  'height' => 200
  ),
  array(
  'id' => $form['body']['und'][0]['value']['#id'],
  'width' => 300,
  // 'width' => '50%',
  'height' => 600
  )
  )
  )
  ), 'setting');
  
  break;
  }
  
  return $form;
  }

  Aztán a testmodule/js könyvtárban van egy
  ckEditorResizing.behaviors.js
  fájl, aminek a tartalma a következő:

  (function ($, Drupal) {
  
  Drupal.behaviors.ckEditorResizing = {
  
  attach: function (context, settings) {
  var self = this;
  
  // némi késleltetéssel kell átméretezni, miután inicializálódott
  window.setTimeout(function(){
  self.resizeCKEditor(context, settings);
  }, 600);
  },
  
  resizeCKEditor : function (context, settings) {
  if(settings['testmodule']['ckEditorResizing']){
  var ckEditorResizingData = settings['testmodule']['ckEditorResizing'];
  
  for(var i = 0; i < ckEditorResizingData.length; i++){
  var ckEditorInstance = CKEDITOR.instances[ckEditorResizingData[i].id];
  ckEditorInstance.resize(ckEditorResizingData[i].width, ckEditorResizingData[i].height);
  }
  }
  }
  };
  
  })(jQuery, Drupal);

  Ez csak szemléltetés, biztos lehetne ezen szépíteni (például elég ronda az a multidimenziós tömb valami rendes osztály helyett, de sajnos ezt a multidimenziós tömb szemléletet a 7-es Drupalban (valszeg még 8-asban is) elég sokszor alkalmazzák).

  A lényeg tehát, hogy a .resize() metódust hívjuk meg:
  http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#resize

  Vonatkozó cikk még:
  How Do I Change the Size of the Editor on the Fly?
  http://docs.cksource.com/CKEditor_3.x/Howto/Editor_Size_On_The_Fly

  Ha nem érthető, kérdezz.

Új hozzászólás Aktív témák