### Command tracker Callback function is used to log properties of **command tracker**, **images**, **hashtags**, **URL links**, **caret position** and **log mutation**. Include callback function inside your **<script>**.
Following code example shows default setting of `.commandTracker`, which shows current status of the text style in the console log.
**_Example 3_** ```js let wysiwyg = new Wysiwyg4All({ callback: c => { if (c.commandTracker) { let ct = c.commandTracker; console.log(ct) if (typeof ct.color === 'string') // change the color wheel input value based on the position of the caret document.getElementById('colorInput').value = ct.color; else // If color output is true(boolean), the current color is the highlight color document.getElementById('colorInput').value = ct.color ? wysiwyg.highlightColor : wysiwyg.defaultFontColor; } return c; } }) ```
### Image style Image style can be pre-processed in `.image`. Following code example shows setting default width size of image by 8rem with border of red color, border width of 2px and triggering 'image clicked' message pop-up alert on the 'onclick' event.
**_Example 4_** ```js let wysiwyg = new Wysiwyg4All({ callback: c => { if (c.image) { // you can modify image element before it gets loaded console.log({image: c.image}); for (let img of c.image) { img.style = { width: '20rem', border: 'solid 2px red' }; img.onclick = () => { alert(`image clicked!`); }; } } return c; } }) ```
### Hashtag style Default hashtag properties can be modified in `.hashtag `. Following code example shows setting default color of hashtag as red and giving message pop-up alert, whenever clicking hashtag string.
**_Example 5_** ```js let wysiwyg = new Wysiwyg4All({ callback: c => { if (c.hashtag) { console.log({hashtag: c.hashtag}); for (let h of c.hashtag) { h.style = { color: 'red' }; h.onclick = () => { alert(`${h.tag} clicked!`); }; } } return c; } }) ```
### URL style Default URL link properties can be modified in `.urllink`. Following code example shows setting default color of URL link as red and displaying message pop-up alert, whenever clicking URL string.
**_Example 6_** ```js let wysiwyg = new Wysiwyg4All({ callback: c => { if (c.urllink) { console.log({urllink: c.urllink}); for (let u of c.urllink) { u.style = { color: 'red' }; u.onclick = () => { alert(`${u.url} clicked!`); }; } } return c; }) ```
### Caret position Default caret position properties can be modified in `.caratPosition` . Copy and paste the following code example. Specific details can be referred in API manual.
**_Example 7_** ```js let wysiwyg = new Wysiwyg4All({ callback: c => { if (c.caratPosition) { // Tracks carat position // Make carat to be always within the viewport let viewPortHeight = Math.min(document.documentElement.clientHeight || 0, window.innerHeight || 0); let minusWhenOutOfView = viewPortHeight - c.caratPosition.top; if (minusWhenOutOfView < 0) window.scrollBy(0, -minusWhenOutOfView); } return c; } }) ```
### Log mutation Default log mutation properties can be modified in `.mutation` . Copy and paste the following code example. Specific details can be referred in API manual.
**_Example 8_** ```js let wysiwyg = new Wysiwyg4All({ callback: c => { if (c.mutation) { // outputs dom mutation information console.log({mutation: c.mutation}); } return c; } }) ```
### Custom element type HTML string or node element can be assigned in `wysiwyg.command()` element value. In the following example code, smile emoji (😀) is loaded in the custom element that would be added inline, whenever `customElement()` function is called such as by using customElement [command button](#Custom-element-insertion). Following code should be included in **<script>**.
**_Example 9_** ```js let customElement = () => { // add smile emoji. This can be html string (ex -
Hello
) or node element (ex - document.createElement('div'))
wysiwyg.command({
element: '😀'
});
};
```
### Export data `wysiwyg.export()` should be included in **<script>**. It exports brief summary of Document Object Model(DOM) including HTML element.
**_Example 10_** ```js let export_data = () => { wysiwyg.export(pre => { console.log(pre); }).then(e => { console.log(e); }); }; ```
# List of Wysiwyg4All commands The Wysiwyg can edit text styles and text input field in diverse manners by using `wysiwyg.command()` function. Buttons can be created inside your **<body>** as shown in the [Getting started](#getting-started) example, and to activate commands on 'onclick' event. The list of the command inputs is shown in the following. ### Text style `wysiwyg.command('bold' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'small' | 'italic' | 'underline' | 'strike')` changes the text style by bold, heading level (h1 ~ h6), small letter, italic, underline or strike.
**_Example 11_** ```html ```
### ⚠️ Warning
When executing wysiwyg commands, the text selection in wysiwyg should be present.
For some browsers, wysiwyg text selection can be disabled the moment the user clicks on the command button.
To prevent this, it might be a good idea to prevent default on command buttons:
```html
```
### **Text color** `wysiwyg.command('color')` changes the text color ('black') to **wysiwyg** default highlight color ('teal' in this example).
**_Example 12_** ```html ```
Other color choice can be provided to user by creating HTML color picker. It is important to restore the last selected text on 'onblur' action (whenever losing focus in the input field) by using `wysiwyg.restoreLastSelection()` to change the text color in color picker.
**_Example 13_** ```html ```
### **Divider** `wysiwyg.command('divider')`adds horizontal line below the current text position.
**_Example 14_** ```html ```
### **Quote** `wysiwyg.command('quote')`adds block quote on the selected line. Note that the default highlight color is applied on the block quote.
**_Example 15_** ```html ```
### **List** `wysiwyg.command('unorderedList')` adds unordered list and`wysiwyg.command('orderedList')`adds ordered list on the selected line. Following code shows creating command button to add unorderedList.
**_Example 16_** ```html ```
### **Text alignment** `wysiwyg.command('alignLeft')` , `wysiwyg.command('alignCenter')` or `wysiwyg.command('alignRight')`aligns selected text to the left, center or to the right. Following code shows creating command button for aligning text to the center of the text area. Clicking the command button again restore to the initial alignment.
**_Example 17_** ```html ```
### Image insertion `wysiwyg.command('image')` adds image below selected line. By clicking the 'image' command button, directory panel pops up and opening the image will make insertion into the text input field.
**_Example 18_** ```html ```
### Custom element insertion `customElement()` adds pre-loaded HTML string or node elements inside a line. Smile emoji will be inserted whenever 'Smile' button is clicked in the following example as it was pre-loaded in the [default setting](#Custom-element-type) custom element example.
**_Example 19_** ```html ```
## License This project is licensed under the terms of the [MIT license](https://github.com/broadwayinc/colormangle/blob/main/LICENSE).