jQuery UI Widgets Forums Editors Editor what is the correct format to save the content of a editor and re-edit it

This topic contains 2 replies, has 2 voices, and was last updated by  Yavor Dashev 1 year, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • michaelwur
    Participant

    Dear Sir,
    I use a JqxEditor to get a block of text user input. I would like to save the current content which the user enters into a database and support the user to edit it later.

    I refer to the demo code. I use the View Source tool button to get the existing content. It shows the following:

    <div>‚Äč<strong>jqxEditor</strong>
    is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element.
        <br/>
        <br/>Features include:
        <br/>
        <ul>
            <li>Text formatting</li>
            <li>Text alignment</li>
            <li>Hyperlink dialog</li>
            <li>Image dialog</li>
            <li>Bulleted list</li>
            <li>Numbered list</li>
        </ul>
    </div>

    I think it is the data I should save to the database. However, the domo code use the following the initialize the editor:

    <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element. 
            <br />
            <br />
            Features include:
            <br />
            <ul>
                <li>Text formatting</li>
                <li>Text alignment</li>
                <li>Hyperlink dialog</li>
                <li>Image dialog</li>
                <li>Bulleted list</li>
                <li>Numbered list</li>
            </ul>

    I am confused. What format of the html data should I use? Must I escape the html tags to update the editor’s content when I load the content saved in the database?


    michaelwur
    Participant

    The demo uses the following the set the content of the <textarea>:
    (See, the < and > characters are escaped.

    <textarea name=”editor” id=”editor”>
    <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element.
    <br />
    <br />
    Features include:
    <br />

    • Text formatting
    • Text alignment
    • Hyperlink dialog
    • Image dialog
    • Bulleted list
    • Numbered list

    </textarea>


    Yavor Dashev
    Participant

    Hi michaelwir,

    I have created a code example that showcases how to achieve the functionality you need.

    The difference is that I’m saving the jqxEditor value to the browser’s local storage but the main idea was to showcase to you how to load previously saved data for the jqxEditor.

      <script type="text/javascript">
            $(document).ready(function () {
    
                $('#editor').jqxEditor({
                    height: "290px", theme: "arctic",
                    width: '600px'
                });
                
                $('#save').on('click', function () {
                    var value = $('#editor').jqxEditor('val');
                    window.localStorage.setItem('editorValue', value);
                })
    
                $('#load').on('click', function () {
                    var savedValue = window.localStorage.getItem('editorValue');
                    $('#editor').val( savedValue);
                })
    
          
            });
        </script>
        <textarea id="editor">
            <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element. 
            <br />
            <br />
            Features include:
            <br />
            <ul>
                <li>Text formatting</li>
                <li>Text alignment</li>
                <li>Hyperlink dialog</li>
                <li>Image dialog</li>
                <li>Bulleted list</li>
                <li>Numbered list</li>
            </ul>
        </textarea>
        <br><br>
        <button id="save"> Save editor value </button>
    
        <button id="load"> Load editor value </button>
    

    Let me know if that works for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.