Modx visual editor. My installation of the TinyMCE editor. Friendly CKEditor with file manager KCFinder

One of the most popular addons for MODX Revolution is visual editor TinyMCE.

Vono and zrozumilo, it is rare that any site can do without a good richtext editor for content.

This article shows that the setup of the TinyMCE editor is installed.

Installed

To install, you need to download the package from the repository (http://modx.com/extras/package/TinyMCE) and install it through the "Packaging" distribution of your site.

After installing the package, you can immediately open a resource for editing and reconsider when the editor shows up.

You can now start writing in a new text, for a more comfortable writing, it is recommended to change the editor.

Customizing TinyMCE includes a few steps:

• Connecting to a style file
• Adding buttons for working with tables

Connect file with styles up to TinyMCE

It is necessary for the visual editor to have the text look one-on-one, like on the site: font, size and color of the text, design of pictures and old look table.

Select "Setting up the system" and select "Visual editor" in the filter:

Whom was given a total of 5 patches:

• Path to CSS file (editor_css_path)- specify the path to the file with text styles. Please pay attention to not the latest css file of your site, but an okremy file, in which only styles can be blamed, which can be directly seen before the text design (headings h1-h6, paragraph p, letter a, tables tables and others). The editor is more practical and correct.
• Vikoristati text editor(use_editor)- you can turn on the editor for an hour if necessary, without seeing TinyMCE.
• Editor (which_editor)- MODX Revolution allows you to install a few different editors on the site, you can switch between them for consumption. Before speech, you can change the setting for site administrators, recognizing a different editor as such a rank for different administrators.
• Element editor (which_element_editor)- specify editor for snippets, plugins, chunks. For example, you can either use CodeMirror or Ace.

Adding buttons to TinyMCE for working with tables

TinyMCE, which installs from the MODX Revolution repository, has table work enabled for locking reasons. Hey, wee, you can obviously switch to HTML mode and write the code manually, but here we go! It is rather simpler to show 2 quills and turn on the support of the table.

From the same time, we have to adjust the system, and in the first filter we choose tinymce:

A list of available parameters is displayed. Us tsіkavlyat 2:

• tiny.custom_plugins- Transfer of plug-ins to TinyMCS. In the last list, it is necessary to add " table", connecting the sim plug-in to work with tables. The plugin comes at once from TinyMCE, and you don’t need to install it, you just need to turn it on.
• tiny.custom_buttons3- List of buttons that appear on the 3rd row. Enter there tablecontrols", having added the dialing of buttons to work with tables. I realized that these buttons can be placed on any other row. As you marvel at the other rows, see the list of embedded buttons, such as undo, redo, selectall and many others. You can "play" them by arranging the buttons in a different order.

Shvidshe for everything, after the update MODX Evolution systems you do not use the TinyMCE text editor. The axis of the yak picture I have on all updated sites:

1. Please add a plug-in from here.

2. Rosarchive.

3. Fill in the ckeditor folder in the folder assets/plugins/

4. Create a plugin ckeditor

5. Copy in new place ckeditor.tpl

Put checkboxes in the system sub-pods OnRichTextEditorInit, OnRichTextEditorRegister and OnInterfaceSettingsRender

6. Enable CKEditor

You can enable CKEditor in Tools>Configuration>Interface and Data, at the graph " Editor:" select CKEditor

7. We go into any document and Bachimo such a picture

8. Friendly CKEditor with file manager KCFinder

Schob editor competently pratsyuvav z file manager KCFinder replaces this code in a file /assets/plugins/ckeditor/functions.php:

$mcpuk_path["base"] = MODX_BASE_URL . "manager/media/browser/mcpuk/browse.php";// . $cke_query; $mcpuk_path["image"] = $mcpuk_path["base"] . "?type=images"; $mcpuk_path["flash"] = $mcpuk_path["base"] . "?type=flash"; $mcpuk_path["link"] = $mcpuk_path["base"] . "?type=files";

9. I have chosen my own folder of the buttons I need

In the file /assets/plugins/ckeditor/modx_config.js you can change the location, see or add buttons. For myself, I chose this combination.

Who cares, you can replace a row of code:

Config.toolbar_modx = [ ["Source"], ["Bold","Italic","Underline","Strike","-","Subscript","Superscript"], ["PasteText","PasteFromWord"] , ["Undo","Redo","-","Find","-","RemoveFormat"], "/", ["NumberedList","BulletedList","-","Outdent","Indent ","Blockquote"], ["JustifyLeft","JustifyCenter","JustifyRight"], ["Link","Unlink","Anchor"], ["Image","Flash","Table","HorizontalRule" ","Smiley","SpecialChar"], "/", ["Format","Font","FontSize"], ["TextColor","BGColor"], ["Maximize", "ShowBlocks","- ","About"] ];

Config.toolbar_simple = [ ["Source","-","Maximize","RemoveFormat"], ["PasteText","Find","Replace"], ["Link","Unlink"], ["Image ","SpecialChar"], ["Format"], "/", ["Bold","Italic","Underline","Strike","-","Subscript","Superscript"], ["TextColor ","BGColor"], ["NumberedList","BulletedList","-","Blockquote"], ["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"]];

Here I've filled in just a few things: Text code, Zbіshuvach (to write more clearly), formatting text, Insert only text, Search and Change, Possilannya, Insert image, Symbols, Headings, Text attributes, color text and background, paragraphs, quote that blurring the text.

Installing add-on plugins

CKeditor has a bunch of different plugins. You can find them on the Internet and on the official website of CKeditor. All plugins are installed in the /manager/assets/components/ckeditor/ckeditor/plugins/ folder.

Dali in the "System settings" select "ckeditor" and in the add-on plugins field ( extra_plugins) insert the name of the plugin that is being installed. And in the group of buttons ( toolbar) is inserted in the required field "im'ya plug-in". The add-on is installed and ready to work.

The MODX Revolution shards are shipped empty and in order to run the site, I can say with 99% confidence that you will happen to install it if you want to add one more thing. package. At zv'azku іz tsim I virіshiv write a small list of packages, like a fortune to become a god when creating sites on MODX Revo solution.

(article updated on 02/11/2018)

Extension from the main modx repository

Ace- matching code for pid hour editing templates, chunks, snippets + wake-ups emmet.

TinyMCE Rich Text Editor- a nice visual editor for content, but it can also be expanded for rahunok additional functions marvel at the retailer's website.

filetranslit- change to Latin when capturing files from Cyrillic (for example: capturing a picture with names (name) modx-plugin.png(when transferring to the site, such image names will change into goats and stop being displayed), a file with names will be uploaded to the admin modx-plugin.png.

translit- Transliteration of aliases for pages (url) - required for .

FormIt- work with forms (construction of contact forms, no matter how foldable).

Collections- grouping of documents (resources) - more great sites, de categories rich in documents - help to expand (speed up) the admin panel, because If you have a larger resource tree, it's more buggy.

simpleUpdater- Update modex in 1 click.

SEO Pro- SEO Helper! Revisiting the field of watering – title, description, adding focus keyword(keywords) and show how the sides will look in the search view.

Image SEO alt and title tags- automatically submits alt and title for the image, as it is not registered. Carefully zastosovuvat on a working site, you can halt the deaks, if you go through CODE

Gallery– image galleries

migx- Duzhe cool river! Viewing a lot of TV content, you can create a slider, a gallery for example.

simplesearch- Organization of a search on the site.

Tagger- Tags for records, hmara tags.

ClientConfig- Creation of client nalashtuvan, yakі nadalі can be edited by managers. Tobto. everything that is often changed is entered into the new one, or just contacts, addresses, slogan, etc. - sob the zamovnik zmіg everything is easy to change that shvidko.

Inherit Template- Insert template for child elements.

Version X- A component for quiet hto viddaє sites for additional support for freelancers, well, maybe for newcomers. Assignments for creating local backups of all elements - (chunks, snippets, resources). You can marvel old version and for the need for clarification її. I also allow you to recognize who made those changes.

Console– allows PHP code to be run from the backend.

AjaxManager- Prompt admin robots.

Captcha- Captcha for entering the admin panel - dodatkovy zakhist.

backupMODX- Creation of backups from a working site in 1 click.

logPageNotFound-Lag 404 pardons. Vіdmіnno pіdhodit for vіdstezhennya posilan.

cacheClear – allows you to delete all /core/cache/ folders with one click.

Addition from modstore.pro repository

About those, how to connect the addendum repository, read.

Ajax Form- Enforcement of contact forms without third party re-engagement, via Ajax. Vikoristovu FormIt, but in fact you can enter your own snippet.

DateAgo- Accept date formatting like CMS LiveStreet.

autoRedirector- I create a 301 redirect automatically, so you can create a redirect manually.

Tickets- creation of a blog, form a commentary, remarks toschoo.

Jevix- according to the type of doctor, which is installed on the automatic Tickets

mixedImage- Change file extension (replacement of additional field (for pictures, attachment and others))

pdoTools- tsiliy harvester, to the warehouse of which enter the following snippets:
pdoResources- appointments for us in front of the list of resources, but for help, you can do more than a lot of things: site map (for people), photo galleries, portfolio, case studies of resources.
pdoMenu- Menu creation.
pdoPage- how and pdoRecources to display a list of resources + create post-link navigation, including a selection of other snippets.
pdoCrumbs- for making bread crumbs (bread crumbs)
pdoUsers- Vivedennya koristuvachіv
pdoSitemap- Creation of auto generated sitemap.xml
pdoNeighbors- display forward and forward documents (correct for blogs, articles, etc.)
pdoField- display the field assigned to the resource or yogo dad, including the TV parameters.
pdoTitle— assignments for visual visibility of documents from post-store navigation.
pdoArchive— viewing the archive of documents on the site with breakdown by day, month and year
parser- Change the processing of tags on the side.
Tse, maybe, the most necessary package, without a new normal site, you can’t pick it up. The same wine adds the support of the Fenom template engine, which is better than the old one.

miniShop2- Creation of an online store.

BannerY- Component for displaying banners (advertising). On the new one, in fact, it is easy to implement a slider.

phpThumbOn- miniatures for images (viewing images from need rosemary).

MinifyX– minification and gluing of scripts and styles in two files (css and js) – allows you to change the number of inputs and increase the speed of the sides.

xPoller2- Multimodal experience.

AdminTools- Change color scheme admins, select elements, notes, authorization in the admin via email or otherwise.

frontendManager— Editing the sides from the frontend.

dbAdmin – looking at the listing of the database table from the MODx Revo admin panel. It also allows you to viroblyat export like a creme tables, and all bases. You can also see and clean up the tables (be careful with your victories) and viroblyat different SQL queries.

modDevTools – quick search and replacement of elements in a chunk, snippets.

debugParser – Search for specific areas on the website.

tagElementPlugin – allows you to edit snippets or chunks of the visual tag and pressing the ctrl+enter keys.

controlErrorLog – add an icon on the top menu bar to notify you about the availability of pardon journal entries.

Universal plugins

— automatic squeezing of pictures on any sites, the service is paid, but її expensive, from the start you are given 10mb - їх stitching on a stalk about 500 pictures - what to stitch for a business card, so you can dodatkovo take up to 200mb free of charge.

I try to try CKEditor as a visual code editor. Version 4.0 has a neutral black and white theme (also suitable for the MODx admin panel) and some new features (evaluating the insertion of paragraphs in the “important” space).

You can't tweet as a front-end editor.
Pratsyuє Ctrl + S, as well as inserting a message, or budding resources (iframe) and files (img, audio, video). You just need to see the text and throw the editor in the required Resource/File.

At customizations, you can change the color ui, skin, add your plugins and change the order and dialing of the panel buttons.

Specify the functions that are daily - I will try to implement them.

Installation via package manager.
On the vіdminu vіd TinyMCE, more money

Plan dіy:

Add trim to richtext TV parameters
- Button Vibrate on the server in dialogue dialogues(Integration with MODX File Browser)
- Improved: extraPlugins, disableObjectResizing, keruvannya format posilan, select skin
- Menu for the hour of dragging files and resources: Retrieve object | Insert message | Insert the name of the object (it would be cool, as it would be possible to drag it through the right and through the left button of the mouse (like in Windows))
- Defend modx-tags
- New buttons (insert tags, edit attributes too)
- List of classes from parsed style tables.
- Improvement of systemic adjustments from the edited context (at the same time, problems with messages)
- Keyboard settings daily.
- Plugin typography - autochange paws, def_sіv just on the fly.
- See more pictures for help copy / paste and drag "n" drop
- Auto-submission (parsing and viewing) of modx tags, as far as possible and as far as possible (may show up as a brown widget, which is expanded by the CKSource team)
- Inline editing from the frontend.

Chet is a great list of viishas. You need to change your fantasies.

Instructions for installing add-on plugins:
We know the required plugin, for example, we throw it into a folder /manager/assets/components/ckeditor/ckeditor/plugins/, Idemo in systemic adjustment, the range of names is chosen ckeditor, prescribe our plugin extra_plugins(through whom, like a sprat), we gave it right toolbar, entering a new button (like є). Update the form of editing the resource - recheck the result. I propagate sharing with cіkavimy plugins.

Add-on plugins (not included before the package):
oEmbed - Allows you to embed content (video, photo, audio, frames) from different servers, making it even harder. List of great services, supported by YouTube, Vimeo, Flickr, Instagram, GitHub, Twitter, JSFiddle and more time-consuming services.

History of changes:

CKEditor 1.1.1

- Fixed AjaxManager summation
- Add plugins: youtube, wordcount, autocorrect
- The menu has been seen, as if the hour is being pulled from the tree. Now the force is simply inserted. Just drag the picture - insert the picture.
- Support IE8

CKEditor 1.1.0
====================================
- Browser integration MODx files
- Support richtext TV
- Support for custom resource classes (Articles for ex.)
- Improved drag "n" drop. Now you can just drop pictures from the File tree to insert them into the content.
- after Ctrl+S
- Option extra_plugins (Additional plugins)
- Option skin (Change skins)