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

Question

尝试在 JSP.

中的 $(document).ready() 中设置 Froala 编辑器的 HTML 内容时抛出此错误

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

我在其中一个 github 问题中看到，在 Froala 脚本之前包含 jQuery 脚本可能会有所帮助，但事实证明它对我来说没有用。

Alert功能显示要显示的内容。

代码片段：

<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

您似乎使用了 V2 语法。您可以尝试像这样获取编辑器实例 $('.selector')[0]['data-froala.editor']

在您的代码片段中尝试更改这两行：

$('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);

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

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

html

javascript

jquery

jsp

froala