TinyMCE save source to HTML file

Question

I'm new in TinyMCE. I want to use it for editing several HTML files. Is it possible?

Example: file_to_edit.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="C:\Soft\TinyMCE\tinymce\js\tinymce\tinymce.min.js" referrerpolicy="origin"></script>
    <script>
      tinymce.init({
        selector: 'textarea#mytextarea',
        mode: 'textareas',
        plugins: 'code, save',
        toolbar: 'code | save',
        save_enablewhendirty : true,
        save_onsavecallback: () => {
        },
        object_resizing: false
      });
    </script>
  </head>

  <body>
    <h1>Long attribute description</h1>
    <form>
      <textarea id="mytextarea">Attribute description</textarea>
      <h2>HTML output</h2>
    <div class="HTMLContainer"></div>
    </form>
  </body>
</html>

Question : I want to change the text in mytextarea field by using TinyMCE

I tried several options but there was no result:

I added the "Save" plugin and tried to use "Save" toolbar button to save the text. But there was no reaction.
I added tinymce.triggerSave() method in save_onsavecallback lambda
I used tinymce.activeEditor.save() method
I tried to change the editor mode tinymce.mode.set("design")
tinymce.activeEditor.getContent() and tinymce.activeEditor.setContent() methods

Answer 1

To find out what's going on with the save feature, I've added a function and a button to to your example to try the setContent API method again.

Running the demo, pressing the save button does set the content in the editor, but then the page refreshes (I'm guessing that's because of the save options enabled - hopefully that's the goal here).

I also removed the whitespace between save_enablewhendirty and the : which may have also been causing the errors and stopping the save working.

Demo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="/tinymce/js/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
      tinymce.init({
        selector: 'textarea#mytextarea',
        mode: 'textareas',
        plugins: 'code, save',
        toolbar: 'code | save',
        save_enablewhendirty: true,
        save_onsavecallback: () => {
        },
        object_resizing: false
      });
    </script>
  </head>

  <body>
    <h1>Long attribute description</h1>
    <form>
      <textarea id="mytextarea">Attribute description</textarea>
      <h2>HTML output</h2>
    <div class="HTMLContainer"></div>
    <button id='buttonS'>Save</button>
    </form>
  </body>
<script>
    function saveEditor() {
        tinymce.get("mytextarea").setContent("<p>Content set!</p>");
      }
    var buttonLine = document.getElementById('buttonS');
    buttonLine.addEventListener('click', saveEditor, false);
</script>
</html>

There is also some content available on setting up the save plugin with node.js for testing out saving editor contents with something close to what might happen in production: https://www.tiny.cloud/blog/set-up-the-tinymce-save-plugin/

TinyMCE save source to HTML file

Question

1 answers

solution1
0 ACCPTED 2022-12-08 06:12:48

TinyMCE save source to HTML file

Question

1 answers

solution1 0 ACCPTED 2022-12-08 06:12:48

solution1
0 ACCPTED 2022-12-08 06:12:48