1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. How to enact Save to JSON string for plainText and html?

How to enact Save to JSON string for plainText and html?

I’ve been trying to get RTE text and html into a JSON string, so that I can use it in a FileMaker Pro file, but I just can’t get anything to work.  (FileMaker has a web viewer which enables triggering and running javascript inside the web viewer).

This is the code that I’ve been using up ’till now (in another RTE! 😬) and which works fine.  I’m not sure what is the best way to activate/trigger the script for saving the RTE content … is it with keyup, onChange or is there another way for when the cursor is no longer active in the RTE??  What is the best way?  (I need both keyup and onChange for my current setup).

To illustrate what I'm after ... here is a simplified version of my current code (in the other RTE 😬).  Marked in red, are the relevant parts that are used for my FileMaker file.  How do I do this in a Syncfusion-RTE? :


(Vinitha?? If per chance it's you answering ... perhaps you could suggest something with the code you provided in the other thread/question I posted?)


<!DOCTYPE html>

<html lang=’en’>

<head>

<meta charset=’utf-8’>

<meta name='viewport' content='width=device-width, initial-scale=1'>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js'></script> 

<script>

tinymce.init({

selector: '#GSNotes',

  setup: function (editor) {

       editor.on('keyup', function (e) {

            saveRTE(editor);

        });

        editor.on('change', function(e) {

            saveRTE(editor);

        });

  },

inline: true,

inline_styles : true,

inline_boundaries: true,

toolbar_location: 'top',

toolbar_mode: 'floating',

paste_data_images: true,

insertdatetime_element: true,

plugins: 'table image quickbars searchreplace advlist lists link autolink media codesample insertdatetime  blockquote wordcount accordion ',

quickbars_selection_toolbar: ' link  | bold italic underline strikethrough forecolor backcolor  | fontsize | accordion  | wordcount removeformat ',

toolbar: '  insertdatetime   | hr styles indent outdent listGroup  | insertgroup   |   searchreplace ' , 

codesample_languages: [

        {text: 'HTML/XML', value: 'markup'},

        {text: 'JavaScript', value: 'javascript'},

        {text: 'CSS', value: 'css'}

    ],

});

</script></head><body>

<div id= 'GSNotes'>  " & RTE_🌐::TEST_Note_html & " </div> 

<script>

const saveRTE = function() {

const textPlain = tinymce.get('GSNotes').getContent({ format: 'text' });

const textHTML = tinyMCE.get('GSNotes').getContent();

const jsonARR = { textPlain, textHTML };

FileMaker.PerformScriptWithOption ( 'RTE-DATA', JSON.stringify(jsonARR) , '5' );

}

</script>

</body>

</html>



5 Replies
VJ Vinitha Jeyakumar Syncfusion Team March 4, 2024 10:44 AM UTC

Hi Grant Symon,


Your requirement to get the current value of the Editor on every edit in the Editor can be achieved by using the saveInterval and autoSaveOnIdle properties along with change event like below,


Code snippet:

 
<script>
    var defaultRTE = new ej.richtexteditor.RichTextEditor({
        inlineMode: {
            enable: true,
            onSelection: true
        },
        toolbarSettings: {
            items: ['Bold', 'Italic', 'Underline',
                'Formats', '-', 'Alignments', 'OrderedList', 'UnorderedList',
                'CreateLink']
        },
        format: {
            width: 'auto'
        },
        fontFamily: {
            width: 'auto'
        },
        saveInterval: 1,
        change: change,
        autoSaveOnIdle: true
    });
    defaultRTE.appendTo("#defaultRTE");
    function change(args){
        console.log(args.value);
    }
   


</script>


The autoSaveOnIdle enables or disables the auto-save option which performs the save action while in the idle state after typed content. If enabled, the Rich Text Editor will save the content on idle state with saveInterval property’s value. The change event will be triggered if the content has changed from the last saved state.


The saveInterval specifies the saveInterval in milliseconds for autosave the value. The change event will be triggered if the content was changed from the last saved interval.

Regards,
Vinitha



GS Grant Symon March 4, 2024 02:29 PM UTC

Thank you Vinitha,

I wasn't sure if it was better to use a change event or a blur event (when the RTE is exited).

I know this is probably really really simple for you, but I'm struggling.  Could you please show me how to get the args.value for plain text and html into my const jsonARR?


VJ Vinitha Jeyakumar Syncfusion Team March 5, 2024 06:55 AM UTC

Hi Grant Symon,


Your requirement to get the Text and HTML value of the Editor can be achieved by using the getText and getHtml public methods in the change event along with saveInterval,


Code snippet:

<script>
    var defaultRTE = new ej.richtexteditor.RichTextEditor({
        inlineMode: {
            enable: true,
            onSelection: true
        },
        toolbarSettings: {
            items: ['Bold', 'Italic', 'Underline',
                'Formats', '-', 'Alignments', 'OrderedList', 'UnorderedList',
                'CreateLink']
        },
        format: {
            width: 'auto'
        },
        fontFamily: {
            width: 'auto'
        },
        saveInterval: 1,
        change: change,
        autoSaveOnIdle: true
    });
    defaultRTE.appendTo("#defaultRTE");

    function change(args){        
        const textPlain = defaultRTE.getText();
        const textHTML = defaultRTE.getHtml();
        const jsonARR = { textPlain, textHTML };
        console.log(textPlain, textHTML);
    }
   


</script>




Regards,
Vinitha

GS Grant Symon March 6, 2024 09:31 PM UTC

Thank you once again Vinitha...

I'm 'up and running' now. 😊  … and of course, inevitably, I’ve got a few more questions too 🙂.


VJ Vinitha Jeyakumar Syncfusion Team March 7, 2024 04:42 AM UTC

Hi Grant Symon,



You are welcome. Please get back to us if you need any further assistance.


Regards,

Vinitha


Loader.
Up arrow icon