orchard cms中的tinymce 4无法上传图片
Tinymce 4 in orchard cms cannot upload images
我用的是 Orchard cms.I 已经安装了 tinymce 4 module.I 上传照片,我的照片显示在编辑器中,但是当我刷新网站时,图像路径改变了,我看不到照片.
图片 url 更改为
../../../../../Media/Default/pic/7-23-2016-10-10-03-PM-300x200.jpg
由于默认的TinyMCE模块有所有的微型插件,默认情况下它会加载其中的一些,那么最好的方法是扩展它并根据需要添加更多插件。
为此,您必须替换模块中的默认 orchard-tinymce.js
文件,并在您的 ResourceManifest
中注册它,以告诉 Orchard 加载您的脚本而不是默认脚本:
ResourceManifest.cs:
public class ResourceManifest : IResourceManifestProvider {
public void BuildManifests(ResourceManifestBuilder builder) {
var manifest = builder.Add();
manifest.DefineScript("OrchardTinyMce").SetUrl("orchard-tinymce.js").SetDependencies("TinyMce");
}
}
orchard-tinymce.js:(可以从\Modules\TinyMce\Scripts\orchard-tinymce.js复制)
var mediaPlugins = "";
if (mediaPickerEnabled) {
mediaPlugins += " mediapicker";
}
if (mediaLibraryEnabled) {
mediaPlugins += " medialibrary";
}
tinyMCE.init({
selector: "textarea.tinymce",
theme: "modern",
schema: "html5",
// Here you can add your plugins
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern",
"fullscreen autoresize" + mediaPlugins
],
// Here you can customize your toolbar
toolbar: "undo redo cut copy paste | bold italic | bullist numlist outdent indent formatselect | alignleft aligncenter alignright alignjustify ltr rtl | " + mediaPlugins + " link unlink charmap | code fullscreen",
convert_urls: false,
valid_elements: "*[*]",
// Shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
extended_valid_elements: "script[type|defer|src|language]",
//menubar: false,
//statusbar: false,
skin: "orchardlightgray",
language: language,
auto_focus: autofocus,
directionality: directionality,
setup: function (editor) {
$(document).bind("localization.ui.directionalitychanged", function(event, directionality) {
editor.getBody().dir = directionality;
});
}
});
您可以根据需要自定义 TinyMCE 初始化配置。
我用的是 Orchard cms.I 已经安装了 tinymce 4 module.I 上传照片,我的照片显示在编辑器中,但是当我刷新网站时,图像路径改变了,我看不到照片. 图片 url 更改为 ../../../../../Media/Default/pic/7-23-2016-10-10-03-PM-300x200.jpg
由于默认的TinyMCE模块有所有的微型插件,默认情况下它会加载其中的一些,那么最好的方法是扩展它并根据需要添加更多插件。
为此,您必须替换模块中的默认 orchard-tinymce.js
文件,并在您的 ResourceManifest
中注册它,以告诉 Orchard 加载您的脚本而不是默认脚本:
ResourceManifest.cs:
public class ResourceManifest : IResourceManifestProvider {
public void BuildManifests(ResourceManifestBuilder builder) {
var manifest = builder.Add();
manifest.DefineScript("OrchardTinyMce").SetUrl("orchard-tinymce.js").SetDependencies("TinyMce");
}
}
orchard-tinymce.js:(可以从\Modules\TinyMce\Scripts\orchard-tinymce.js复制)
var mediaPlugins = "";
if (mediaPickerEnabled) {
mediaPlugins += " mediapicker";
}
if (mediaLibraryEnabled) {
mediaPlugins += " medialibrary";
}
tinyMCE.init({
selector: "textarea.tinymce",
theme: "modern",
schema: "html5",
// Here you can add your plugins
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern",
"fullscreen autoresize" + mediaPlugins
],
// Here you can customize your toolbar
toolbar: "undo redo cut copy paste | bold italic | bullist numlist outdent indent formatselect | alignleft aligncenter alignright alignjustify ltr rtl | " + mediaPlugins + " link unlink charmap | code fullscreen",
convert_urls: false,
valid_elements: "*[*]",
// Shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
extended_valid_elements: "script[type|defer|src|language]",
//menubar: false,
//statusbar: false,
skin: "orchardlightgray",
language: language,
auto_focus: autofocus,
directionality: directionality,
setup: function (editor) {
$(document).bind("localization.ui.directionalitychanged", function(event, directionality) {
editor.getBody().dir = directionality;
});
}
});
您可以根据需要自定义 TinyMCE 初始化配置。