newtinymce Follow @yiiframework

Extension to use TinyMce with Compressor, SpellChecker and FileManager

CSRF token validation problem, for spellchecker requsts

Almost in every application, i have need in wysiwyg editor for content. In most of them I have used tinymce extension writen by MetaYii(with some ugly changes, added by me, to connect elFinder file manager to it).

Recently I have written my own widget for TinyMce and for elFinder with possibility of integrating them. Also I have written separate actions for TinyMce compessor and for spellchecker plugin. So i think that my code looks more cleaner than something like tinymceelfinder extension, that has similar functionality.

Also I have added less ugly skin for tinyMce(modified version of cirkuitSkin).

Requirements ¶

Tested with Yii 1.1.10, but should work with previous versions too
To use with elFinder, requires https://bitbucket.org/z_bodya/yii-elfinder

Usage ¶

Checkout source code to ext.tinymce
To use spellchecker and compressor, create controller and add corresponding actions to it
Use it as any other input widget:
More about elFinder extension here: https://bitbucket.org/z_bodya/yii-elfinder

// controller for tinyMce
Yii::import('ext.tinymce.*');
 
class TinyMceController extends CController
{
     public function actions()
     {
          return array(
              'compressor' => array(
                    'class' => 'TinyMceCompressorAction',
                    'settings' => array(
                       'compress' => true,
                            'disk_cache' => true,
                        )
                    ),
                    'spellchecker' => array(
                        'class' => 'TinyMceSpellcheckerAction',
               ),
          );
      }
}
 
// in view
$this->widget('ext.tinymce.TinyMce', array(
    'model' => $model,
    'attribute' => 'tinyMceArea',
    // Optional config
    'compressorRoute' => 'tinyMce/compressor',
    //'spellcheckerUrl' => array('tinyMce/spellchecker'),
    // or use yandex spell: http://api.yandex.ru/speller/doc/dg/tasks/how-to-spellcheck-tinymce.xml
    'spellcheckerUrl' => 'http://speller.yandex.net/services/tinyspell',
    'fileManager' => array(
        'class' => 'ext.elFinder.TinyMceElFinder',
        'connectorRoute'=>'admin/elfinder/connector',
    ),
    'htmlOptions' => array(
        'rows' => 6,
        'cols' => 60,
    ),
));

CSRF token validation problem, for spellchecker requsts ¶

By default Yii validates csrf token for all requsts, but spellchecker has requst content-type "application/json" - so even if we pass csrf token in request, yii will not validate it.

Forum discussion about this

Also there is no need in csrf validation for spellchecker service, so possible solutions is to skip validation for such requests. I order to do so we need to extend CHttpRequst like in sample below:

class HttpRequest extends CHttpRequest
{
    public function validateCsrfToken($event)
    {
        $contentType = isset($_SERVER["CONTENT_TYPE"]) ? $_SERVER["CONTENT_TYPE"] : null;
        if ($contentType !== 'application/json')
            parent::validateCsrfToken($event);
    }
}

And add it into application configuration:

// application components
'components' => array(
    'request' => array(
       'class' => 'HttpRequest',
       'enableCsrfValidation' => true,
    ),
    ...
),

Changelog ¶

December 12, 2012 Updated spellchecker(Version 2.0.6.1 - Fixed security issue with google spellchecker)
November 24, 2012 Added spellcheckerUrl as replacement for spellcheckerRoute property. Now external spellchecking services can be used(thanks fad comment).
Novemner 20, 2012 Upgrade TinyMCE to version 3.5.8
September 25, 2012 Upgrade TinyMCE to version 3.5.7
August 3, 2012 Replace content.css in circuit skin by default one
August 2, 2012 Fixed bug when using attribute with "[]" in name.
July 27, 2012 Upgrade TinyMCE to version 3.5.6
July 21, 2012 Upgrade TinyMCE to version 3.5.5
July 18, 2012 Fixed bug with large compessor response time

Resources ¶

Total 18 comments

#13014

Bogdan Savluk at 2013/04/28 01:08pm

re: onchange_callback

Just add 'js:' prefix:

'settings' => array(
    'onchange_callback' => 'js:function(editor){
        alert(editor.id);
    }'
)

#13001

Jales Monteiro at 2013/04/27 10:25am

onchange_callback

how can I use onchange_callback ?

I try:

'settings' => array(
    'onchange_callback'=>'function(editor){
        alert(editor.id);
    }'
)

but nothing happens

#12934

Jales Monteiro at 2013/04/21 09:13pm

more one thing

I think need one function like 'reinit' to init again with the sames settings than the init :)

#12644

