Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

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.