Custom tools

Information

The following demo shows how to customize some of the native Editor tools (font size, font name and block format) by modifying the tools' item collections, as well as how to create completely custom tools.

One of the Most Beautiful Islands on Earth - Tenerife
 
 
 
 Overview
 
 
 
 Tenerife is the largest and most populated island of the eight <a href="https://en.wikipedia.org/wiki/Canary_Islands" target="_blank">Canary Islands</a>. It is also the most populated island of Spain, with a land area of 2,034.38 square kilometers (785 sq mi) and 904,713 inhabitants, 43% of the total population of the Canary Islands.&nbsp;The archipelago's beaches, climate and important natural attractions, make it a major tourist destination with over 12 million visitors per year.
 
 
 <img src="../content/web/editor/tenerife.png" style="float: right;" alt="" width="350" height="206" />

Trip Highlights in Tenerife
 <ul>
 <li>
 Trip to Loro Parque Out top tip is to visit the famous Loro Parque or 'Loro Park. It is a 13.5-hectare zoo on the outskirts of Puerto de la Cruz on Tenerife, Spain where it houses an extensive and diverse reserve of animal and plant species. 
 
 
 </li>
 <li>
 Whale and Dolphin Watching Tour&nbsp; Another great option is to take boat excursion with almost guaranteed sightings of whales and dolphins. This is a day-long trip that includes lunch, island visits, fishing, and amazing views of ocean sceneries.
 
 
 </li>
 <li>
 Teide National Park Stargazing Last, but not least you can take a stargaze trip to Teide National Park, the 3rd best place in the world to view stars and described by NASA as a window to the universe.
 
 </li>
 </ul>
 
 
 Climate
 
 
 <table style="width:100%;height:225px;text-align:center;">
 <tbody>
 <tr style="height:20%;background-color: rgb(96,173,94);">
 <td style="width:473px;text-align:center; font-size:medium; color: rgb(255,255,255);" colspan="14">Climate Data for <a href="https://en.wikipedia.org/wiki/Santa_Cruz_de_Tenerife" target="_blank">Santa Cruz de Tenerife</a> 
 </td>
 </tr>
 <tr style="height:9.33333%;">
 <td style="width:230px;">
 
 Month
 
 </td>
 <td>Jan</td>
 <td>Feb</td>
 <td>Mar</td>
 <td>Apr</td>
 <td>May</td>
 <td>Jun</td>
 <td>Jul</td>
 <td>Aug</td>
 <td>Sep</td>
 <td>Oct</td>
 <td>Nov</td>
 <td>Dec</td>
 <td>Year</td>
 </tr>
 <tr style="height:23%;">
 <td style="width:230px; color: rgb(46,125,50);">Daily mean &deg;C (&deg;F)</td>
 <td style="">18.2 (64.8) </td>
 <td style="">18.3 (64.9) </td>
 <td style="">19.0 (66.2) </td>
 <td style="">19.7 (67.5) </td>
 <td style="">21.0 (69.8) </td>
 <td style="">22.9 (73.2) </td>
 <td style="">25.0 (77.0) </td>
 <td style="">25.5 (77.9) </td>
 <td style="">24.9 (76.8) </td>
 <td style="">23.4 (74.1) </td>
 <td style="">21.3 (70.3) </td>
 <td style="">19.4 (66.9) </td>
 <td style="">21.5 (70.7) </td>
 </tr>
 <tr style="height:23%;">
 <td style="width:230px; color: rgb(46,125,50);">Average rainy days (&ge; 1.0 mm)</td>
 <td style="">8.0</td>
 <td style="">7.2</td>
 <td style="">6.9</td>
 <td style="">5.5 </td>
 <td style="">2.9</td>
 <td style="">0.9</td>
 <td style="">0.2</td>
 <td style="">0.8 </td>
 <td style="">2.7</td>
 <td style="">6.1</td>
 <td style="">8.8</td>
 <td style="">9.4</td>
 <td style="">59.4</td>
 </tr>
 <tr style="height:23%;">
 <td style="width:230px; color: rgb(46,125,50);">Mean monthly <a href="https://en.wikipedia.org/wiki/Sunshine_duration" target="_blank">sunshine hours</a> </td>
 <td style="">178</td>
 <td style="">186</td>
 <td style="">221</td>
 <td style="">237</td>
 <td style="">282</td>
 <td style="">306</td>
 <td style="">337</td>
 <td style="">319</td>
 <td style="">253</td>
 <td style="">222</td>
 <td style="">178</td>
 <td style="">168</td>
 <td style="">2,887</td>
 </tr>
 </tbody>
 </table>
 
 * The data used in this demo is taken from <a href="https://wikipedia.com" target="_blank">wikipedia.com</a>. 
 ** The displayed photos are sourced from <a href="https://pixabay.com" target="_blank">pixabay.com</a>

Description

This example illustrates how to customize some of the native Editor tools (font size, font name and block format) by modifying the tools' item collections, as well as how to create completely custom tools (Content Area Background Color and Insert a Horizontal Ruler).

You can use the .concat() method for JavaScript arrays to modify the fontName, fontSize and Formatting settings.

To add a new custom action item to the toolbar set the template option of the editor tool item.

To execute a custom command when it is pressed, set the exec attribute to point to a JavaScript function that will be fired when the custom button is clicked.

HTML5/JavaScript source

Also available for:

API Reference

custom-tools.html
Widget configuration

Select widget to inspect

Editors

Layout

Navigation

Scheduling

Data Management

Media

Interactivity & UX

Framework

PDF

Conversational UI

Charts

Barcodes

Gauges

Diagrams & Maps

Editor

SASS Themes

LESS Themes

SASS Theme Builder

Custom tools

Information

Description

HTML5/JavaScript source

Also available for:

Support & learning resources

Editor for other technologies