{"id":38938,"date":"2017-10-23T18:01:21","date_gmt":"2017-10-23T10:01:21","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38938"},"modified":"2022-09-02T18:23:22","modified_gmt":"2022-09-02T10:23:22","slug":"substance-js-texteditor","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/substance-js-texteditor\/","title":{"rendered":"Add Web-based Content Editing With Substance"},"content":{"rendered":"

Many web applications support user input<\/strong> and it\u2019s great to let users edit their text with formatting. Bold text, headings, links, underlines, all of these features typically require raw HTML to set up.<\/p>\n

With the Substance framework<\/a><\/strong>, you can support a wide array of editing features<\/strong>, all with one script.<\/p>\n

Substance isn\u2019t just a plugin or a simple text editing GUI for the web. It\u2019s an entire framework<\/strong> built to support a web-based editor<\/strong>.<\/p>\n

This is also possible using basic CSS libraries<\/a> but it\u2019s never been this easy. Substance is quick to install<\/strong> and comes with a ton of features<\/strong> you can choose to run (or not run) based on your site\u2019s needs.<\/p>\n

Read Also:<\/strong> HTML5 Contenteditable Attribute: Edit Web Content On Front-end<\/a><\/p>\n

\"Substance.io<\/figure>\n

Take a peek at the Examples page to see this in action. It supports pretty much everything from image uploads<\/strong> to custom emojis<\/strong> and even inline forms for web content<\/strong>.<\/p>\n

\"Substance.io<\/figure>\n

Currently in beta 6, this framework is massive. I think it\u2019s ready for production sites<\/strong> and it\u2019s already used on a number of big web apps such as Stencila<\/a>. But somehow, this framework has slipped through the cracks in major developer communities.<\/p>\n

It has a full GitHub repo<\/a><\/strong> with a table of browser support and custom options you can toy with.<\/p>\n

All files are loaded directly through npm<\/strong>, so it helps if you have some Node experience<\/a>. The biggest way to get going is by diving into the code and learning how to customize the Substance framework for your own web project.<\/p>\n

For this, I recommend the online documentation which is full of mini-tutorials for all skill levels<\/strong>.<\/p>\n

\n\t\t\t\t\t10 Best Free Source Code Editors<\/span><\/a>\n
\n\t\t\t\t\t\t\t