Search code examples
javascriptjquerytinymcewysiwyg

How to get value from WYSIWYG with Javascript or using the help of JQuery maybe?


I want to ask. I wanted to create a blog, but used a Microsoft word-style text editor. If suppose using vanilla javascript or pure javascript or using the help of JQuery?

MY code:

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <!-- CDN WYSIWYG (TINYMICE) -->
    <script src="https://cdn.tiny.cloud/1/fjxlmvgx0f36t65lwkpdwdyrxxahi85ni9wp3e2xp17gjitr/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
    <!-- Text-Area -->
    <textarea id="my_text"></textarea>
    <!-- Button Get Value -->
    <button id="value_button">Get Value</button>

    <script>
        // Install WYSIWYS (TINYMICE)
        tinymce.init({
            selector: 'textarea',
            plugins: 'a11ychecker advcode casechange export formatpainter image editimage linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tableofcontents tinycomments tinymcespellchecker',
            toolbar: 'a11ycheck addcomment showcomments casechange checklist code export formatpainter image editimage pageembed permanentpen table tableofcontents',
            toolbar_mode: 'floating',
            tinycomments_mode: 'embedded',
            tinycomments_author: 'Author name',
          });

        // Dom (get id:my_text & value_button)
        let my_text = document.getElementById("my_text");
        let value_button = document.getElementById("value_button");

        // get value in console
        value_button.addEventListener("click",()=>{
            console.log(my_text.value)
        })
      </script>

I want to get the value first. Like wanting to write "Thursday"

Perhaps, what appears is "<p>Thursday</p>"

My obstacle, I typed whatever the value is ""(empty)

Note: My WYSIWYG is TinyMice

However, if you have another type of WYSIWYG, I will try it Thankyou


Solution

  • TinyMCE has an API to get its current content:

    getContent() - https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#getcontent

    For some background, when you load TinyMCE it overlays your textarea with an iframe so when you are typing into TinyMCE you are not updating the textarea.

    That being said, there is an API call to make TinyMCE push its current content back into the textarea:

    triggerSave() - https://www.tiny.cloud/docs/api/tinymce/root_tinymce/#triggersave

    ...so if you need to do something specifically with the textarea you can call triggerSave() first.