how can I load tinymce 4 in modal window?

Question

I have a form in cakephp.. I am opening it in a modal window whih extends jquery. Now I have loaded tinymce in my form but it is not loading in modal. tinymce.js is loading. even its all settings are also loading properly. Can anyone suggest What can be problem ?

Thanks

Answer 1

I have this problem too.. I'm using bootstrap modal box and use the plugin for open multi-modal

I'm use this code Helper : http://bakery.cakephp.org/articles/jwilcox09/2012/01/04/adding_a_tinymce_image_browser_to_cakephp_2

In the controller i use this code :

public function add() { if ($this->RequestHandler->isAjax()) { $this->layout = 'modal'; }

    if ($this->request->is('post')) {
        $this->Post->create();
        if ($this->Post->saveAll($this->request->data, array('deep' => true))) {
            $this->Session->setFlash(__('The post has been saved.'));
            return $this->redirect(array('action' => 'index'));
        } else {
            $this->Session->setFlash(__('The post could not be saved. Please, try again.'));
        }
    }
    $users = $this->Post->User->find('list');
    $this->set(compact('users'));
}

In the index view i use this code

از این قسمت میتوانید یک پست تازه وارد سایت کنید

Js->link(__('پست تازه'), array('action' => 'add'), array( 'update' => '#ajax-modal', 'htmlAttributes' => array('id' => 'EzafKardan', 'class'=>'modalBarGozar btn btn-primary btn-lg', 'data-toggle'=>'modal') )); ?>

$(function(){

$.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner = 
  '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
    '<div class="progress progress-striped active">' +
      '<div class="progress-bar" style="width: 100%;"></div>' +
    '</div>' +
  '</div>';

$.fn.modalmanager.defaults.resize = true;

$('[data-source]').each(function(){
  var $this = $(this),
    $source = $($this.data('source'));

  var text = [];
  $source.each(function(){
    var $s = $(this);
    if ($s.attr('type') === 'text/javascript'){
      text.push($s.html().replace(/(\n)*/, ''));
    } else {
      text.push($s.clone().wrap('<div>').parent().html());
    }
  });

  $this.text(text.join('\n\n').replace(/\t/g, '    '));
});

  }); </script>

var $modal = $('#ajaxKhabari'); $('.modalBarGozar').on('click', function(){ var link = $(this).attr("href"); $('body').modalmanager('loading'); setTimeout(function(){ $modal.load(link, '', function(){ $modal.modal(); }); }, 1000); });

in the modal layout i add the link for tinymce.js and also add to defoult layout and other layout

I'm try everything but did not work...