Tinymce 4 in orchard cms cannot upload images

Question

I use Orchard cms.I had installed tinymce 4 module.I upload a photo,my photo is shown in editor but when I refresh the website the path of image is change and I cant see the photo. the image url changed to ../../../../../Media/Default/pic/7-23-2016-10-10-03-PM-300x200.jpg

Answer 1

Since the default TinyMCE module has all tiny plugins, by default it will load some of them,then the best way is to extend it and add more plugins as you want.

To do this, you have to replace the default orchard-tinymce.js file in your module, and register it in your ResourceManifest, to tell Orchard to load your script instead of the default one:

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: (You can copy it from \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;
        });
    }
});

You can customize TinyMCE initialize configuration as you need.