HTML Editors - WYSIWYG content editing with Summernote and TinyMCE
Summary of features
WYSIWYG content editing is made possible by integration with Summernote and TinyMCE. See the Summernote and TinyMCE websites for full documentation. As well as the standard Summernote and TinyMCE editors, the template also incorporates Summernote's 'click-to-edit' and advanced 'air-mode' editors.
At a glance
- Choose between three modes of operation for Summernote.
- Air-mode allows direct input with an 'on demand' floating toolbar.
- TinyMCE is highly configurable and can be used with remote CSS files.
Summernote basic editor
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Summernote displays content directly, so it is styled according to local CSS rules. Where content appears in an editing window (as above), this defaults to black text on a white background, with 10px padding.
Summernote Click-to-edit
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Summernote Air-mode
Air-mode gives a clean interface with a hidden toolbar. To reveal the toolbar simply select the text (below) that you wish to edit.
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Summernote supports drag-and-drop image/text importing - place the curser at the required insertion point, then drag-and-drop an image where you want it to appear, and it will be embedded into the content at that location.
TinyMCE editor (content_css not set)
TinyMCE displays content via an iframe, so in its basic configuration, no css files are called, which means that elements are displayed in the browser's default styling. Also note that TinyMCE removes empty elements, so icon elements need to be filled with a space ( ).
TinyMCE editor (content_css set to template's CSS file)
TinyMCE can be configured to load local or remote CSS files, as above, but note that as the content is set directly within a <body> element, with this template, the background is grey and there is no padding.
TinyMCE editor (template's CSS file, plus body_class set to 'tinymce-editor')
TinyMCE can be configured (using body_class) to assign a class to the body tag. Accordingly, a template class of .tinymce-editor has been created to give the window a white background and 10px padding (as shown above). However, compare the content above to how it should appear (shown below) and you will see that the table text is 11px Verdana, as set by a TinyMCE skin stylesheet i.e. not the intended style. TinyMCE is highly configurable, which could be perfect for your needs, but be warned that this can also bring complexity and unintended results.
Actual content (as it appears in a default panel)
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |