• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
logo

Tutsplanet

Free Technical and Blogging Resources

  • Home
  • Web Hosting
  • Programming
  • Plugins
  • Write For US
  • News
  • About Us
  • Snippets
You are here: Home / Programming / Trix – An Open Source WYSIWYG Editor for Websites

Trix – An Open Source WYSIWYG Editor for Websites

Aug 26, 2020 by Editorial Staff Leave a Comment

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


Editorial Staff

Editorial Staff at Tutsplanet is a dedicated team to write various tutorials about subjects like Programming, Technology and Operating Systems.

View all posts by Editorial Staff

Filed Under: Programming Tagged With: WYSIWYG

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar




Quick Links

  • A Simple YouTube Video Downloader Script in PHP
  • The 50 Most Useful jQuery Plugins for Frontend Development
  • Base64 Decode Online
  • Base64 Encode Online

Subscribe

* indicates required

Share

   

Hot topics

  • A Simple YouTube Video Downloader Script in PHP 249 views
  • Replace “\n” with new line characters, using Notepad++ 246 views
  • Add FTP/SFTP in Visual Studio Code 161 views
  • Open a URL in a new tab using JavaScript 136 views
  • Using Third-Party Libraries in Codeigniter 134 views
  • Hierarchical Tree view Category Example in Laravel 129 views
  • Upload Multiple Images and Store in Database using PHP and MySQL. 121 views
  • Laravel Image Intervention Tutorial With Example 110 views
  • How to change PHP version on MAMP – Mac OSX 102 views
  • Spout, an awesome library for reading and writing in Excel. 99 views

Categories

  • Design & Development
  • Drupal
  • Facebook
  • General
  • How To
  • ios
  • Javascript
  • Linux
  • Magento
  • Marketing
  • News
  • PHP
  • Plugins
  • Programming
  • Snippets List
  • Social Media
  • Softwares
  • Themes
  • Tips
  • Wordpress
  • YouTube

Copyright © 2021 · TutsPlanet Gene Theme on Genesis Framework · Powered By BunnyCDN