WordPress Editor in Front-end with AJAX

I was working on a site recently and needed the ability to have the WordPress editor be available in the front-end and using AJAX. I went looking for information on how to accomplish this task and was surprised that I couldn’t find anybody that posted a complete solution (I’m not saying for certain it isn’t out there, but I couldn’t find it). There were lots of sites that showed how to include the WordPress editor in the front-end, that stopped short of telling actually how to get the data out of it, but it’s pretty obvious that it just another form element in that case, but I didn’t see any that obviously told this, but I could have missed it.

Including the WordPress editor in a template file on the front-end is really quite easy to do. You simply include the command wp_editor(content, id, args);  in your template file. Content is of course the content you want loaded into the editor when it is loaded. The id is a unique id to name the editor, and it can only contain lower case letters. The args parameter is an array of options to customize the editor. For example in the site I was working on I call it with args like this:

This hides the media upload button, because I didn’t want them attempting to use this feature, and loads a custom editor.css file needed for the work they are doing in the back-end. For a complete list of options, you can find them at the WordPress codex. Now, as I mentioned, if you put this within a standard form element, you just use the id tag in your form response and things are good to go. However, in my case, I want to update the editor content via AJAX after the user has filled in some other fields. This is where things got a little murky and I only found some hints about how to do it on stackoverflow.com, but I don’t have the links any more. One big important thing to note before we go on also, you can’t add the editor after the page is created and it can’t be moved around in the DOM or bad things will happen. I didn’t try it personally, I just found it mentioned all over and decided it best not to risk the end of human society as we know it. 🙂

Now we have the information from our other fields all filled out, I wanted to take that information and turn it into an HTML document and place it into editor. I won’t go into the process of creating the HTML, as that isn’t the point of this post. Here is a stripped down version of one my AJAX calls to generate the HTML and place the response into the editor:

The first line assigns the editor object to the variable ed, so we can use it easily throughout the rest of the script. The next line tells the editor we are doing some processing, so turn on the spinner graphic to tell the user something is going on. We then make our AJAX call which returns a success or failure response. Again, this is not a post on creating AJAX calls with WordPress, but if you want a great tutorial on the whole process go here which was my first and I think best introduction to using AJAX in WordPress, or you can try this which seems to have basically the same information.

Once we have our data returned as object.text, we tell the editor we are done, turn off the spinner graphic, and set the data in the editor. So, yeah, it really is just that easy, once you know the right commands to pass.

And you want to get the data out of the editor to save in your data by AJAX, it’s really easy to do as well.

Then, you just pass html to your AJAX post and process it however you need to.

And here, as a bonus for reading this far, this project also needed to convert this HTML into a PDF document. I am using HTML2PDF to perform this conversion. I’ll provide a bit of code below for a sample of what I’m doing, but the samples from the HTML2PDF and the documentation there should give you enough information to perform this on your own if you need it for your projects.

Hope this information being in one place helps someone at some point. Code on my friends.

This entry was posted in Coding, jQuery, PHP, WordPress and tagged , , , , , , , . Bookmark the permalink.

Comments are closed.