Emoticons plugin

Properties

Enabling distraction-free mode

To enable a basic distraction-free editor, use the following configuration.

The demonstration editor below is a distraction-free editor with some customizations.

The world’s first rich text editor in the cloud

Have you heard about Tiny Cloud? It’s the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They’re also ready for some exciting updates coming soon.

One of these enhancements is Tiny Drive: imagine file management for TinyMCE, in the cloud, made super easy. Learn more at tiny.cloud/tinydrive, where you’ll find a working demo and an opportunity to provide feedback to the product team.

An editor for every project

Here are some of our customer’s most common use cases for TinyMCE:

• Content Management Systems (e.g. WordPress, Umbraco)
• Learning Management Systems (e.g. Blackboard)
• Customer Relationship Management and marketing automation (e.g. Marketo)
• Email marketing (e.g. Constant Contact)
• Content creation in SaaS systems (e.g. Eventbrite, Evernote, GoFundMe, Zendesk)

And those use cases are just the start. TinyMCE is incredibly flexible, and with hundreds of APIs there’s likely a solution for your editor project. If you haven’t experienced Tiny Cloud, get started today. You’ll even get a free trial of our premium plugins – no credit card required!

For information on:

• Configuring a Quick Toolbar; including , , and ; see: Quick Toolbar plugin.
• Configuring a contextual toolbar, see: Context Toolbar.
• Configuring a contextual menu, see: Context Menu.
• Disabling the TinyMCE menubar, see: .
• The setting, see: .

Was this article helpful? —

Well, that’s awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can’t find what you’re looking for? Let us know.

Menu and Menu bar configuration

There are two menu options: and . is used to define the presence and order of menus, such as File, Edit, and View. is used to define the presence and order of menu items, such as New Document, Select all, and Source code.

To display the File, Edit, and View menus:

A simple menubar change.

To create an menu that only contains the Undo, Redo, and Select all items.

A modified Edit menu.

To create a menu titled “Happy”, provide an identifier for the menu and an object with the and for the menu.

For example:

A custom Happy menu.

The default menus are as follows:

• For information on the setting, see: .
• For information on the setting, see: .
• For a list of all available menu items, see: .

Removed & deprecated features

In TinyMCE 5.0, some configurations have been removed because they are no longer necessary or an improved solution has been introduced. Refer to the Migration Guide, for more information.

Listbox is no longer a supported toolbar button type in TinyMCE 5.0. Though listbox has been removed, any functionality provided by custom listbox toolbar buttons can be retained by switching to a different kind of toolbar button using the new methods. The recommended toolbar button type to switch to is the Split button.

The following plugins from TinyMCE 4.x do not require height or width options to be specified in TinyMCE 5.0:

• Code
• Codesample
• Preview
• Template

Refer to the Migration Guide, for more information.

Some UI configurations in TinyMCE 5.0 have changed due to an updated UI engine. Please see this of the Migration Guide for more information.

Options

Image Tools cannot work with images from another domains due to security measures imposed by browsers on so called cross-origin HTTP requests. To overcome these constraints, Cross-Origin Resource Sharing (CORS) must be explicitly enabled on the specified domain(s) (for more information check HTTP access control).

An array of supported domains for the images (with CORS enabled on them) can be supplied to TinyMCE via option.

Type:

This option can be used together with the option to allow credentials to be sent to the CORS host. This is not enabled by default since the server needs to have proper CORS headers to support this.

Type:

This option can be used to define a custom fetch function, which provides another way to access images in complex situations. The function will be passed the HTML element of the image to be fetched and should return a containing a representation of the image.

Type:

Another way of getting images across domains is using local server-side proxy. Proxy is basically a script, that will retrieve remote image and pipe it back to TinyMCE, as if it was local. Example of such proxy (written in PHP) can be found below.

Tiny Cloud subscription also includes proxy service written in Java. Check Install Server-side Components guide for details.

Type:

Example of a proxy.php script

The exact selection of buttons that will appear on the contextual toolbar can be controlled via option.

Possible Values:

Type:

Default Value:

Cloud Install

Include this line of code in the of your HTML page:

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a to .

In this example, let’s replace with a TinyMCE editor instance by passing the selector to .

