Insert HTML (WYSIWYG editor) into databse (rich text)

Ask the community
,
1

Hi I am trying to insert html element into my database when other inputs get submitted. Im struggling to create javascript for the page.

Here is my code for HTML:

<!DOCTYPE html>

<html>

<head>

  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>  
    <script type="text/javascript">

  tinymce.init({

    selector: '#myeditablediv',

  plugins: ' advlist  casechange formatpainter lists checklist media mediaembed pageembed permanentpen table advtable link image wordcount visualblocks media quickbars pagebreak restoredraft charmap autosave placeholder  ',

  quickbars_insert_toolbar: false,

  quickbars_selection_toolbar: false,

    inline: true,

  toolbar: ' restoredraft | h1 h2 h3 h4 h5 h6 |  bold italic underline   |alignleft aligncenter alignright | upload |formatting2 | bullist numlist casechange  | outdent indent  | formatpainter blockquote pagebreak    ',

  contextmenu: 'undo redo | inserttable  | cell row column deletetable wordcount',

  toolbar_groups: {

    formatting2: {

      icon: 'superscript',

      tooltip: 'Formatting',

      items: ' strikethrough subscript superscript '},

    upload: {

      icon: 'upload',

      tooltip: 'Insert or Upload',

      items: 'link quickimage media | quicktable pageembed | charmap  '},

        },

  menubar: false,

  toolbar_mode: 'floating',

  placeholder: 'Write here

  forced_root_block : true,

  

  mobile: {

    plugins: ' advlist  casechange formatpainter lists checklist media mediaembed pageembed permanentpen powerpaste table advtable link image wordcount visualblocks media quickbars pagebreak restoredraft charmap autosave placeholder   ',

    quickbars_insert_toolbar: 'link quickimage media' ,

    quickbars_selection_toolbar: false,

    toolbar: ' restoredraft | h1 h2 h3 h4 h5 |  bold italic    |alignleft aligncenter | upload | bullist numlist casechange  | blockquote     ',

    inline: true,

  }

  });

 

  </script>

</head>



<body>

 <form method="post">

    <div id="myeditablediv" style="min-height: 100px; outline-style: none;" ></div>

  </form>

</body>

</html>

And here is my page code:

import wixData from 'wix-data';

export function button1_click(event, $w) {

  $w("#html1").postMessage(" ");
  $w("#html1").onMessage((event) => {
    $w("#dataset2").setFieldValue("body", event.data);
    $w("#dataset2").save();
  });
}

It seems I need some help with adding some code in HTML. Please help me out!