wysiwyg4all
Advanced tools
Readme
Getting started | Default settings | List of Wysiwyg4all commands | License
Wysiwyg4all is a free minimal WYSIWYG editor for your website. It is highly expandable and customizable.
These following two-steps show basic demonstration of how Wysiwyg4all works out.
<script src="https://cdn.jsdelivr.net/npm/wysiwyg4all@latest/wysiwyg4all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wysiwyg4all@latest/wysiwyg4all.css" />
wysiwyg.command('h1') function. Diverse command options can be selected, which are listed in below List of Wysiwyg4all commands. Of course, the button design can be customized by your own taste.Example 1
<div id="myeditor" style="width: 512px; padding:1rem; border: solid 1px teal"></div>
<button onmousedown="(function(event){event.preventDefault()})(event)" onclick="wysiwyg.command('h1')">
H1
</button>
In Wysiwyg4all function, you shuold set default properties for element id, placeholder string, spell check, highlight color, last line blank, hash-tag and URL link, log mutation. Add Wysiwyg4all default setting script inside your <script>. The <script> tag should come after closing the </body> tag. Following script is an example for setting some of the default properties. Wysiwyg4all function will be created under the name of wysiwyg in the entire examples.
Example 2
let wysiwyg = new Wysiwyg4all({
//set ID of target <DIV>.
elementId : 'myeditor',
// Add placeholder string.
placeholder : 'Build your custom wysiwyg',
// Set spellcheck to true/false.
spellcheck : false,
// Set color scheme of wysiwyg (HTML color name | hex | rgb | hsl).
highlightColor : 'teal',
// When set to true, blank line will always be added on the last line of text area.
lastLineBlank = false,
// When set to true, wysiwyg will auto detect hashtag strings.
hashtag = true,
// When set to true, wysiwyg will auto detect url strings
urllink = true,
// When set to true, wysiwyg will output DOM mutation data via callback function.
logMutation = false
})
Callback function is used to modify default properties of command tracker, images, hashtags, URL links, caret position and log mutation. Include callback function inside your <script>. Keep in mind that callback parameter ('c' in the following example code) should be returned.
Following code example shows default setting of .commandTracker, which shows current status of the text style in the console log.
Example 3
let wysiwyg = new Wysiwyg4all({
callback: async 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 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
let wysiwyg = new Wysiwyg4all({
callback: async 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;
}
})
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
let wysiwyg = new Wysiwyg4all({
callback: async 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;
}
})
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
let wysiwyg = new Wysiwyg4all({
callback: async 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;
})
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
let wysiwyg = new Wysiwyg4all({
callback: async 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;
}
})
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
let wysiwyg = new Wysiwyg4all({
callback: async c => {
if (c.mutation) {
// outputs dom mutation information
console.log({mutation: c.mutation});
}
return c;
}
})
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. Following code should be included in <script>.
Example 9
let customElement = () => {
// add smile emoji. This can be html string (ex - <div>Hello</div>) or node element (ex - document.createElement('div'))
wysiwyg.command({
element: '😀'
});
};
wysiwyg.export() should be included in <script>. It exports brief summary of Document Object Model(DOM) including HTML element.
Example 10
let export_data = () => {
wysiwyg.export(pre => {
console.log(pre);
}).then(e => {
console.log(e);
});
};
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 example, and to activate commands on 'onclick' event. The list of the command inputs is shown in the following.
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
<button onmousedown="(function(event){event.preventDefault()})(event)" onclick="wysiwyg.command('h1')">
H1
</button>
wysiwyg.command('color') changes the text color ('black') to wysiwyg default highlight color ('teal' in this example).
Example 12
<button onclick="wysiwyg.command('color')">
Color
</button>
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
<input id='colorInput' type='color' onchange="(function(event){wysiwyg.command(event.target.value)})(event)"
onblur="(function(){wysiwyg.restoreLastSelection()})()"/>
wysiwyg.command('divider')adds horizontal line below the current text position.
Example 14
<button onmousedown="(function(event){event.preventDefault()})(event)" onclick="wysiwyg.command('divider')">
Divider
</button>
wysiwyg.command('quote')adds block quote on the selected line. Note that the default highlight color is applied on the block quote.
Example 15
<button onmousedown="(function(event){event.preventDefault()})(event)" onclick="wysiwyg.command('Quote')">
Quote
</button>
wysiwyg.command('unorderedList') adds unordered list andwysiwyg.command('orderedList')adds ordered list on the selected line. Following code shows creating command button to add unorderedList.
Example 16
<button onmousedown="(function(event){event.preventDefault()})(event)" onclick="wysiwyg.command('unorderedList')">
Unordered list
</button>
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
<button onmousedown="(function(event){event.preventDefault()})(event)" onclick="wysiwyg.command('alignCenter')">
Align center
</button>
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
<button onmousedown="(function(event){event.preventDefault()})(event)" onclick="wysiwyg.command('image')">
Image
</button>
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 example.
Example 19
<button onclick="customElement()">
Smile
</button>
This project is licensed under the terms of the MIT license.
FAQs
Free minimal WYSIWYG editor for web developers
We found that wysiwyg4all demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.