TypeError: $(...).froalaEditor is not a function | $(document).ready(function(){}) in JSP

Question

This error is thrown when trying to set HTML content of Froala editor inside $(document).ready() within a JSP.

TypeError: $(...).froalaEditor is not a function | $(document).ready(function(){}) in JSP

I saw in one of the github issues that including jQuery scripts before Froala scripts may help but it proved to be of no use in my case.

Alert function shows the content to be displayed.

code snippet:

<script language="JavaScript" src="/<%=sessionBean.getIniValue("ContextName")%>/bootstrap/js/jquery-1.11.1.js"></script>
    <script language="JavaScript" src="/<%=sessionBean.getIniValue("ContextName")%>/bootstrap/js/jquery-ui.min.js"></script>
    <script language="JavaScript" src="/<%=sessionBean.getIniValue("ContextName")%>/bootstrap/js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="/<%=sessionBean.getIniValue("ContextName")%>/froala_editor_3.1.1/js/froala_editor.pkgd.min.js"></script>
    <script src="/<%=sessionBean.getIniValue("ContextName")%>/froala_editor_3.1.1/js/plugins/table.min.js"></script>
    <script src="/<%=sessionBean.getIniValue("ContextName")%>/froala_editor_3.1.1/js/plugins/colors.min.js"></script>
    <script src="/<%=sessionBean.getIniValue("ContextName")%>/froala_editor_3.1.1/js/plugins/font_family.min.js"></script>
    
    <script>
        var mcontent=<%=memoContent%>;
        
         $(document).ready(function()
            {
            new FroalaEditor('div#textEditor',{
         key:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
         tableStyles: {
        "fr-dashed-borders":"Dashed Borders",
        "fr-alternate-rows":"Alternate Rows",
        class1: 'Thin Borders',
        class2: 'Bold Borders'
      },
      toolbarButtons: ['undo', 'redo' , '|', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass','strikeThrough', 'subscript', 'superscript', 'outdent', 'indent', 'clearFormatting', 'paragraphFormat', 'lineHeight', 'paragraphStyle', 'align', 'orderedList', 'unorderedList', 'quote', 'insertHorizontalLine', 'selectAll', 'fullscreen', 'insertTable', 'html'],
      colorsStep: 10,
      colorsText: ['#61BD6D','#1ABC9C','#54ACD2','#2C82C9','#2C82C9','#475577','#CCCCCC','#918e86','#636362','#000000',
                   '#41A85F','#07f5c5','#32ede7','#16b8c7','#00A885','#3D8EB9','#2969B0','#231bab','#553982','#28324E',
                   '#fff7a1','#F7DA64','#f2c705','#FBA026','#EB6B56','#E25041','#b33909','#A38F84','#91201a','#edbbbb',
                   '#ffc7dd','#ebb3f5','#fc9ff0','#ff99ca','#ed4e9b','#b0135f','#db0b3f','#db0b3f','#702323','#6e330c',
                   '#fcddc7','#ffaca1','#ff9245','#d17e7b','#a8514d','#8c302b','#661330','#400318','#520000','#2b0101',         
      ],
      colorsBackground: ['#61BD6D','#1ABC9C','#54ACD2','#2C82C9','#2C82C9','#475577','#CCCCCC','#918e86','#636362','#000000',
                   '#41A85F','#07f5c5','#32ede7','#16b8c7','#00A885','#3D8EB9','#2969B0','#231bab','#553982','#28324E',
                   '#fff7a1','#F7DA64','#f2c705','#FBA026','#EB6B56','#E25041','#b33909','#A38F84','#91201a','#edbbbb',
                   '#ffc7dd','#ebb3f5','#fc9ff0','#ff99ca','#ed4e9b','#b0135f','#db0b3f','#db0b3f','#702323','#6e330c',
                   '#fcddc7','#ffaca1','#ff9245','#d17e7b','#a8514d','#8c302b','#661330','#400318','#520000','#2b0101',         
      ],
      fontFamily: {
            'Arial,Helvetica,sans-serif': 'Arial',
            "'Brush Script MT',cursive": 'Brush Script',
            'Calibri': 'Calibri',
            'Cambria': 'Cambria',
            'Candara': 'Candara',
            'Copperplate': 'Copperplate',
            'Courier,sans-serif': 'Courier',
            //"'Balsamiq Sans', cursive": 'Balsamiq Sans',
            //"'Dancing Script', cursive": 'Dancing Script',
            //'Didot': 'Didot',
            //'Garamond': 'Garamond',
            'Georgia,serif': 'Georgia',
            //'Geneva': 'Geneva',
            'Helvetica,serif': 'Helvetica',
            'Impact,Charcoal,sans-serif': 'Impact',
            //'Lucida Bright,bold': 'Lucida Bright',
            //'Monaco': 'Monaco',
            //"'Indie Flower', cursive": 'Indie Flower',
            //"'Metal Mania', cursive": 'Metal Mania',
            //"Montserrat,sans-serif": 'Montserrat',
            //"font-family: 'MuseoModerno', cursive": 'MuesoModerno',
            //"Oswald,sans-serif": 'Oswald',
            //"'Open Sans Condensed',sans-serif": 'Open Sans Condensed',
            //"Roboto,sans-serif": 'Roboto',
            //"'Teko', sans-serif": 'Teko',
            //'Tahoma,Geneva,sans-serif': 'Tahoma',
            'Optima': 'Optima',
            'Perpetua': 'Perpetua',
            "'Times New Roman',Times,serif": 'Times New Roman',
            'Verdana,Geneva,sans-serif': 'Verdana'
      },
      fontFamilySelection: true
    });
    
    if(sDocIndex != "" && sDocIndex != null)
    {   
            alert("setting froala content to:"+mContent);
            $('div#textEditor').froalaEditor('html.set', mContent);
        setTimeout(function(){alert("After setting, content is:"+$('div#textEditor').froalaEditor('html.get');)},3000);                         
                
    }
   });

    </script>
    
    <body>
    <div id="textEditor" border="0" align="center" width="100%" height="100%"></div>
    </body>

Answer 1

It looks like you use the V2 syntax. You can try to get the editor instance like this $('.selector')[0]['data-froala.editor']

In your code snippet try to change these two lines:

$('div#textEditor')[0]['data-froala.editor'].html.set(mContent);
        setTimeout(function(){alert("After setting, content is:"+$('div#textEditor')[0]['data-froala.editor'].html.get();)},3000);