我在引导程序模式中使用Tinymce 4.3.10,但它没有显示任何菜单下拉菜单。我发现这是因为bootrap阻止了对话框中内容的所有焦点事件,并尝试按照给定here的代码进行操作,但它对我没有用。
我的代码如下:
<script type="text/javascript" src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea:not(.mceNoEditor)",
browser_spellcheck: true,
force_br_newlines: true,
force_p_newlines: false,
forced_root_block: '',
font_formats: 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;AkrutiKndPadmini=Akpdmi-n;Comic Sans MS=comic sans ms,sans-serif;Times New Roman=times new roman,times;',
fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
plugins: ["textcolor", "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste"],
toolbar: "fontselect | fontsizeselect | forecolor backcolor | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
height: "200",
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.css',
'//www.tinymce.com/css/codepen.min.css'
],
image_title: true,
// enable automatic uploads of images represented by blob or data URIs
automatic_uploads: true,
// URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
images_upload_url: '../postAcceptor',
// images_upload_base_path: 'http://localhost/colorin',
// here we add custom filepicker only to Image dialog
file_picker_types: 'image',
// and here's our custom image picker
file_picker_callback: function (cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
// Note: In modern browsers input[type="file"] is functional without
// even adding it to the DOM, but that might not be the case in some older
// or quirky browsers like IE, so you might want to add it to the DOM
// just in case, and visually hide it. And do not forget do remove it
// once you do not need it anymore.
input.onchange = function () {
var file = this.files[0];
// Note: Now we need to register the blob in TinyMCEs image blob
// registry. In the next release this part hopefully won't be
// necessary, as we are looking to handle it internally.
var id = (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var blobInfo = blobCache.create(id, file);
blobCache.add(blobInfo);
// call the callback and populate the Title field with the file name
cb(blobInfo.blobUri(), {title: file.name});
};
input.click();
}
});
// Prevent bootstrap dialog from blocking focusin
$(document).ready(function(e){
// Bug fix for text fields when opening TinyMCE and/or MoxieManager windows inside a Bootstrap Modal.
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window").length || $(e.target).closest(".moxman-window").length) {
e.stopImmediatePropagation();
}
});
});
</script>
没有js错误,我也尝试切换tinymce.min.js和jquery-1.9.1.min.js的包含位置,但仍然没有改变。
答案 0 :(得分:0)
您是否尝试添加
.mce-menu {position:fixed !important}
这对我有用。
取自:tinymce in bootstrap modal: wrong dropdown position on scroll。
答案 1 :(得分:0)
TinyMce下方的下拉菜单渲染快速修复:
.tox-tinymce-aux {
position: relative !important;
z-index: 1600;
}
在TinyMce 5.0.3,Boostrap 4.3.1和MDB 4.7.6上进行了测试
只需将下拉菜单放在所有其他内容之上即可。