TinyMCE for Firefox

Vote:
 

Hello,

I have a problem with the TinyMCE editor in Firefox. The editor doesn't show up in edit mode for Firefox on EPiServer CMS 6 R2 beta. IE8 works however. I have a similar project running on EPiServer CMS 6, but with that version i can't reproduce the problem, i.e. TinyMCE shows up in Firefox. My version for Forefox is 3.6.15, with plugins like Firebug, Html Validator and Web Developer. Operating system is Windows 2008 R2 SP1.

If there were a problem with the configuration in my enviroment, i thought it should be some kind of javascript error in the browser, but Firefox doesn't shows any such errors.

I also checked the EpiServer bug list, but couldn't found any notes about it.

Anyone knows what¨s wrong?

 

Regards

Jens

#49302
Mar 11, 2011 20:12
Vote:
 

I only know about the preview tab problem:
http://blog.fredrikhaglund.se/blog/2010/09/06/issues-with-rendering-in-episerver-preview-tab/

The template's javascript should not run in the editor instances though so this is something different. If you look at the HTML Source of the Edit frame do you see the init-code for each TinyMCE-property?

 

#49305
Mar 12, 2011 11:35
Vote:
 

Hi!

Are your sure that it's tinymce that you get for ie and not the EPiServer CMS 5 editor?

#49325
Mar 14, 2011 7:42
Vote:
 

Johan:

If i look at the html sourcecode for the frame EditPanel.aspx there are an init row for tiny (row 885), it looks like:

