来自 Unisharp的文档 将其与 TinyMCE 4 集成:
<script>
var editor_config = {
/* replace textarea having class .tinymce with tinymce editor */
selector: "textarea.tinymce",
path_absolute : "/",
relative_urls: false,
height: 129,
file_browser_callback : function(field_name, value, type, meta) {
var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
if (type == 'image') {
cmsURL = cmsURL + "&type=Images";
} else {
cmsURL = cmsURL + "&type=Files";
}
tinyMCE.activeEditor.windowManager.open({
file : cmsURL,
title : 'Gestionnaire de fichiers',
width : x * 0.8,
height : y * 0.8,
resizable : "yes",
close_previous : "no"
});
},
/* theme of the editor
theme: "modern",
skin: "lightgray", */
/* width and height of the editor */
width: "100%",
height: 500,
/* display statusbar */
statubar: true,
/* plugin */
plugins: [
"advlist link image autolink autosave link image lists charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table directionality emoticons template paste"
],
/* toolbar */
toolbar: " insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | ltr rtl | insertfile media image link | forecolor backcolor | code preview fullscreen",
/* style */
style_formats: [
{title: "Headers", items: [
{title: "Header 1", format: "h1"},
{title: "Header 2", format: "h2"},
{title: "Header 3", format: "h3"},
{title: "Header 4", format: "h4"},
{title: "Header 5", format: "h5"},
{title: "Header 6", format: "h6"}
]},
{title: "Inline", items: [
{title: "Bold", icon: "bold", format: "bold"},
{title: "Italic", icon: "italic", format: "italic"},
{title: "Underline", icon: "underline", format: "underline"},
{title: "Strikethrough", icon: "strikethrough", format: "strikethrough"},
{title: "Superscript", icon: "superscript", format: "superscript"},
{title: "Subscript", icon: "subscript", format: "subscript"},
{title: "Code", icon: "code", format: "code"}
]},
{title: "Blocks", items: [
{title: "Paragraph", format: "p"},
{title: "Blockquote", format: "blockquote"},
{title: "Div", format: "div"},
{title: "Pre", format: "pre"}
]},
{title: "Alignment", items: [
{title: "Left", icon: "alignleft", format: "alignleft"},
{title: "Center", icon: "aligncenter", format: "aligncenter"},
{title: "Right", icon: "alignright", format: "alignright"},
{title: "Justify", icon: "alignjustify", format: "alignjustify"}
]}
]
};
tinymce.init(editor_config);
</script>
有关 TinyMCE 5 的文档 说:
<script>
tinymce.init({
selector: 'textarea', // change this value according to your HTML
file_picker_callback: function(callback, value, meta) {
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
callback('mypage.html', {text: 'My text'});
}
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
callback('myimage.jpg', {alt: 'My alt text'});
}
// Provide alternative source and posted for the media dialog
if (meta.filetype == 'media') {
callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
}
}
});
</script>
所以我的问题是有没有可能的方法使 UniSharp laravel 文件管理器 与 TinyMCE 5 或 tinyMCE.activeEditor.windowManager.open({file : cmsURL});}, 不再支持
?
最佳答案
- 将 Tinymce 升级到 5.0.6+
如果您之前没有执行过,请执行以下命令:
php artisan vendor :发布 --tag=lfm_view
在“resources/views/vendor/laravel-filemanager/index.php”中替换
{!!\File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/script.js')) !!}
与
{!!\File::get(resource_path('assets/vendor/laravel-filemanager/script.js')) !!}
将“vendor/unisharp/laravel-filemanager/public/js/script.js”复制到 “资源/ Assets /vendor/laravel-filemanager/script.js”。
打开“resources/assets/vendor/laravel-filemanager/script.js”并 在函数“useTinymce3”之后插入以下代码:
函数 useTinymce5(url) { 父.postMessage({ mceAction: '插入', 内容:网址 }); parent.postMessage({ mceAction: '关闭' }); }
然后替换:if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)
与
if ('tinymce5' === getUrlParam('editor')) { useTinymce5(url); } else if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)
配置 Tinymce (https://unisharp.github.io/laravel-filemanager/integration):
var editor_config = { //... file_picker_callback:函数(回调,值,元){ 让 x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; 让 y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
let type = 'image' === meta.filetype ? 'Images' : 'Files', url = editor_config.path_absolute + 'laravel-filemanager?editor=tinymce5&type=' + type; tinymce.activeEditor.windowManager.openUrl({ url : url, title : 'Filemanager', width : x * 0.8, height : y * 0.8, onMessage: (api, message) => { callback(message.content); } }); }
};
从此处下载 TinyMCE 社区 here
关于javascript - UniSharp laravel-filemanager 与 TinyMCE 5 集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55315835/