When the is submitted the TinyMCE editor mimics the behavior of a normal HTML during the . In your form handler you can process the content submitted as if it had come from a regular .

There are a few things you need to consider when using Tiny Cloud. If you wish to use any local plugins (like MoxieManager for example) you need to load them using the new option.

Also, if you wish to use a custom language, you need to enter the location of the language file into the new option.

You may also want to select a specific version of the editor from Tiny Cloud and you should head on over to Specify editor & plugin versions for details on that.

API

Bower

If you’d like to install and build the source manually with Bower use these steps. This approach can be used when debugging or building custom plugins.

Include this line of code in the of your HTML page:

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a to .

In this example, let’s replace with a TinyMCE editor instance by passing the selector to .

When the is submitted the TinyMCE editor mimics the behavior of a normal HTML during the . In your form handler you can process the content submitted as if it had come from a regular .

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

The legacy mobile theme

The mobile experience provided for TinyMCE 4.7 through TinyMCE 5.0 has been deprecated as of TinyMCE 5.1.

To revert to the legacy mobile theme, add the mobile theme to the TinyMCE configuration, such as:

The plugins supported by legacy mobile theme are limited to the autosave, autolink, and lists plugins.

To add these plugins to the legacy mobile theme, add a plugin entry to the mobile section. For example:

The legacy TinyMCE theme mobile supports a subset of the toolbar items, which can configured using the setting, such as:

Below are the toolbar items supported for the legacy mobile theme, and the plugins/configuration required.

Was this article helpful? —

Well, that’s awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can’t find what you’re looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.

Подключаем RESPONSIVE filemanager к TiniyMCE

Если вы использовали настройку ЧПУ как описано здесь: .htaccess для Yii 2 advanced, то в корневом файле .htaccess после строки добавьте строку:

RewriteRule ^admin/plugins/(.*)$ backend/web/plugins/$1 

Так же, в корневой .htaccess добавим правило обращения к загруженным файла, после строки (19) RewriteRule ^images/(.*)$ frontend/web/images/$1 :

RewriteRule ^uploads/(.*)$ frontend/web/uploads/$1 
RewriteRule ^uploads_thumbs/(.*)$ frontend/web/uploads_thumbs/$1 

Теперь во view можно подключить TinyMCE с файловым менеджером:

<?php
//...
use dosamigos\tinymce\TinyMce;

//...
$form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]);

//..
echo $form->field($model, 'text')->widget(TinyMce::className(), ,
    'language' => 'ru',
    'clientOptions' => ,
        'toolbar' => 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | responsivefilemanager link image media',
        'external_filemanager_path' => '/admin/plugins/responsivefilemanager/filemanager/',
        'filemanager_title' => 'Responsive Filemanager',
        'external_plugins' => [
            //Иконка/кнопка загрузки файла в диалоге вставки изображения.
            'filemanager' => '/admin/plugins/responsivefilemanager/filemanager/plugin.min.js',
            //Иконка/кнопка загрузки файла в панеле иснструментов.
            'responsivefilemanager' => '/admin/plugins/responsivefilemanager/tinymce/plugins/responsivefilemanager/plugin.min.js',
        ],        
    ]
]);

Теперь в TinyMCE появился файловый менеджер и кнопка загрузки изображения в диалоговом окне:

Файловый менеджер находится по пути «Вставить => Insert file» или с помощью сочетания горячих клавиш Ctrl + E.

Дополнительные настройки tinyMCE

Чтобы путь к картинкам сохранялся как абсолютный, а не относительный, т.е. от корня сайта добавим параметр relative_urls в массив clientOptions:

echo $form->field($model, 'text')->widget(TinyMce::className(), ,
    'language' => 'ru',
    'clientOptions' => ,
        'toolbar' => 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | responsivefilemanager link image media',
        'external_filemanager_path' => '/admin/plugins/responsivefilemanager/filemanager/',
        'filemanager_title' => 'Responsive Filemanager',
        'external_plugins' => [
            //Иконка/кнопка загрузки файла в диалоге вставки изображения.
            'filemanager' => '/admin/plugins/responsivefilemanager/filemanager/plugin.min.js',
            //Иконка/кнопка загрузки файла в панеле иснструментов.
            'responsivefilemanager' => '/admin/plugins/responsivefilemanager/tinymce/plugins/responsivefilemanager/plugin.min.js',
        ],
        'relative_urls' => false,
    ]
]);

