Code Blog

Displaying 1-2 of 2 results.
2016/04/28 CSS

I had some problems with image flicker when changing background images. Found this tips at stackoverflow how to preload images in CSS, works very well. Just add more urls to preload more images.

body:after
{ 
 display:none; 
 content: url(path/to/image.jpg) url(path/to/image2.jpg); 
}
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