TinyMCE 编辑器未显示在 JQuery UI 对话框中
TinyMCE Editor not showing inside JQuery UI Dialog
jQueryUI 对话框模式中未显示编辑器文本区域。相反,状态栏显示在工具栏的正下方。
我正在使用:
- jquery-3.5.1.min.js
- tinymce v5.7.1
- bootstrap v4.5.3
可能是冲突了?下面是我的代码。
<div id="testdialog">
<p>TEST</p>
<div>
<textarea cols="35" rows="5" id="testTinyMCE" name="testTinyMCE" style="padding-left: 10px"></textarea>
</div>
</div>
<button type="button" onclick='testtiny()'>Try</button>
<script>
$(function(){
$('#testdialog').dialog({
'title':'Add Form Field',
'resizable': false,
'dialogClass':'form-content',
'modal': true,
'autoOpen': false,
'open':function(){
initTiny();
},
'width':650
});
});
function initTiny(){
tinymce.init({
selector: '#testTinyMCE'
});
}
function testtiny(){
console.log('opening the dialog');
$('#testdialog').dialog('open');
}
</script>
考虑以下因素:https://jsfiddle.net/Twisty/bjhmL61a/
JavaScript
$(function() {
function initTiny(selector) {
tinymce.init({
selector: selector
});
}
initTiny("#testTinyMCE");
$('#testdialog').dialog({
title: 'Try TinyMCE',
resizable: false,
classes: {
"ui-dialog-content": "form-content"
},
modal: true,
autoOpen: false,
width: 650
});
$("#tryButton").click(function() {
$('#testdialog').dialog('open');
});
});
仅进行了一些调整,它似乎按预期工作。
大家好,感谢您回答我的问题。确实是css冲突,所以我的解决方法是修改tox-edit-area和tox-statusbar的位置class.
jQueryUI 对话框模式中未显示编辑器文本区域。相反,状态栏显示在工具栏的正下方。
我正在使用:
- jquery-3.5.1.min.js
- tinymce v5.7.1
- bootstrap v4.5.3
可能是冲突了?下面是我的代码。
<div id="testdialog">
<p>TEST</p>
<div>
<textarea cols="35" rows="5" id="testTinyMCE" name="testTinyMCE" style="padding-left: 10px"></textarea>
</div>
</div>
<button type="button" onclick='testtiny()'>Try</button>
<script>
$(function(){
$('#testdialog').dialog({
'title':'Add Form Field',
'resizable': false,
'dialogClass':'form-content',
'modal': true,
'autoOpen': false,
'open':function(){
initTiny();
},
'width':650
});
});
function initTiny(){
tinymce.init({
selector: '#testTinyMCE'
});
}
function testtiny(){
console.log('opening the dialog');
$('#testdialog').dialog('open');
}
</script>
考虑以下因素:https://jsfiddle.net/Twisty/bjhmL61a/
JavaScript
$(function() {
function initTiny(selector) {
tinymce.init({
selector: selector
});
}
initTiny("#testTinyMCE");
$('#testdialog').dialog({
title: 'Try TinyMCE',
resizable: false,
classes: {
"ui-dialog-content": "form-content"
},
modal: true,
autoOpen: false,
width: 650
});
$("#tryButton").click(function() {
$('#testdialog').dialog('open');
});
});
仅进行了一些调整,它似乎按预期工作。
大家好,感谢您回答我的问题。确实是css冲突,所以我的解决方法是修改tox-edit-area和tox-statusbar的位置class.