javascript - TypeError: $(...).froalaEditor 不是函数 | JSP 中的 $(document).ready(function(){})
问题描述
尝试在 JSP 中的 $(document).ready() 中设置 Froala 编辑器的 HTML 内容时会引发此错误。
TypeError: $(...).froalaEditor 不是函数 | JSP 中的 $(document).ready(function(){})
我在其中一个 github 问题中看到,在 Froala 脚本之前包含 jQuery 脚本可能会有所帮助,但在我的情况下它被证明是没有用的。
警报功能显示要显示的内容。
代码片段:
<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>
解决方案
看起来您使用的是 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);
推荐阅读
- java - 来自 Hibernate 的多级对象的延迟加载
- vue.js - Vue:我可以在计算属性中使用组件过滤器吗?
- javascript - 在概念化如何将 if else 语句更改为 switch 语句时遇到问题
- microsoft-cognitive - 无法获取 Microsoft Academic 的认知服务实验室 API 密钥
- php - 可以在浏览器上使用 URL 发送电子邮件,但在 Angular 上它不起作用
- python - 需要一点帮助来理解 range() 和 len()
- reactjs - 将点击事件传递给子级
- python - GPU Mac Pro AMD OpenCL 上的矩阵乘法错误结果
- python - Python:全局使用局部变量不起作用
- asp.net-mvc - 使用 Jasmine 和 Karma 在 ASP.NET MVC 中对 JavaScript 进行单元测试