One of my customers came along, to whom I promised: “You will be able to edit content very easy.” - Isn’t it the User Experience Guarantee we always give to our users?
Login into the backend from your Joomla installation Go to Extensions - Plugins and search for TinyMCE once found edit the plugin Inside the TinyMCE option you can find a setting called 'Template CSS Classes'. Keep noted that you can have different TinyMCE sets here, so you need to perform the following for the correct set!
Well… I should have checked this first myself from the user perspective - I mean from the perspective of a user without any html knowledge.
How do I activate the Paste Plugin of TinyMce Editor? If I go to Plugin Manager/Editor - TinyMce/Advanced. 2.5 (Supporteres indtil 31. TinyMCE editor It is a WYSIWYG Editor, which is similar to a word processor interface where we can edit the contents of the article. First Row − They appear on the top of the Editor page and contain a group of related commands. Edit − Undo, Redo and Cut, Copy, Paste, Select all. The TinyMCE toolbar Over the versions, CKEditor sticked to same kind of default user interface, a user interface designed for those who like clean and modern-looking user interfaces. Jgive joomla extension. This consistency helped the software to build a loyal user base and makes the tool attractive to businesses and professional environments.
The customer I am talking about, is running a travel blog, where he writes logs from his trips all over the world, with a lot of images. He asked me, how to create the articles with a different and changing number of columns.
For Example
1 Column » Intro
2 Columns » Images left, Text on the right
2 Columns » Text left, Images on the right
1 Column » Text
2 Columns » Images left, Text on the right
2 Columns » Text left, Images on the right
1 Column » Text
The CSS Framework Bootstrap offers a very logical grid system for that, as follows:
So far so good - at least for those that speak a bit html…
To avoid bothering my customer, because I told him editing content will be easy I created some Content Templates for 1, 2 and 3 Column views. So he can select them from the TinyMCE Templates Menu and use them.
Tutorial: How do you do that?
Setup the Template Option in TinyMCE
If the Insert Template option is not visible to your customer you have to make the function available in TinyMCE. Note: This option is available in the initial setup of Joomla 3.7.x upwards so normally no need to follow the set up.
- Go to Extensions » Plugins
- Search for TinyMCE and open the plugin
- Select the Tab 'Set 0' which is probably the tab your customer usergroup is applied to.
- Drag and drop the Insert option to your toolbar preset
The 'Insert template' option will now be visible in your editor.
Insert custom Templates
So now we need to add our specific templates to the editor. The TinyMCE Editor Templates are stored in media/editors/tinymce/templates and you will find there already an example template and an example snippet. You can delete those two, but they might appear after the next update, so just ignore them.
Add the Templates you want to offer to your customer, as an example, I added a file named column-2.html into this folder with the following content:
If you want, you can add translations for the Template name with the following scheme:
Note
I added a 'Next Block comes here' text outside the div. While you can exit the inner div-Containers in the JCE Editor, there seems to be a small bug in TinyMCE that makes this impossible. The 'Next Block comes here' can be used by the user to place the cursor outside the container and insert there another template.
After selecting 'Insert Template' from the Insert Menu inside the editor the author now has the possibility to choose the new content templates.
Insert the Template
Let's go for the column-2 now and see what happens. The code is inserted correctly and the customer sees the 'Insert Text/Images here' placeholder.
But does this make things easier for him?
NOPE.
It's still too easy for someone who doesn't code not to mess up any existing markup even with having a template. Even with the 'Show Blocks' functionality of TinyMCE it's still not manageable.
Additionally you can add an editor.css file into the template with some special css-definitions:
Note that I only added here the definitions that I needed for the editor appearance to work. You could add also font styles from your original template to increase the user experience even more.
The result of adding the editor.css is following:
Our customer can now easily use the provided templates. Of course the columns will not appear like this in the frontend, but it's quite easy for the author to understand the layout now.
I tested the same with another CSS-Framework (UI Kit) and with the Template Option from the JCE Editor. This works almost exactly as described above.
I hope you found the tutorial useful.
If so, I am looking forward to a personal mail, a tweet, a recommendation in the Joomla Forum you are cruising or in your social community.
Please activate JavaScript in your browser.
PR-stagingSuccess
- Successcontinuous-integration/drone the build was successful Details
- Successcontinuous-integration/travis-ci/pr The Travis CI build passed Details
- SuccessJTracker/HumanTestResults Human Test Results: 2 Successful 0 Failed. Details
User tests: Successful: Unsuccessful:
Pull Request for Issue # .
Summary of Changes
This tiny PR fix a small issue with TinyMCE editor. The javascript code defined in tinymce.min.js use code defined in media/system/js/core.js, so we need to call JHtml::_('behavior.core'); in TinyMCE editor plugin before tinymce.min.js is loaded
Testing Instructions
- Configure your site to use Tiny MCE editor
- Open the file administrator/components/com_content/content.php, replace it with simple PHP code
Access to Content -> Articles. Instead of seeing a HTML editor, you will only see a large textarea. If you look at the console of web browser, you will see this javascript error Uncaught ReferenceError: Joomla is not defined at tinymce-init.min.js:1
- Apply patch, the editor is being displayed properly, Javascript error is gone
Documentation Changes Required
None
4629d68 23 Dec 2016 Fix issue with TinyMCE editor
I have tested this item ? unsuccessfully on 4629d68
Got
after modified content.php to
Got
An error has occurred. 0 syntax error, unexpected '.', expecting end of file
after modified content.php to
Tinymce Joomla Tutorial
franz-wohlkoenig - test_item - 5 Jan 2017 - Tested unsuccessfully
Thanks for testing @franz-wohlkoenig
However, you are using the wrong code. Please use this correct code (please copy it directly here):
I have tested this item ✅ successfully on 4629d68
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/13354.franz-wohlkoenig - test_item - 5 Jan 2017 - Tested successfully
Could someone help making another test? This is a backward incompatible issue. Below are the screenshot of a form in my extensions;
- In Joomla 3.6.5
- In 3.7.0
And as I mentioned before, there is an error in browser console Uncaught ReferenceError: Joomla is not defined at tinymce-init.min.js:1
I can easily add the command JHtml::_('behavior.core'); at the beginning of every form in my extesnions but I am worry that existing customers will get the issue when they update to 3.7.0. It is paid extension, so not everyone can update if their subscription expired.
I have tested this item ✅ successfully on 4629d68
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/13354.dgt41 - test_item - 5 Jan 2017 - Tested successfully
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/13354.Thanks for your help @dgt41
Status | Ready to Commit | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2017-01-05 17:55:39 |
Closed_By | ⇒ | zero-24 |
Tinymce Joomla Login
Thanks ?