Using script in Custom HTML UI Component

Hey all,

I’m trying to include a WYSIWYG editor into the Backendless UI. My approach was to load TinyMCE’s editor using the Custom HTML UI Component. I included the following HTML (and used the according API key):

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/API-KEY/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
  <textarea>
    Welcome to TinyMCE!
  </textarea>
  <script>
    tinymce.init({
      selector: 'textarea',
      plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage tinycomments tableofcontents footnotes mergetags autocorrect',
      toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
      tinycomments_mode: 'embedded',
      tinycomments_author: 'Author name',
      mergetags_list: [
        { value: 'First.Name', title: 'First Name' },
        { value: 'Email', title: 'Email' },
      ],
    });
  </script>
</body>
</html>

Although the component itself is loading the body area of the HMTL (the textarea) it won’t load anything different. I replaced everything with a simple HTML script and tried again, but this failed too. I’m quite puzzled by the outcome. Is there a limitation regarding the usage of HTML scripts or am I missing something else here? Im open for alternative suggestions that lead to the same result (having a working WYSIWYG editor in BL UI) too. Appreciate your help!

Best,
Anton

Hello @Anton_Henkelmann

Welcome to the community and thank you for trying Backendless!
Your code snippet contains HTML tags which can be used only once on a web page, html/head/body

I would recommend you try to create your own React Component using the library.

We’ve got a similar component but it’s on the testing stage yet, but you can use it as a sample ui-builder-library/components/bl-rich-editor-component at main · Backendless/ui-builder-library · GitHub

Regards, Vlad

Hey Vlad,

Your proposed solution worked perfectly. Thank you for the fast response and awesome help!