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 websites use the 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 tutorial, we study how to add a Trix editor to your web applications.

Installation

For getting started, you first need to include the JS and CSS files of Trix. You can get these files from the below URLs.

• https://unpkg.com/trix@2.0.0/dist/trix.css
• https://unpkg.com/trix@2.0.0/dist/trix.umd.min.js

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 a Trix editor to 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" />
</form>

Trix editor appends all written content to the hidden field. I 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 the Trix editor’s content on the server side using the following statement.

<?php
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.

Upload Image in Trix WYSIWYG Editor

On the GitHub documentation they have mentioned 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 I’m 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) {
            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. This code listens for trix-attachment-add event, and 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.

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

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

Related Articles

• How to Install and Use Trix Editor in Laravel
• How to Install and Use CKEditor in Laravel
• How to Install and Use TinyMCE – WYSIWYG HTML Editor in Laravel

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