WYSIWYG editors


#1

I could use some advise on WYSIWYG editors. Are there any free editors that don’t use plug-ins and use strictly JavaScript and CSS code on a html page for a textarea form input that you can submit to your own database?

Appreciate any help as I don’t have any experience with editors.

Thank you.


#2

Quill is worth a look.


#3

Thank you for that. I did see that one and will look into it further.

When you have an editor like that, should you be able to save in database the html code from the textarea and then have it draw to the page as written? And are there any issues as it relates to saving the data that I should be aware of?

Thanks


#4

I believe Quill is backend agnostic. What you do with the generated HTML is up to you. You can just grab the innerHTML from whatever element you initialized Quill on and send it off to your database, either via form submission or Ajax.


#5

Thank you for that information, it’s truly appreciated.


#6

Do you have any experience with Quill? It’s seems impossible to use it in a textarea to submit to database. Just want something simple like it is here that you submit the innerHTML to database.


#8

I’ve used CKeditor for many years. I think CK4 is more configurable but CK5 has some cool new features. depending what you need. It can just be run from a CDN link if you don’t want to install it.


#9

I haven’t, but I don’t imagine it to be difficult to do what you ask. Where are you getting stuck?

The example shows an example of using it on a <div>. Is this where you are having trouble?


#10

Yes, I am using a div for the form submit, as below, but don’t know how to incorporate that with textarea to submit to database:

<div id="Div1">
<form method="POST" action="post.asp" name="mainform">
  <input type="hidden" id="myHtml"/>
  <button type="submit">Submit</submit>
</form>
</div>

You would usually have a textarea to post to another page, so I am lost at this stage.

I very much appreciate your help.


#11

To submit whatever has been entered into Quill (including formatting) with the form you’d need to catch the submit event, prevent the browser’s default action, grab the contents of the quill editor, stick it in the hidden input, then send the form on its way.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Quill</title>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  </head>
  <body>
    <div id="editor">
      <p>Hello World!</p>
    </div>

    <form method="POST" action="post.asp" name="mainform">
      <input type="hidden" id="myHtml"/>
      <button type="submit">Submit</submit>
    </form>

    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script>
      const editor = document.getElementById('editor');
      const hiddenInput = document.getElementById('myHtml');
      const form = document.forms.mainform;
      const quill = new Quill(editor, {
        theme: 'snow'
      });

      form.addEventListener('submit', function(e){
        e.preventDefault();
        hiddenInput.value = editor.firstChild.innerHTML
        this.submit();
      });
    </script>
  </body>
</html>

Obviously, you’d need to sanitize this on the server before doing anything with it, as otherwise you’re expose yourself to a XSS attack.


#12

Thank you for that, I really appreciate it. Works great!

I wanted to enlarge the placeholder and I thought I could use this code in the head, but it’s not working.

<style>
  .standalone-container {
    margin: 50px auto;
    max-width: 720px;
  }
  #snow-container {
    height: 350px;
  }
</style>

If I wanted to add, lets say an icon to embed a video, would I have to use their full version by using divs?