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.

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

Installation

Trix hosted their package on GitHub so users can easily use this nice editor in their web applications. 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. Or else, 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:

folder

Next to add Trix editor on your webpage, write the code below.

index.php

<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" />
</form>

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 which we have added above. And when you submit 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 server-side using:

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

In the same way, you want to pre-fill editor with the content then pass the content in the value attributes of the hidden field. Trix editor automatically populates content from a hidden element.

Next, run this file in your browser and you should see your WYSIWYG editor on the page.

Trix Editor

Upload Image in Trix WYSIWYG Editor

On the GitHub documentation they mentioned about storing attached files.

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 image URL. To perform this process we are going to write JS and PHP code in the next steps.

First, let’s start with JS code. You have created attachments.js file 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) {
			uploadFileAttachment(event.attachment)
		}
	})

	function uploadFileAttachment(attachment) {
		uploadFile(attachment.file, setProgress, setAttributes)

		function setProgress(progress) {
			attachment.setUploadProgress(progress)
		}

		function setAttributes(attributes) {
			attachment.setAttributes(attributes)
		}
	}

	function uploadFile(file, progressCallback, successCallback) {
		var formData = createFormData(file)
		var xhr = new XMLHttpRequest()

		xhr.open("POST", HOST, true)

		xhr.upload.addEventListener("progress", function(event) {
			var progress = event.loaded / event.total * 100
			progressCallback(progress)
		})

		xhr.addEventListener("load", function(event) {
			var attributes = {
				url: xhr.responseText,
				href: xhr.responseText + "?content-disposition=attachment"
			}
			successCallback(attributes)
		})

		xhr.send(formData)
	}

	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. What this code does is, it listen for trix-attachment-add event, send an attachment to the upload.php file. On returning reponse from server, it sets permanant image URL in the editor attributes.

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

<?php
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'];

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

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. Required fields are marked *