編輯器的文本區域沒有顯示在jQuery UI對話模式中。相反，狀態欄顯示在工具列的正下方。
我正在使用：
- jquery-3.5.1.min.js 。
- tinymce v5.7.1 。
- bootstrap v4.5.3 。
也許這是一個沖突？下面是我的代碼。
<div id="testdialog"/span>>
<p>TEST</p>
<div>>
< textarea cols="35"/span> rows="5"/span> id="testTinyMCE"/span> name="testTinyMCE"/span> style="padding-left: 10px"></textarea>>
</div>/span>
</div>
< button type="button" onclick='testtiny() ' > 嘗試</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>
uj5u.com熱心網友回復：
考慮到以下情況。https://jsfiddle.net/Twisty/bjhmL61a/
JavaScript
$(function(/span>) {
function initTiny（selector）{
tinymce.init（{
selector: selector
});
}
initTiny("#testTinyMCE") 。
$('#testdialog').dialog({
title: 'Try TinyMCE',
resizable: false,
classes: {
"ui-dialog-content": "form-content": "form-content".
},
modal: true,
autoOpen: false,
width: 650。
});
$("#tryButton").click(function() {
$('#testdialog').dialog('open') 。
});
});
只需做一些調整，似乎就能達到預期的效果。
uj5u.com熱心網友回復：
大家好，感謝你們回答我的問題。這確實是由于css沖突造成的，所以我的解決辦法是修改tox-edit-area和tox-statusbar類中的位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/319946.html
標籤：