Emoticons plugin

Properties

name type summary defined by
$ tinymce.dom.DomQuery Dom query instance. tinymce
DOM tinymce.dom.DOMUtils Global DOM instance. tinymce
PluginManager tinymce.AddOnManager Global PluginManager instance. tinymce
ScriptLoader tinymce.dom.ScriptLoader Global ScriptLoader instance. tinymce
ThemeManager tinymce.AddOnManager tinymce
activeEditor tinymce.Editor Currently active editor instance. tinymce
baseURI tinymce.util.URI Absolute baseURI for the installation path of TinyMCE. tinymce
baseURL String Base URL where the root directory if TinyMCE is located. tinymce
documentBaseURL String Document base URL where the current document is located. tinymce
editors Object Collection of editor instances. Deprecated use tinymce.get() instead. tinymce
i18n Object Collection of language pack data. tinymce
majorVersion String Major version of TinyMCE build. tinymce
minorVersion String Minor version of TinyMCE build. tinymce
releaseDate String Release date of TinyMCE build. tinymce
suffix String Current suffix to add to each plugin/theme that gets loaded for example «.min». tinymce

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.

Setting Description
Owing to the enhancements to the new inline toolbar behaviour, is not required in TinyMCE 5.0.
Owing to the changes in the menus and removal of the property, is not required in TinyMCE 5.0. Refer to the for a workaround.
Removed event Description
BeforeRenderUi Fired before the UI was rendered.

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

Name Arguments Description
insertTable columns: number, rows: number Insert a table with the given number of columns and rows at the current cursor location
getClipboardCols   Returns the data for any columns cut or copied using or . > Note: This feature is only available for TinyMCE 5.4 and later.
setClipboardCols cols: HTMLTableRowElement[] Set the data to be used by or for pasting columns into a table. (A column as a series of cells. One or more cells from each row in the selection). > Note: This feature is only available for TinyMCE 5.4 and later.
getClipboardRows   Returns the data for any rows cut or copied using or
setClipboardRows rows: HTMLTableRowElement[] Set the data to be used by or for pasting rows into a table.

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.

Name Function Plugins Required Configuration
undo Undo operation    
redo Redo operation    
bold Bold formatting operation    
italic Italic formatting operation    
underline Underline formatting operation    
link Insert / Edit a hyperlink    
unlink Remove an existing hyperlink    
image Insert an image    
bullist Insert an unordered list lists  
numlist Insert an ordered list lists  
fontsizeselect Change the font size    
forecolor Apply a foreground color    
styleselect Apply a custom style  
removeformat Removes any inline formatting    

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.

Command Description
mceEditImage Opens the image tools editing dialog.
mceImageRotateRight Rotates selected image 90 degrees clockwise.
mceImageRotateLeft Rotates selected image 90 degrees counter clockwise.
mceImageFlipVertical Flips selected image vertically.
mceImageFlipHorizontal Flips selected image horizontally.

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.

Command Description
mceTableSizingMode When is set to , this command sets the sizing mode of the currently selected table. For information on table sizing modes, see: . > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableApplyCellStyle Applies the specified styles to the selected cells. The following styles can be changed with this command: , , , and . Providing an empty value for a style will remove the style, such as . > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableSplitCells Splits the current merged table cell.
mceTableMergeCells Merges the selected cells.
mceTableInsertRowBefore Inserts a row before the current row.
mceTableInsertRowAfter Inserts a row after the current row.
mceTableInsertColBefore Inserts a column before the current column.
mceTableInsertColAfter Inserts a column after the current column.
mceTableDeleteCol Deletes the current column.
mceTableDeleteRow Deletes the current row.
mceTableCutRow Cuts the current row to the TinyMCE clipboard.
mceTableCutCol Cuts the current column to the TinyMCE clipboard. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableCopyRow Copies the current row to the TinyMCE clipboard.
mceTableCopyCol Copies the current column to the TinyMCE clipboard. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTablePasteRowBefore Paste the TinyMCE clipboard row before the current row.
mceTablePasteRowAfter Paste the TinyMCE clipboard row after the current row.
mceTablePasteColBefore Paste the TinyMCE clipboard column before the current row. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTablePasteColAfter Paste the TinyMCE clipboard column after the current row. > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableDelete Deletes the current table.
mceInsertTable Opens the insert/edit table dialog or inserts a table without using a dialog if additional arguments are provided (see examples below).
mceTableProps Opens the Table Properties dialog.
mceTableRowProps Opens the table row properties dialog.
mceTableCellProps Opens the table cell properties dialog.
mceTableRowType Changes the current row or rows to the specified type, either: , , or . The structure of header rows is dependent on the . > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableColType Changes all cells in the current column or columns to the specified type, either: or . > Note: This feature is only available for TinyMCE 5.4 and later.
mceTableCellType Changes the current cell or cells to the specified type, either: or . > Note: This feature is only available for TinyMCE 5.4 and later.

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
TinyMCE 4 TinyMCE 5

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

Plugin name Description
ContextMenu Context menus are now part of the TinyMCE core. For information on adding custom context menus, see: UI components — Context menu.
TextColor The text color functionality is now part of the TinyMCE core. For information on using and customizing the text color settings, see: .
ColorPicker The color picker is now part of the TinyMCE core and is enabled by default. For information on disabling the custom color picker, see: .

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.

New method Description
Adds a custom 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 .


С этим читают