tihanyilaci at 2013/04/03 07:12am

Great extension

Hi Bodya,

nice extension again. I experienced a bootstrap conflict with yii's tinymce extension and I tried this. The conflict has amazingly gone. Excellent work! Grat! So I've tried the galleryManager before and that have been also great like this one again.

Best Regards Laszlo from Hungary

#11656

matthew3 at 2013/01/25 06:57am

Not save field content

Works well with tinymce and elfinder, but not save fields content. Anyone, any ideas?

#11156

Interboy at 2012/12/20 12:08am

Spell check

Spell check function does not work well in lii site. Language is Vietnamese. Anyone help me?

Btw, this is very good extension. I recommend. (Better than Tinymce original/FCK Editor)

#10797

Bogdan Savluk at 2012/11/24 01:13pm

Re: SpellChecker

@fad, thanks for that idea - I have updated extension, now external spell checkers can be used.

#10796

fad at 2012/11/24 11:31am

SpellChecker

TinyMce.php, line 105

$this->settings['spellchecker_rpc_url'] = Yii::app()->createUrl($this->spellcheckerRoute);

If i use external spelling, like URL http://speller.yandex.net/services/tinyspell in config (http://api.yandex.ru/speller/doc/dg/tasks/how-to-spellcheck-tinymce.xml Url is mysite.ru/http://speller.yandex.net/services/tinyspell need to check spellcheckerRoute - external or internal route....

#10617

Bogdan Savluk at 2012/11/08 06:29am

Re: spell/compressor broken with csrf

Compressor will work(it works by get request).

Originally tinymce spellchecker plugin does not support CSRF protection, so, by now, my widget does not support it too. ASAP, I will try to fix this. Thanks for report.

#10611

Cstdenis at 2012/11/08 12:28am

spell/compressor broken with csrf

Spell check (and I think compressor) do not work if you have csrf validation enabled (which everyone should) because it does not send the crsf token.

#9482

Bogdan Savluk at 2012/08/15 08:37am

Re: js file

Url is normal - it is not url to script, it is url to compressor action which will concatenate and compress all scripts requested in action params.

After i have removed all routing rules from url manager - I have the same url as you have, - no errors, everything works.

#9481

Proctophantasmist at 2012/08/15 07:05am

js file

I'm probably missing something… The js file is not correctly referred to, au far as I can see. Here is the link that is generated in the page where I put the widget:

<script type="text/javascript" src="/tinyMce/compressor/plugins/autolink%2Clists%2Cpagebreak%2Cstyle%2Clayer%2Ctable%2Csave%2Cadvhr%2Cadvimage%2Cadvlink%2Cemotions%2Ciespell%2Cinlinepopups%2Cinsertdatetime%2Cpreview%2Cmedia%2Csearchreplace%2Cprint%2Ccontextmenu%2Cpaste%2Cdirectionality%2Cfullscreen%2Cnoneditable%2Cvisualchars%2Cnonbreaking%2Cxhtmlxtras%2Ctemplate%2Cadvlist%2Cspellchecker/themes/advanced/languages/fr/files/jquery.tinymce/src/false"></script>

Note: I got the source by cloning the repository

#9118

Bogdan Savluk at 2012/07/21 05:42pm

Re: connectorRoute

This is part of configuration for fileManager integration. In example above it is for my elFinder extesion. You can read how to configure it on extension page.

#9117

m1m1m1 at 2012/07/21 04:58pm

connectorRoute

Please, could you let me know what is this: 'connectorRoute'=>'admin/elfinder/connector', How should I setup it?

#9007

Bogdan Savluk at 2012/07/12 09:00am

Re: settings

Replace 'ext.tinymce.TinyMce' in your config with 'TinyMce'.

In widgets property for widgetFactory you should use class name as a key for widget configuration not alias for it.

#9006

fad at 2012/07/12 08:43am

settings

I write in protected/config/main.php

'widgetFactory'=>array(
            'widgets'=>array(
                'ext.tinymce.TinyMce'=>array(
                    'language' => 'en',
                    'settings' => array(
                        'language'=>'en',
                        'width'  => '100%',
                    ),
                ),
            ),
        ),

But there is no change in tinymce What can I do?

#9004

Bogdan Savluk at 2012/07/12 08:20am

Re: settings

Settings are the same as for original script.

About where to set - your can pass them as any other params, when rendering widget. Also you can set some default settings for your application widgets in widgetFactory configuration

#9003

fad at 2012/07/12 07:10am

settings

How-to or where to set $settings declared var in TinyMce.php?

/** @var array Widget settings will override defaultSettings */
    public $settings = array();

Please login to leave your comment.