Чтобы уменшить код подключения TinyMCE и RESPONSIVE filemanager можно настройки подключать глобально. Для этого откройте файл /backend/config/bootstrap.php и вставьте следующий код:

<?php
Yii::$container->set('dosamigos\tinymce\TinyMce', ,
    'clientOptions' => ,
        'toolbar' => 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | responsivefilemanager link image media',
        'external_filemanager_path' => '/admin/plugins/responsivefilemanager/filemanager/',
        'filemanager_title' => 'Responsive Filemanager',
        'external_plugins' => [
            'filemanager' => '/admin/plugins/responsivefilemanager/filemanager/plugin.min.js',
            'responsivefilemanager' => '/admin/plugins/responsivefilemanager/tinymce/plugins/responsivefilemanager/plugin.min.js',
        ],
        'relative_urls' => false,
    ]
]);

Теперь во view подключайте TinyMCE следующим образом:

<?= $form->field($model, 'text')->widget(TinyMce::className()); ?>

Вот и все, приятной работы с TinyMCE и файловым менеджером RESPONSIVE filemanager в Yii2.

Для тех кто использует Yii2 basic подключение TinyMCE и файлового менеджера для загрузки изображений и файлов используя данную инструкцию не составит особого труда.

NPM

Include this line of code in the of your HTML page:

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a to .

In this example, let’s replace with a TinyMCE editor instance by passing the selector to .

When the is submitted the TinyMCE editor mimics the behavior of a normal HTML during the . In your form handler you can process the content submitted as if it had come from a regular .

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

Устанавливаем редактор TinyMCE

Установим TinyMCE с помощью composer, для этого открываем консоль, переходим в папку с проекотм и вводим команду для установки:

composer require 2amigos/yii2-tinymce-widget:~1.1

После установки можем использовать, пример:

<?php

//...
use dosamigos\tinymce\TinyMce;

//...
$form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]);

//..
echo $form->field($model, 'text')->widget(TinyMce::className(), ,
    'language' => 'ru',
    'clientOptions' => ,
        'toolbar' => 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
    ]
]);

Вот что получим:

По умолчанию работа с изображениями в TinyMCE выглядит так:

Для удобной загрузки файлов и картинок добавим расширение RESPONSIVE filemanager для TinyMCE:

И так, приступим.

The world’s first rich text editor in the cloud

Have you heard about Tiny Cloud? It’s the first step in our journey to help you deliver great content creation experiences, no matter your level of expertise. 50,000 developers already agree. They get free access to our global CDN, image proxy services and auto updates to the TinyMCE editor. They’re also ready for some exciting updates coming soon.

One of these enhancements is Tiny Drive: imagine file management for TinyMCE, in the cloud, made super easy. Learn more at tiny.cloud/tinydrive, where you’ll find a working demo and an opportunity to provide feedback to the product team.

An editor for every project

Here are some of our customer’s most common use cases for TinyMCE:

• Content Management Systems (e.g. WordPress, Umbraco)
• Learning Management Systems (e.g. Blackboard)
• Customer Relationship Management and marketing automation (e.g. Marketo)
• Email marketing (e.g. Constant Contact)
• Content creation in SaaS systems (e.g. Eventbrite, Evernote, GoFundMe, Zendesk)

Related configuration options

For information on:

• Configuring a Quick Toolbar; including , , and ; see: Quick Toolbar plugin.
• Configuring a contextual toolbar, see: Context Toolbar.
• Configuring a contextual menu, see: Context Menu.
• Disabling the TinyMCE menubar, see: .
• The setting, see: .

Was this article helpful? —

Well, that’s awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can’t find what you’re looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.

NuGet

Include this line of code in the of your HTML page:

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a to .

In this example, let’s replace with a TinyMCE editor instance by passing the selector to .

When the is submitted the TinyMCE editor mimics the behavior of a normal HTML during the . In your form handler you can process the content submitted as if it had come from a regular .