<tr ID="RightColumnContentRow2">
   <td colspan="2">
	<script type="text/javascript">
             tinyMCE.init({"mode":"exact","dialog_type":"window","convert_urls":false,"language":false,"content_css":"/Css/editor.css,/Css/screen.css,/Css/general.css","style_formats":[{"title":"Ingress",

etc.

  Maybe there are some other difference in the source code between the two browsers, i haven't had time to analyze the whole file, it contains 964 rows...;)

Linus:

I don't really understand your question. It is for sure the TinyMCE Editor i can see in IE8, how could it be the old EPiServer CMS 5 editor then?

Thank you both for your answers!

#49328
Mar 14, 2011 10:01
Vote:
 

Try to use the Firebug add-on and enable the "Net" tab. Then check for 404- or 500-requests from external files when "Edit page" loads. Could be that you're missing something from /Util or /App_Themes or that a httphandler isn't working.

#49331
Mar 14, 2011 10:07
Vote:
 

Johan:

I got a 404 Not Found for the file:
http://localhost:30000/util/Editor/tinymce/plugins/EditorSettings/editor_plugin.js

Should it be a folder "EditorSettings" in the folder "Plugin" for TinyMCE?
(C:\Program Files (x86)\EPiServer\CMS\6.1.278.0\Application\Util\Editor\tinymce\plugins\)

I have checked the similar file structure for vers 6.0.530.0 and couldn´t find it there neither. But i have no 404 file not found error in Firefox for 6.0.530.0, and the editor shows up.
(C:\Program Files (x86)\EPiServer\CMS\6.0.530.0\Application\Util\Editor\tinymce\plugins\)

 

#49354
Mar 14, 2011 11:12
Vote:
 

Hi!

Can you see the plug-in name in the comma separated list in the tiny init options on the page? I can't reproduce this on either the beta release or my development environment.

#49416
Mar 16, 2011 13:12
Vote:
 

Hi Linus!

The html source code for the frame EditPanel.aspx in FireFox 3.6.15 looks like this:

<script type="text/javascript">
tinyMCE.init({"mode":"exact","dialog_type":"window","convert_urls":false,"language":false,"content_css":"/Css/editor.css,/Css/screen.css,/Css/general.css","style_formats":[{"title":"Ingress","selector":"p","classes":"introductionText"},{"title":"Bildtext","selector":"p","classes":"imageText"},{"title":"Lank med ikon","selector":"a","classes":"linkWithIcon"},{"title":"Lank- och dokumentlista","selector":"li","classes":"linkList"}],"entities":"160,nbsp","theme":"advanced","theme_advanced_layout_manager":"RowLayout","theme_advanced_container_editorcontainer":"mceEditor","theme_advanced_container_statusBar":"mceElementpath","theme_advanced_containers_default_align":"left","theme_advanced_resizing_use_cookie":false,"theme_advanced_path":true,"theme_advanced_resizing":true,"theme_advanced_containers":"row1,row2,editorcontainer,statusBar","theme_advanced_statusbar_location":"bottom","extended_valid_elements":"#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor|scope|axis|headers|abbr|id|class|style|title|dir\u003cltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],#th[colspan|rowspan|width|height|align|valign|scope|axis|headers|abbr|id|class|style|title|dir\u003cltr?rtl|lang|xml::lang|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup]","paste_auto_cleanup_on_paste":true,"theme_advanced_blockformats":"h2,h3,h4,h5,p","width":"640px","height":"300px","skin":"epi-light","epi_page_context":{"id":"10_148","parentId":"3","pageFolderId":"45","epslanguage":"sv","pageTypeId":6},"plugins":"epilink,media,searchreplace,paste,table,highlightedcontent,epiquote,xhtmlxtras,nonbreaking,fullscreen,advlist,wordcount,epifilebrowser,episearchreplace,epieditordisable,epiaccesskeysremove,EditorSettings,epitrailing,epistylematcher,epivisualaid,epipageleavecheck,epifilemanagerdragdrop,epiexternaltoolbar,epiwindowmanager","theme_advanced_container_row1":"epilink,unlink,anchor,image,media,separator,search,replace,removeformat,cut,copy,paste,pastetext,separator,table,delete_table,row_props,cell_props,separator,row_before,row_after,delete_row,separator,col_before,col_after,delete_col,separator,split_cells,merge_cells,separator,highlightcontent","theme_advanced_container_row2":"bold,italic,separator,numlist,bullist,separator,formatselect,styleselect,outdent,indent,separator,epiquote,sup,acronym,strikethrough,hr,nonbreaking,charmap,separator,undo,redo,separator,code,visualaid,fullscreen","elements":"ctl00_FullRegion_PC_160_1_EditForm_MainContent_ctl00","editorwidth":"640px"});
</script>

What I can see from the above code it looks correct?

When I compare it with the html source code from IE 8 I can't see any difference between them.

How about Johans suggestion about the 404 file not found which occurs in Firebug? I got the error on the folder "EditorSettings" which i can't find in the folder structure of EPiServers. There is also a status "Aborted" occurs when the command "Post EditPanel.aspx" running. But both those errors also occurs in another project of mine which are built in EPiServer CMS 6 (not R2 beta). In that project there is no tinymce problem however.

 

I appreciate your help!

#49418
Mar 16, 2011 14:03
Vote:
 

It's the 404 for the EditorSettings that seems to be the cause as you say. I can see that there's a EditorSettings plug-in in the init options but I have no clue how it got there. I can't reproduce this in my environment so I'm wondering if you have done something in your environment that might affect this. Customized the property settings for tinyMCE? Added custom plug-ins for tiny?

By the way, the aborted for editpanel.aspx is somethings else that should not affect this.

#49424
Mar 16, 2011 17:02
Vote:
 

Ah, thank you, you save my day, at last found the problem.

Yes, I have a TinyMCEPluginNonVisualAttribute which sets the blockformats for the dropdown in the editor. That was my solution in EPiServer 6, but it seems to not work in R2 with FireFox? If i comment this block out, the editor shows up in FireFox too.

The plugin looks like:

[TinyMCEPluginNonVisualAttribute(
        AlwaysEnabled = true,
        PlugInName = "EditorSettings",
        DisplayName = "Custom editor init options",
        Description = "Plugin used to override or add settings for the TinyMCE editor.",
        EditorInitConfigurationOptions = @"{
            paste_auto_cleanup_on_paste : true,
            theme_advanced_blockformats : 'h2,h3,h4,h5,p',
            theme_advanced_resizing : true}"
    )]
    public class EditorSettings
    {
    }

I only want H2, H3, H4, H5 and P as selectable formats. Are there any recommendation for this in R2?

#49443
Edited, Mar 17, 2011 10:51
Vote:
 

Ok.

Now I think I know what's going on. You probably got the 404 error in EPiServer CMS 6 but the TinyMCE version used in CMS 6 was not that picky if the plug-in could not be loaded which the R2 version is. To fix this in EPiServer CMS 6 R2 you need to add an empty plug-in (in /util/editor/tinymce/plugins/editorsettings - see the tinymce developers guide). I'll see if I can add another property on the attribute so that it's possible to create a server side only plug-in.

/Linus

#49450
Mar 17, 2011 13:10
Vote:
 

Yes, now it's working. Thank you for your help!

For information to followers of this thread, I just created a javascript file (editor_plugin.js) under the folder (/util/editor/tinymce/plugins/editorsettings/).

(function() {
	tinymce.PluginManager.add('editorsettings', tinymce.plugins.editorsettings);
})();

Linus: Do you have any information about how to combine "EditMenuName" in the editors stylesheet with a language file. For the moment i can´t name the style with swedish characters.

#49454
Mar 17, 2011 15:22
Vote:
 

Hi!

I just posted a blog post with some information about how styles/elements are handled in EPiServer CMS 6 R2:

http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2011/3/Improvements-in-TinyMCE-in-EPiServer-CMS-6-R2/

#49457
Mar 17, 2011 17:03
Vote:
 

I'm having some similar problems, when using TinyMCE built by javascript eg:

<script type="text/javascript" src="/EPiServer/Shell/ClientResources/EPiJQuery.js"></script>
<script type="text/javascript" src="/Util/Editor/tinymce/tiny_mce.js" ></script>
<script src="/main/EPiServer/CMS/javascript/system.js" type="text/javascript"></script>
<script src="/main/EPiServer/CMS/javascript/system.aspx" type="text/javascript"></script>
<script>
tinyMCE.init({
mode: "textareas",
theme: "advanced",
skin: "epi-light",
plugins: "wordcount,epiexternaltoolbar,epilink",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_buttons1 : "link,epilink",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_resizing: true
});
</script>
<textarea name="content" style="width:100%"></textarea>

(Code from http://world.episerver.com/Documentation/Items/Tech-Notes/EPiServer-CMS-6/EPiServer-CMS-6-R2/TinyMCE-Developers-Guide/ )

In ie the TinyMCE loads but if i have ajax enabled they will disapear on any postbacks, if not ajax enabled they work as they should. But the TinyMCE wont load in firefox or safari, firebug dont report any errors.

Anyone knows what is wrong ?

#51419
Jun 08, 2011 9:35
Vote:
 

Hi Mattias.

I tested you code on my local CMS 6 R2 bugfix branch and it works fine for both Firefox 4 and IE 9 (at least after I change the relative URL:s for the resources from the example where they seem to refer to different locations). Regarding the Ajax part, what do you mean with Ajax enabled? A specific library? And what do you do in your Ajax call that affects this?

#51527
Jun 13, 2011 15:41
Vote:
 

We use Teleriks rad controls and we are using their ajax manager.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">

So we can easily disable or enable ajax with the EnableAJAX attribute on the RadAjaxManager.

When the page is posted, becourse we load data into the controls we lose the tiny editor if ajax is enabled.
How did you setup the urls for relative use ? i dont know how many ways ive tried to set them up without any difference.

#51528
Jun 13, 2011 15:51
Vote:
 

Regarding the normalization of the URL:s I just changed your example to point to the same file structure (instead or "/episerver..." and "/main/EPiServer..."). Since using Tiny MCE initialized direct through script is pretty much the same as setting up a Tiny MCE without having EPiServer involved at all I would test combining a stand alone Tiny MCE with the Tad Ajax Manager. And if that does not work I would talk with Telerik.

#51556
Jun 15, 2011 8:32
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.