Add-ons (plugins, packages) for MODX Revolution. Installing the CKEditor text editor (TinyMCE alternative) on MODX Evolution Inserting multiple images tinymce modx revo
Today in the MODX telegram channel they wrote that the TinyMCE Rich Text Editor doesn’t do this and doesn’t do that. Some people failed to configure it, for some it produced errors, etc. The question of choosing an editor arose for me as soon as I switched to MODX (which, let me remind you, happened not so long ago, about 8 months ago). The task was one: to make it simple, convenient and multifunctional editor content. I played around with the regular TinyMCE, played around with ckeditor, played around with the TinyMCE Rich Text Editor and decided to pick the last one.
I don’t want to start a holivar about which editor is better. I'm sharing ready-made solution working and multifunctional editor. And which one to choose is of course up to you.
Story
The setup did not take much time; customizing the editor and embedding took much more time required functions. But fortunately, I still know how to Google a little and found several useful topics among English-language resources, with the help of which I was able to implement the editor that we will eventually get.The assembly went without errors.
Installation
1) You can download the auto-installer from my newly created Git repository.2) The installation process is very simple - drop the file tinymcerte-1.0.0-beta.transport.zip into ../core/packages/ and look for the package locally through the installer. Next we just install it. The auto-installer will set the settings itself.
3) In the /files/TinyMCERTE-settings/ folder, you can find a small readme.txt and the typograf plugin, which should be placed in the editor plugins folder (read about this in readme.txt). That's all - the editor is ready to use.
Caveats and revisions
1) I tested this auto-installer on a clean site and a site without an installed editor. I don’t know how and what will happen if you install it on a site that already has an editor (Ace doesn’t count).2) It would be nice to automatically place the typograf folder in required section, but my knowledge is not enough to implement this idea. If someone wants to help, that would be cool. I will post the sources of this auto-installer in the same repository today, but later in the evening.
4) To check spelling, the editor uses the yandex.speller service. You can find the service settings in the file ../assets/components/tinymcerte/tinymcerte/js/external-config.json. Spellchecker TinyMCE supports a huge number of languages for checking. Whereas yandex.speller only 3 (Russian, Ukrainian, English).
Most likely after the update MODX Evolution systems The TinyMCE text editor is not working for you. This is the picture I have on all the updated sites:
1. Download the plugin from here.
2. Unzip.
3. Fill the ckeditor folder into the folder assets/plugins/
4. Create a plugin ckeditor
5. Copy the contents from ckeditor.tpl
Check the system events “OnRichTextEditorInit”, “OnRichTextEditorRegister” and “OnInterfaceSettingsRender”
6. Enable CKEditor
You can enable CKEditor in Tools>Configuration>Interface and Presentation, in the column " Editor:" choose CKEditor
7. We go into any document and see this picture
8. Let's make friends with CKEditor and the KCFinder file manager
For the editor to work correctly with file manager KCFinder replace this code in the file /assets/plugins/ckeditor/functions.php:
$mcpuk_path["base"] = MODX_BASE_URL . "manager/media/browser/mcpuk/browser.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";
$mcpuk_path["base"] = MODX_BASE_URL . "manager/media/browser/mcpuk/browse.php";// . $cke_query ;
$mcpuk_path["image"] = $mcpuk_path["base"] . "?type=images";
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 left only what I needed: Source, Enlarger (to make it easier to write), text formatting, Insert text only, Search and Replace, Links, Insert images, Symbols, Headings, Text attributes, text and background color, paragraphs, quote and text justification.
Installing additional plugins
CKeditor has a lot of interesting 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.
Next, in “System settings” select “ckeditor” and in the additional plugins field ( extra_plugins) insert the name of the plugin to be installed. And in groups of buttons ( toolbar) insert the “plugin name” in the right place. The add-on is installed and ready to use.
Because MODX Revolution initially comes empty and in order for the site to work, I can say with 99% certainty that you will have to install at least one add-on - plastic bag. In this regard, I decided to write a small list of packages that will be useful to many when creating websites on MODx Revolution.
(article updated 02/11/2018)
Additions from the main modx repository
Ace- code highlighting when editing templates, chunks, snippets + built-in emmet.
TinyMCE Rich Text Editor- nice visual editor for content, can be expanded with additional functions, see the developer's website.
filetranslit- renames files from Cyrillic to Latin when loading (for example: upload a picture with a name (title) modx-plugin.png(when the site is transferred, such picture names will turn into goats and stop being displayed)), a file with the name will be uploaded to the admin panel modx-plugin.png.
translit– transliteration of aliases for pages (url) – required for .
FormIt- working with forms (creating contact forms any complexity).
Collections- grouping of documents (resources) - more for large sites where there are many documents in categories - helps to relieve (speed up) the admin panel, because if you have a huge resource tree, it will start to glitch.
simpleUpdater- Modex update in 1 click.
SEO Pro- SEO assistant! Checks the length of fields – title, description, adds focus keyword(keywords) and shows how the pages will look in search results.
Image SEO alt and title tags- automatically substitutes alt and title for images if they are not specified. Use with caution on a production site, it may break some outputs that go through CODE
Gallery– image galleries
migx- very cool thing! Displaying several TVs in the content, you can create a slider, gallery, etc.
SimpleSearch– organization of site search.
Tagger- tags for posts, tag cloud.
ClientConfig- Creation client settings, which managers will be able to edit in the future. Those. We enter into it everything that changes frequently, or just something, for example, contacts, address, slogan, etc. – so that the customer can change everything easily and quickly.
Inherit Template— sets the template for child elements.
VersionX– a component for those who hand over sites for improvement to freelancers, or perhaps even beginners. Designed to create local backups of all elements (chunks, snippets, resources). You can see old version and, if necessary, restore it. It also allows you to find out who made certain changes.
Console– allows you to run PHP code from the backend.
AjaxManager— acceleration of the admin panel.
Captcha– captcha for logging into the admin panel – additional protection.
backupMODX– creating backups from a working website in 1 click.
logPageNotFound– log 404 errors. Great for tracking broken links.
cacheClear – allows you to delete everything from the /core/cache/ folder with one click.
Additions from the modstore.pro repository
Read about how to connect an additional repository.
AjaxForm- Sending contact forms without reloading the page, via Ajax. Uses FormIt, but in fact you can specify your own snippet.
DateAgo- Nice date formatting like CMS LiveStreet.
autoRedirector- creates 301 redirects automatically, you can also create redirects manually.
Tickets- creating a blog, commenting forms, reviews, etc.
Jevix- something like a typograph, installed on the Tickets machine
mixedImage- mixed file upload (replacement of an additional field (for pictures, attachments, etc.)
pdoTools- a whole combine, which includes the following snippets:
pdoResources- is intended primarily to display a list of resources, but in fact, you can use it to create a lot of interesting things: a site map (for people), photo galleries, portfolios, cases from resources, etc.
pdoMenu- menu creation.
pdoPage- like pdoRecources, displays a list of resources + creates page navigation, including from a selection of other snippets.
pdoCrumbs- for creating bread crumbs
pdoUsers— user output
pdoSitemap— creating an auto-generated sitemap.xml
pdoNeighbors— displays previous and next documents (useful for blogs, articles, etc.)
pdoField— displays any field of the specified resource or its parent, including TV parameters.
pdoTitle— designed to visually distinguish documents with page navigation.
pdoArchive— output of an archive of site documents broken down into days, months and years
Parser— intercepts the processing of tags on the page.
This is perhaps the most necessary package; without it you cannot build a normal website. Moreover, it adds support for the Fenom template engine, which is faster than the built-in one.
miniShop2- creation of an online store.
BannerY- Component for managing banners (advertising). It is essentially easy to implement a slider on it.
phpThumbOn- thumbnails for images (displaying images from the right sizes).
MinifyX– minification and merging of scripts and styles into two files (css and js) – allows you to reduce the number of requests and increase page loading speed.
xPoller2— Multilingual surveys.
AdminTools– change the color scheme of the admin panel, favorite elements, notes, authorization in the admin panel via email, etc.
frontendManager— Editing pages from the frontend.
dbAdmin – viewing the listing of database tables from the MODx Revo admin panel. It also allows you to export both a separate table and the entire database as a whole. It can also delete and clear tables (be careful when using it) and produce various kinds of SQL queries.
modDevTools – quick search and replacement of elements in chunks and snippets.
debugParser – Finding bottlenecks on the site.
tagElementPlugin – allows you to edit snippets or chunks by selecting its tag and pressing the ctrl+enter key combinations.
controlErrorLog – adds an icon to the top menu bar that indicates the presence of entries in the error log.
Universal plugins
— automatic compression of images on any site, the service is paid, but not expensive, from the start you are given 10 MB - this is enough to compress about 500 images - which is enough for any business card, you can also get up to 200 MB additionally for free.
One of the most popular add-ons for MODX Revolution is the TinyMCE visual editor.
This is understandable; it’s rare that a site can do without a good richtext editor for content.
This article covers installing and configuring the TinyMCE editor.
Installation
To install, you need to download the package from the repository (http://modx.com/extras/package/TinyMCE) and install it through the "Manage Packages" section of your website.
After installing the package, you can immediately open any resource for editing and make sure that the editor appears.
You can immediately start writing text in it, but for more comfortable use we recommend setting up the editor.
Setting up TinyMCE will involve several steps:
- Connecting the styles file
- Adding buttons for working with tables
Connecting the style file to TinyMCE
This is necessary so that in the visual editor the text looks the same as on the website: font, size and color of the text, design of pictures and appearance tables.
Open "System Settings," and in the filter select "Visual Editor":
There are a total of 5 settings available in this section:
- Path to the CSS file (editor_css_path)- specify the path to your file with text styles. Please note that do not use full css your website file, and separate file, which contains only styles directly related to the design of the text (headings h1-h6, paragraphs p, links a, tables tables and others). The editor will work faster and more correctly.
- Use a text editor (use_editor)- you can disable the editor for a while if necessary, without deleting TinyMCE.
- Editor (which_editor)- MODX Revolution allows you to install several different editors on your site, and you can switch between them if necessary. By the way, you can override this setting for site administrators, thus assigning different editors to different administrators.
- Editor for elements (which_element_editor)- specify an editor for snippets, plugins, chunks. For example, it could be CodeMirror or Ace.
Adding buttons to TinyMCE for working with tables
In TinyMCE, which is installed from the MODX Revolution repository, for some reason work with tables is disabled by default. No, of course you can switch to HTML mode and write the code manually, but why! It is much easier to spend 2 minutes and enable table support.
So, open the system settings, and in the first filter select tinymce:
A list of available options will open. We are interested in 2:
- tiny.custom_plugins- list of connected plugins to TinyMCS. You must add " table", thereby connecting a plugin for working with tables. The plugin comes with TinyMCE and does not need to be installed, you just need to enable it.
- tiny.custom_buttons3- list of buttons displayed on the 3rd line. Indicate there " tablecontrols", thereby adding a set of buttons for working with tables. It is clear that these buttons can be placed on any other line. If you look at the other lines, you will see a list of preset buttons such as undo, redo, selectall and many more. You can “play” with them by placing the buttons in different orders.
Almost every webmaster uses one or another visual editor (WYSIWYG) to post content on the site. Visual editors not only allow you to work with HTML as with plain text in a text editor, but also have functionality that makes life easier for a webmaster. However, the latter can not only simplify life, but also complicate it.
In MODX Revolution I mainly use the TinyMCE editor, which is installed as a separate package. I won’t talk about its advantages and disadvantages, but today I will only touch on those points that I use to make working with it easier.
Default settings
Immediately after installing the TinyMCE package, I check the tinymce block in the system settings:
Tiny.forced_root_block make it empty tiny.path_options should be empty tiny.base_url should be empty
I also change the convert_urls option to No in the TinyMCE plugin settings. I do this so that the editor does not try to change the links that I set.
Connecting the styles file
I don’t always connect it, but sometimes it’s useful and makes working with the content easier. This is done by specifying the editor_css_path system setting in the block system settings Rich-Text Editor setting Path to CSS file CSS file) or.
HTML5 tags
To be honest, I didn’t manage to include HTML5 tags and process them wisely. So I went the route of allowing any tags by adding to the file core/components/tinymce/templates/script.tpl after line after line
Tiny.config =modx->toJSON($this->properties); ?>;
Tiny.config.valid_elements = "*[*]";
Which allows the passage of any tags. For those who want to get confused, this variable can be assigned a list of all possible HTML tags, including HTML5 tags from the xconfig.js file included in the package.