When using package managers you might have local TinyMCE add-ons in your project such as plugins or language packs. Load these from your project location rather than from inside the package using these configuration options:

Commands

The Image Tools plugin provides the following JavaScript commands.

Examples

Was this article helpful? —

Well, that’s awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can’t find what you’re looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.

Commands

The Table plugin provides the following JavaScript commands.

Examples

Advanced Config Options

Developers can add custom filtering before and after PowerPaste’s filters are run using the pre-filtering and post-filtering callbacks. These can be added as init options or at runtime using event listeners.

This setting allows you to run custom filtering on the content from the clipboard before it is run through PowerPaste’s filters. The callback is passed two arguments: the PowerPaste plugin instance and an object containing event data. This object contains:

• Standard paste event data.
• — A string containing the content to be pasted.
• — A string indicating whether PowerPaste is in , , or mode.
• — A string indicating which kind of filtering PowerPaste will run based on the source of the content. This will return , , , , , , , or .

Example TinyMCE configuration:

This setting allows you to run custom filtering on the pasted content after it is run through PowerPaste’s filters. The callback is passed two arguments: the PowerPaste plugin instance and an object containing event data. This object contains:

• Standard paste event data.
• — A DOM node containing the DOM structure of the filtered paste content.
• — A string indicating whether PowerPaste is in , , or mode.
• — A string indicating which kind of filtering PowerPaste will run based on the source of the content. This will return , , , , , , , or .

Example TinyMCE configuration:

Custom paste filtering can also be configured at runtime using event listeners.

• is equivalent to
• is equivalent to

The event listeners are passed the same data objects as their equivalent configuration options. The event listener callbacks can be configured or changed at any time as long as you have a reference to the Editor API.

Example TinyMCE configuration:

Plugins

The following section covers the changed and removed plugin features for TinyMCE 5.

The and settings have been removed from plugin dialogs. The dialog component now uses CSS3 and a predefined , , and template to specify the dimensions.

The following plugins from TinyMCE 4 do not require height or width options in TinyMCE 5:

• Code
• Codesample
• Preview
• Template

These features have either changed or have been deleted in TinyMCE 5.

The Context menus are part of the core and enabled by default in TinyMCE 5. TinyMCE 5 supports adding registered menu items and allows plugins to register “sections” of the context menu. These sections show or hide depending on the cursor position when the context menu is opened.

For information on using context menus and the default context menu configuration, see: UI components — Context menu.

For information on Context Menus, see UI components — Context menu.

has been updated to remove a legacy format for the callback, which accepted a mapping object of misspelled words to suggestions. For example:

The callback now requires the mapping object to be wrapped in an object with the key, such as:

For information on the setting, see:

Changes between TinyMCE 4 and TinyMCE 5:

• The text field for Styles have been removed from the advanced tab of the dialogs. This simplifies the dialogs for users and gives the editor a stricter control over the table styles, which ensures that the styles are valid.

• When opening a properties dialog with a single table, row, or cell selected, the dialog will autofill with the relevant existing values. When multiple rows or cells are selected:

  • If the selected rows or cells have the same values, TinyMCE 5 automatically fills the dialog values.
  • If the fields have no existing value or have different values, the dialog fields are left empty.
• The input field in the table properties dialog is now called .

Was this article helpful? —

Well, that’s awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can’t find what you’re looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.

Self-Hosted Install

If you’d rather download and install the script manually, get the package from TinyMCE Downloads.

Unzip the package and move the directory into a web accessible location on your web server (for example, ).

Include this line of code in the of your HTML page:

With the script included, initialize TinyMCE on any element (or elements) in your web page.

Since TinyMCE lets you identify replaceable elements via a CSS selector, all you need do is pass an object that contains a to .

In this example, let’s replace with a TinyMCE editor instance by passing the selector to .

When the is submitted the TinyMCE editor mimics the behavior of a normal HTML during the . In your form handler you can process the content submitted as if it had come from a regular .

С этим читают

• Long time no see
• Ckeditor
• Смайлики из символов
• Image resizing made easy with php
• Postcss-loader
• Api reference
• Что такое консоль wordpress и как в ней ориентироваться
• Class yii\grid\actioncolumn
• Переход на v4
• Таблицы oracle