November Happy Hour will be moved to Thursday December 5th.

Tiny MCE in custom legacy property

Vote:
 

I have a custom property frpm EPi 6 and I am trying to run it in EPi 7.5 in legacy mode. The custom property have a Tiny MCE editor. When I open the custom property I get 2 diffrent errors in the console.

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/util/Editor/TinyMCEi18n.aspx?language=sv&path=/tinymce

Uncaught SyntaxError: Unexpected token < 
/util/Editor/tinymce/plugins/OptimizedEditor/editor_plugin.js

The editor is loaded but the insert image popup for example generates more js errors and only an empty popup appears.

Has anyone made a custom property with tiny mce and got it to work in EPi 7+?

#85277
Apr 22, 2014 11:13
Vote:
 

We have a custom property with tinyMCE and we are using a function that creates the editor for us, it looks like this:

require(['tinymce/tiny_mce_src'], function () {

    Window.prototype.CreateTinyMCEEditor = function(settingsJSON, containerForTinyMCE) {

        console.log("Window.prototype.CreateTinyMCEEditor");
        
        var settings = JSON.parse(settingsJSON);

        var plugins = "epilink,epiimageeditor,media,epidynamiccontent,epipersonalizedcontent,epiquote,paste,table,directionality,fullscreen,searchreplace,inserthtmlbutton,advimage,epifilebrowser,epifilemanagerdragdrop,epipageleavecheck,epistylematcher,epiimageresize,epiaccesskeysremove,epieditordisable,episearchreplace,epiexternaltoolbar,epitrailing,epiwindowmanager,epivisualaid";
        var buttons = settings.toolbars;

        $("#" + containerForTinyMCE).height(settings.height);
        $("#" + containerForTinyMCE).width(settings.width);

        tinymce.PluginManager.load('inserthtmlbutton', '/util/Editor/tinymce/plugins/inserthtmlbutton/editor_plugin.js');
        
        var ed = new tinymce.Editor(containerForTinyMCE, {
            theme: "advanced",
            skin: "epi-light",
            skin_variant: '',
            plugins: plugins,
            language: '',
            relative_urls: false,

            theme_advanced_buttons1: buttons.length > 0 ? buttons[0] : "",
            theme_advanced_buttons2: buttons.length > 1 ? buttons[1] : "",
            theme_advanced_buttons3: buttons.length > 2 ? buttons[2] : "",
            theme_advanced_buttons4: buttons.length > 3 ? buttons[3] : "",

            theme_advanced_toolbar_location: "top",
            theme_advanced_toolbar_align: "left",
            theme_advanced_statusbar_location: "bottom",
            theme_advanced_resizing: false,

            content_css: "",

            // Drop lists for link/image/media/template dialogs
            template_external_list_url: "",
            external_link_list_url: "",
            external_image_list_url: "",
            media_external_list_url: ""
        });

        return ed;
    }
});

Then we call it like this, here tinyMCEEditorContainerForTinyMCE is the textarea to add it to (<textarea id="tinyMCEEditorContainer"  style="display: inline-block;"></textarea>)

var ed = CreateTinyMCEEditor(tinySettings, tinyMCEEditorContainerForTinyMCE);
            ed.render();

      

Hope this helps 

 

#85279
Apr 22, 2014 11:33
Vote:
 

I tried your solution Henrik but I still can't get the insert image function to work. I get a bunch of errors and almost empty popup (2 buttons have appeard).

#85296
Apr 22, 2014 16:48
Vote:
 

It feels like there is a javascript error in the loading part or another loading error, I think if you looking at the first message "Resource interpreted as Script but transferred with MIME type text/html: " it could be the main source of the error. Can you publish the whole custom prop code here?

#85300
Apr 22, 2014 17:09
Vote:
 

I found the problem with  weird error. It did'nt find the script files. But after some addition of virtualpath the insert image popup is loading.

I still have some problems left though.

  • The texts on the image popup are not loaded - insted {#advimage_dlg.dialog_title}
  • When I click the browse for file button I get a 404 page. Requested URL: /episerver/UI/CMS/edit/FileManagerBrowser.aspx

I found this http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=81015&epslanguage=en and wonder if this problem include the browse for file from inside the editor as well.

 

#85350
Apr 23, 2014 15:29
Vote:
 

Sorry for late answer.
The 404 on filemanagerbrowser sounds like there are wrong versions in modules or modulesbin (at least it was for me when I had that problem), that might explain the other problems as well

#86075
May 13, 2014 14:35
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.