Trix – An Open Source WYSIWYG Editor for Websites

A rich text editor or WYSIWYG editor is useful for writing descriptive content that includes HTML elements and images. In the HTML Textarea tag, one can’t write content with HTML tags. This is why most of the websites use WYSIWYG HTML editor.

You will find several WYSIWYG editors on the Internet. Some of them are Trix, CKEditor, TinyMCE editor, Summernote, etc. I am going to discuss the Trix editor for this article.

Trix is an open-source rich text editor from Basecamp. As it is used in Basecamp, millions of people are already using it to write their content. In this article, we study how to add a Trix editor to your web applications.


Trix hosted their package on GitHub so users can easily copy the required files. For getting started, you first need to include JS and CSS files of Trix. You can get these files directly inside the dist folder from their GitHub page. Alternatively, download their package and copy trix.js and trix.css files.

You also need to create 2 PHP files and one more JS file. We will see why and how to use these files in the later part. Your folder structure should be as follows:


After this, write the code below in index.php which will add Trix editor on your webpage.

<link rel="stylesheet" href="css/trix.css">
<script src="js/trix.js"></script>
<script src="js/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" />

In the above code, we added CSS and JS files directly. Of course, you should follow your framework/CMS guidelines to include these files.

Trix editor appends all written content to the hidden field. We added this hidden field in a code. Upon submitting the form, you should proceed with the hidden field to get the content from the editor. Basically, you will get Trix editor’s content on the server-side using:

echo $_POST['content']; //here 'content' is the name given to hidden field

In the same way, you can pre-fill the editor by adding the content to the ‘value’ attributes of the hidden field. Trix editor then automatically populates content from a hidden element.

If you run the index.php file on the browser, you should see your WYSIWYG editor on the page.

Trix Editor

Upload Image in Trix WYSIWYG Editor

On the GitHub documentation they have mentioned about storing attached files as:

Trix automatically accepts files dragged or pasted into an editor and inserts them as attachments in the document. Each attachment is considered pending until you store it remotely and provide Trix with a permanent URL.

It means you need to take an image from the editor, send it to the server-side, upload images on the server and return back the uploaded URL. To perform this process we are going to write JS and PHP code in the next steps.

Let’s start with JS code. We have created the attachments.js inside the ‘js’ directory. This JS file will have the following code.

(function() {
    var HOST = "YOUR_DOMAIN_URL/upload.php"
    addEventListener("trix-attachment-add", function(event) {
        if (event.attachment.file) {
    function uploadFileAttachment(attachment) {
        uploadFile(attachment.file, setProgress, setAttributes)
        function setProgress(progress) {
        function setAttributes(attributes) {
    function uploadFile(file, progressCallback, successCallback) {
        var formData = createFormData(file)
        var xhr = new XMLHttpRequest()
"POST", HOST, true)
        xhr.upload.addEventListener("progress", function(event) {
            var progress = event.loaded / * 100
        xhr.addEventListener("load", function(event) {
            var attributes = {
                url: xhr.responseText,
                href: xhr.responseText + "?content-disposition=attachment"
    function createFormData(file) {
        var data = new FormData()
        data.append("Content-Type", file.type)
        data.append("file", file)
        return data

Replace the placeholder ‘YOUR_DOMAIN_URL’ with your actual URL. This code listens for trix-attachment-add event, send an attachment to the upload.php file. On receiving a response from the server, it sets a permanent image URL in the editor attributes.

Finally, write the uploading image code in the upload.php file.

if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
echo "YOUR_DOMAIN_URL/uploads/".$_FILES['file']['name'];

I hope you understand how to add the Trix WYSIWYG editor using PHP on your website. I would like to hear your thoughts and suggestions in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

1 thought on “Trix – An Open Source WYSIWYG Editor for Websites

Leave a Reply

Your email address will not be published.