Code Blog

Displaying 1-1 of 1 result.
2016/02/15 Yii,CSS

Wanted to update my TinyMCE editor to be able to upload images directly in the browser. So updated the TinyMCE (using the "newtinymce" extension for TinyMCE 4 and "elfinder" extension).

Some things needed changing.

The attribute is the model field that stores the text for the editor.

The "connectorRoute" default set to 'admin/elfinder/connector' made me a bit confused. I guess this means I should have an AdminController to control access for this functions. But the documentation only specified adding an ElfinderController.

The elfinder is a file manager extension to TinyMCE as it doesn't support file uploads out of the box.

I had some problems that the "file upload" got hidden behind the other popup dialog boxes. I solved it by this hack, probably not the best solution ..

elfinder.full.js in extensions/elfinder/assets/js I added:

$('.el-finder-dialog').css( { 'z-index': '10000000'} );

after the append(..).dialog(..) call in the upload function definition (line 2106 in the source file).

But the better way is to add it to the CSS file. First I had to create a CSS for the specific item's views.

To include the CSS add the code below to the view files:

$baseUrl = Yii::app()->baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerCssFile($baseUrl.'/css/codeblog.css');

Codeblog.css:

div.el-finder-dialog
{
    z-index: 10000000;
}

Things left to do:

  • Compressor
  • Spellchecker

Links for Yii extensions:

NewTinyMCE www.yiiframework.com/extension/newtinymce/
Elfinder www.yiiframework.com/extension/elfinder/

I'm currently running Yii version 1.1.16