README

TinyMCE rich text editor widget for the Yii 2 framework.

drop-in replacement for a textarea, works with ActiveForm or standalone
self-hosted by default (no API key, no CDN call), Tiny Cloud optional
four ready made presets, every tinymce.init() option still reachable
keeps the textarea in sync, so client side validation and ajax submits see the current content
survives pjax reloads

Installation

composer require rahulvenneers/yii2-tinymce

The editor itself comes from the tinymce/tinymce package and is published from vendor/ by the asset manager — nothing else to install.

Usage

With ActiveForm

use rahulvenneers\tinymce\TinyMce;

<?= $form->field($model, 'body')->widget(TinyMce::class) ?>

Standalone

echo TinyMce::widget([
    'name' => 'body',
    'value' => $body,
]);

Presets

Preset::SIMPLE, Preset::BASIC, Preset::STANDARD (default) and Preset::FULL set up the plugins and the toolbar for you. Only plugins bundled with the open source build are used, so every preset works with a self-hosted installation.

use rahulvenneers\tinymce\Preset;

<?= $form->field($model, 'body')->widget(TinyMce::class, [
    'preset' => Preset::FULL,
]) ?>

Custom options

clientOptions is merged over the preset, so you only describe what differs. Set 'preset' => null to start from an empty configuration. Every TinyMCE option is accepted, and callbacks are written as JsExpression:

use yii\web\JsExpression;

<?= $form->field($model, 'body')->widget(TinyMce::class, [
    'preset' => Preset::BASIC,
    'clientOptions' => [
        'height' => 600,
        'menubar' => false,
        'content_css' => Yii::getAlias('@web/css/editor.css'),
        'images_upload_url' => Url::to(['media/upload']),
        'init_instance_callback' => new JsExpression('function (editor) {
            console.log(editor.id + " is ready");
        }'),
    ],
]) ?>

The widget attaches its own setup callback to keep the textarea up to date; a setup of your own is still called right after it.

Textarea attributes

options goes to the generated textarea:

<?= $form->field($model, 'body')->widget(TinyMce::class, [
    'options' => ['rows' => 12, 'placeholder' => 'Tell us more…'],
]) ?>

Tiny Cloud

To load the editor from Tiny's CDN instead of the local copy:

<?= $form->field($model, 'body')->widget(TinyMce::class, [
    'useCloud' => true,
    'apiKey' => 'your-tiny-cloud-api-key',
    'cloudVersion' => '8',
]) ?>

Premium plugins are only available this way. Without an API key the editor runs in Tiny's evaluation mode and logs a warning.

Translations

TinyMCE ships with an English UI only. Download a language package, put it in your web directory and point the widget at it:

<?= $form->field($model, 'body')->widget(TinyMce::class, [
    'languageUrl' => '@web/js/tinymce-langs/de.js',
]) ?>

The language is taken from Yii::$app->language; override it with 'language' => 'de'.

Configuration reference

Property	Default	Description
`preset`	`Preset::STANDARD`	Preset the configuration starts from, `null` for none
`clientOptions`	`[]`	Settings merged over the preset and passed to `tinymce.init()`
`options`	`['class' => 'form-control', 'rows' => 6]`	HTML attributes of the textarea
`language`	`null`	UI language, defaults to `Yii::$app->language` when `languageUrl` is set
`languageUrl`	`null`	URL (or alias) of the language pack
`triggerSaveOnSubmit`	`true`	Flush every editor into its textarea on form submit
`useCloud`	`false`	Load TinyMCE from the Tiny Cloud CDN
`apiKey`	`'no-api-key'`	Tiny Cloud API key
`cloudVersion`	`'8'`	TinyMCE branch served by the CDN
`cloudUrl`	`null`	Full script URL, overrides `apiKey`/`cloudVersion`
`licenseKey`	`'gpl'`	`license_key` for self-hosted editors, required since TinyMCE 7
`assetBundle`	`TinyMceAsset::class`	Bundle providing the self-hosted distribution

Using a different TinyMCE distribution

Override the asset bundle to publish an npm or bower asset, or a build of your own:

'components' => [
    'assetManager' => [
        'bundles' => [
            'rahulvenneers\tinymce\TinyMceAsset' => [
                'sourcePath' => '@npm/tinymce',
            ],
        ],
    ],
],

Pjax

The widget removes an editor still attached to the same id before initialising a new one, so rendering a form inside Pjax needs no extra work.

Requirements

PHP 7.4 or newer
Yii 2.0.14 or newer

Testing

composer install
vendor/bin/phpunit

License

MIT, see LICENSE. TinyMCE itself is distributed under the GPL-2.0-or-later license unless you hold a commercial Tiny license.

rahulvenneers / yii2-tinymce

Package info

Security

Statistics