A custom built rich text editor making use of the contenteditable html feature
Put this in your <head>:
<link rel="stylesheet" href="html5-wysiwyg-webboss/html5editor-styles.css"> <script src="html5-wysiwyg-webboss/html5editor-widget.js">script>
And then create a DIV with the ID or CLASS name with the same name you set in the jQuery selector variable:
<script> $('.html5editor').html5editor({ editorName: 'ed_demo', theme: "default", toolbarSize: "full", createInput: true, inputName: "demoEditor", height: 400 }); script>
You can define a custom toolbar by creating an array of button options:
<script> $('.html5editor').html5editor({ editorName: 'ed_demo', theme: "default", toolbarSize: "custom", toolbar: ['New', 'Undo', 'Redo', 'Bold', 'Italics', 'Underline', 'Strike Through', 'Align Left', 'Align Center', 'Align Right', 'Justify', 'Bullet List', 'Numbered List', 'H1', 'H2', 'H3', 'Paragraph', 'Link', 'Unlink', 'Image', 'HTML', 'Remove Formatting', 'Reset', 'View Source'], createInput: true, inputName: "demoEditor", height: 400 }); script>
-
editorName- Element selector -
path- Relative path to the plugin installation -
theme- CSS theme name (onlydefault
available as standard) -
toolbarSize-full
ormini
orcustom
-
toolbar- IftoolbarSizeis set tocustom
, create an array of buttons here from the following:'New', 'Select All', 'Undo', 'Redo', 'Text Colour', 'Highlight Colour', 'Bold', 'Italics', 'Underline', 'Strike Through', 'Align Left', 'Align Center', 'Align', ' Right', 'Justify', 'Indent', 'Outdent', 'Bullet List', 'Numbered List', 'H1', 'H2', 'H3', 'Paragraph', 'Link', 'Unlink', 'Image', 'Paragraph', 'Blockquote', 'HR', 'Subscript', 'Superscript', 'HTML', 'Remove Formatting', 'Reset', 'Print', 'View Source' -
createInput-true/false: This will create a hidden input and copy all editor content into it on keyup and blur so that you can pass the data viaPOST/GET -
inputName- The input name of the above hidden input so you can retrieve thePOST/GETdata -
colorPalette- Array of colour values (array can be #HEX, RGB() or ColourName) -
width / height- Width and Height of editor (either by px of %)
- jQuery
- jQuery UI
- Font Awesome
Supported by most modern browsers. Partial support for most common functions (ie. bold, italic, underline) in IE.
- MIT
- Version 1.1
- Last updated: 8th June 2018
- Add localStorage to save draft content
- Make jQuery UI dialog for nicer image and URL inputs
- Add new CSS theme options
- Create Table insert options
- Add Image and Table editing options
2018 Luke Wilson/WebBoss Ltd
Github | WebBoss.io | WebBoss Websites