Trix – An Open Source WYSIWYG Editor for Websites

A rich text editor or WYSIWYG editor is very useful when writing descriptive content that includes HTML elements, images and strong formatting. The normal text area in HTML has no capability to format HTML tags, so we need to use tools such as CK Editor, TINYMCE, and there are more. So what we are introducing today is trix, another editor with different capacities and that’s too  from the creators of Basecamp.

Here is how they describe it

Trix is an open-source project from Basecamp, the creators of Ruby on Rails. Millions of people trust their text to Basecamp, and we built Trix to give them the best possible editing experience.

Most WYSIWYG editors are wrappers around HTML’s contenteditable and execCommand APIs, designed by Microsoft to support live editing of web pages in Internet Explorer 5.5, and eventually reverse-engineered and copied by other browsers.

Because these APIs were never fully specified or documented, and because WYSIWYG HTML editors are enormous in scope, each browser’s implementation has its own set of bugs and quirks, and JavaScript developers are left to resolve the inconsistencies.

Trix sidesteps these inconsistencies by treating contenteditable as an I/O device: when input makes its way to the editor, Trix converts that input into an editing operation on its internal document model, then re-renders that document back into the editor. This gives Trix complete control over what happens after every keystroke, and avoids the need to use execCommand at all.

Since it’s a CSS and JavaScript editor you can integrate with almost any framework, and any programing language out there.

Installation

Since they are hosted in GitHub, we can click on this GitHub link and download the package. Copy everything from the dist folder.

This is how your sample code look like

<link rel="stylesheet" href="trix/trix.css">
<script src="trix/trix.js"></script>
<script src="trix/attachments.js"></script>
<form method="post">
    <input id="x" type="hidden" name="content" value="" />
    <trix-editor input="x"></trix-editor>
    <input type="submit" name="submit" value="Submit" />
</form>

Populating With Stored Content

To populate a <trix-editor> with stored content, include that content in the associated input element’s value attribute.

<input id="x" value="Editor content goes here" type="hidden" name="content">
<trix-editor input="x"></trix-editor>

These are just tip of iceberg, but there are more helpful features are there. You can read about the configuration options from the above GitHub page