How do I echo out pre-formatted text from a MySQL database?

[mslilafowler]

I am sending some HTML input data to a MySQL database with PHP.

One of those form inputs send the data to MySQL in JSON format.

This (an HTML paragraph with rich formatting):

“this is some text from a wysiwyg editor”

The same thing in the database would be:

"{"ops":[{"attributes":{"underline":true},"insert":"this"},{"insert":" is some "},{"attributes":{"bold":true},"insert":"text"},{"insert":" from a "},{"attributes":{"italic":true},"insert":"wysiwyg"},{"insert":" editor\n"}]}"

I’m having trouble figuring out how display the data like the above formatted string when I select and echo out the data from the database.

Simply put, I’d like to know how this forum right here uses a wysiwyg editor for creating posts and then displays the posts in the same format we used when creating it.

Please advise me with this… How can I do it?

[benanamen]

Why are you storing the data as JSON? You can easily output JSON if that is what will be needed but it doesn’t sound like that is the case.

wysiwyg? LOL! Pretty sure none of us here use a wysiwyg. Get yourself a good IDE or editor and learn how to write code. By the way, what wysiwyg are you using?

[mslilafowler]

-.- I am not using a wysiwyg to write code! I’m using a wysiwyg component for the users on my website to utilise. I’m using Quill btw. Quill sends the data in JSON format, so I need to know how to print it out when the time comes to display the formatted content on the website.

[JimL]

I would probably store the html output from quill.getHTML() instead of the json config it spits out. Haven’t used Quill before so might be that they recommend something else. I just think it makes sense to not couple the wysiwyg editor to all the editable data that is stored in the db

[mslilafowler]

@JimL

This is how the JavaScript to submit the form looks: (it is Quill’s own code)

let form = document.querySelector('#listingForm');

form.onsubmit = function() {
  // Populate hidden form on submit
  var productDescription = document.querySelector('input[name=productDescription]');
  productDescription.value = JSON.stringify(quillObj.getContents());
  console.log("Submitted", $(form).serialize(), $(form).serializeArray());
  //currently no backend to submit to! 
  alert('Open the console to see the submit data!')
  return false;
}; 

If this is how it sends the data to the backend, then how would I restructure this code to change the way it sends the data?

[JimL]

As per their documentations getContents() retrieves the “delta” which is what they call an object notation of the contents of a quill editor.

Simply change this to getHtml()

But!

I would strongly suggest reading through this thread and decide which approach is best for your use case. It might make sense to send both the delta and the html so you can show the html on read only and use the delta for the editor. There are also scripts/polyfills that will allow you to render quill deltas rather easily so you might just use those to display data

Render quill delta without instantiating an editor

[mslilafowler]

Thank you for this. I will look into Render Quill Delta scripts, it seems that is what I am trying to do. And I do hope that finding a script like that would be a solution to this.

I have one more question on the same topic… Do all forums have to go through such a complicated process in order to have a wysiwyg-editor implemented? Like this one we’re using right now.

It was surprising to learn this would make me (as a beginner, at least) go the extra mile trying to figure out how to implement one on a website…

[JimL]

No, most forums, CMS’s and other content solutions offer these things either built in or a rich plugin system to “click to install”. For most sites and discussion boards it’s just a matter of installing the right content management system with the plugins you want and setting it up.

[mslilafowler]

The link you provided lead me to finding a Quill Delta renderer, which lead to learning about + downloading + going through some basic lessons about Node.js and npm (having no prior knowledge to either of them), then stumbling upon this component in the process

Finding a PHP Quill Renderer was the highlight of my day, since I am much more familiar with PHP than Node.js. So thank you

So I installed it with composer and all’s well.

I wonder if you could give me one more push in the right direction…Now that I have a Php Quill Renderer, I’m sitting here looking at my screen with the renderer and my html document and wondering how to connect the two, lol.

-EDIT-

Managed to get it running! I had to include the autoload like so:
require __DIR__.'/php-quill-renderer/vendor/autoload.php';
Took me a while to figure that out, no docs for us noobs I guess, but yay!

[JimL]

Managed to get it running! I had to include the autoload like so:
require __DIR__.'/php-quill-renderer/vendor/autoload.php';

Actually you should include the composer autoloader instead so all your installed third party scripts are available.