AJAX Extender for TinyMCE continued

The code for this article and a sample website can be downloaded here. An online version of the sample website can also be found at http://www.cdevos.nl/examples/example1.aspx.
This article is a continuation of the previous AJAX Extender for TinyMCE which can be found http://weblogs.asp.net/cjdevos/archive/2008/03/03/ajax-extender-for-tinymce-including-fix-for-updatepanels.aspx

The download provided does not contain tinymce. Please download it seperately.

After I published the previous AJAX Extender it got quite some attention, questions and remarks and was obviously wanted by the community. Because of this reason and my own frustrations with the limitations of the current extender I used some spare time to create a new version with options to easily configure a tinymce editor on any textarea element, totally independent of the other element.

The results of all the work can be found in the sample website.

All there is to adding a tinymce editor to any textarea element looks like:

<asp:textbox runat="server" TextMode="MultiLine" id="Textbox1" Text="This is some content that will be editable with TinyMCE." />
<tm:TinyMCETextBoxExtender ID="TinyMCETextBoxExtender1"
    runat="server"
    TargetControlId="content"
    />
 

Customization of the control can be obtained by using the InitList property and adding the elements much like:

<asp:textbox runat="server" TextMode="MultiLine" id="content" Text="This is some content that will be editable with TinyMCE." />
<tm:TinyMCETextBoxExtender ID="TinyMCETextBoxExtender1" 
    runat="server" 
    TargetControlId="content"
    Theme="advanced"
> 
    <InitList>
        <tm:TinyMCETextBoxInit Var="Plugins" Value="safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template" />
        <tm:TinyMCETextBoxInit Var="Theme_Advanced_Buttons1" Value="bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink" />
        <tm:TinyMCETextBoxInit Var="Theme_Advanced_Buttons2" Value="" />
        <tm:TinyMCETextBoxInit Var="Theme_Advanced_Buttons3" Value="" />
        <tm:TinyMCETextBoxInit Var="Theme_Advanced_Buttons4" Value="" />
        <tm:TinyMCETextBoxInit Var="Theme_Advanced_Toolbar_Location" Value="Top" />
        <tm:TinyMCETextBoxInit Var="Theme_Advanced_Toolbar_Align" Value="Left" />
        <tm:TinyMCETextBoxInit Var="Theme_Advanced_Statusbar_Location" Value="Bottom" />
        <tm:TinyMCETextBoxInit Var="Extended_Valid_Elements" Value="a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]" />
    </InitList>
</tm:TinyMCETextBoxExtender>
 

And it gets even better when you put the above in a .skin file

<asp:textbox runat="server" TextMode="MultiLine" id="content" Text="This is some content that will be editable with TinyMCE." />
<tm:TinyMCETextBoxExtender ID="TinyMCETextBoxExtender1" 
    runat="server" 
    TargetControlId="content"
    SkinID="CustomSkin"
    />
 

38 Comments

  • I looked at your new version a bit, looks good. I like the option enum you implemented.

    I definetly agree about &quot;validateRequest&quot; I don't believe it should EVER be turned off. The problem was, in my case, unless I came up with an alternative solution that would have been my only choice. The way I implemented is using tinyMCE core functionality (cleanup_callback and save_callback) events. All it is doing is changeing all &lt;&gt; characters into their html equivilants so even if the code was printed directly to a website it would only display it as such and not interperate it as html or script code. Not only that, but if you use tinyMCE correctly it prevents unauthorized tags from being passed.

    That's just my &quot;two cents&quot; ;).

  • 1. Did you upload the control?
    2. Does your online web.config contain all the configuration elements required to get AjaxControlToolkit to work? Some elements (like ScriptResource.axd) are used to extract the resource from the assembly.

  • Hi...
    I'm desperately trying to get this working in ASP.NET 3.5 (VS2008) but when I rebuild the site I get this error...
    Unable to create type 'cc:TinyMCETextBoxExtender'. Could not load file or assembly 'AjaxControlToolkit, Version=1.0.10920.32880, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)
    I've copied TinyMCETextBox.dll from the download into my BIN folder. I'm using a AJAX enabled site so already have AjaxControlToolkit.dll but it's version 3.0.20229.0 rather than 1.0.10920.0. My web.config looks fine btw.
    Any help would be really appreciated.
    Thanks

  • Hi Stuart,

    Please open the project. Remove the AjaxControlToolkit reference (and dll) and recreate the reference to the newer AjaxControlToolkit that you are using.

    Once recompiled it should work.

    Cheers,
    CJ.

  • Hi CJ...

    Thank you very much for your help, I really appreciate it. It's now working perfectly.

    Stuart

  • Does this control only work with version 1 of the Ajax Control Toolkit? I can't seem to get it to work with v3.5

  • Oops, I forgot you get the source code with the download! Ignore my previous post, I just changed the reference in the project and recompiled

  • Is anyone else getting a 'e is null' javascript error (in the tiny_mce file) when using the 3.5 ajax control toolkit? As far as I can see 'e' is a reference to the tinymce textarea. The postback doesn't hold the value in the textarea either...

  • Thanks for the awesome work! I'm having great success with IE, but not working properly with Firefox 3.0. After a first postback, the editor disappears. After another postback, it works again. I haven't really delved into the code but I'm not sure what is up... any theories? The problem can be easily reproduced by visiting the demo site above in FF 3 and hitting the postback button.

  • I'm getting the "e is null" error in firefox when I just take take the sample site, use one control in an update panel and convert it to use master pages. The first time I submit I get the error. But then if I submit again the error doesn't appear?

  • Hmm, I'm not sure what's going on here. I've been digging for a little while now, and have still come up empty as to why this isn't working. In IE7 the RTE doesn't even load. In FF2 it loads, but Firebug throws an error.

    TinyMCETextBox is not defined
    $create(TinyMCETextBox.TinyMCETextBoxBehavior...)

    I looked at it seems that the Type.registerNamespace isn't being executed. Somehow the js resource for behaviors isn't being loaded? I checked the project & it's an embedded resource.

    I figured I'd leave a post here & see if it's my own stupidity doing this, or if it's a genuine bug. I'd appreciate any feedback I can get, and thanks a lot for the control! The effort is very appreciated. If I do anything different with it, I'll certainly let you know.

  • I'm having a problem with this extender. I have a treeview of files in a directory that will be loaded into the editor, but when I click on a file and load its contents into the editor, tinyMCE disappears and only shows the textarea. What could be the problem here?

    Thanks

  • This extender is great! I have used the first version for a while, but after the release of Firefox 3 it stoped work properly. The toolstrip in TinyMCE is visible but the textarea part is laying behind the controle and is not visible. I have downloaded this later version and discovered that the problem remains.

    Does anyone have the same problem or is it somehing in my settings I can change to resolve this issue.

  • I should have mentioned that it works fine in IE7, but not in FF3. It only not loads the first time a node from the treeview is clicked. After that, each selection properly loads into the editor.

    Anybody else having issues with FF3?

  • Have been on quite a nice holiday and noticed the many lot of comments. Thank you!

    Again - it might take a little while but I have made note of your comments and will work on the implementation for VS2008, AjaxControlToolkit3.5 and even FireFox 3.
    When released it will probably become a community project as well so it is easier for others to help.

  • Sounds great, thanks!

  • Good extender, but he need ability to specify path for tinymce directory

  • Nice work, question: is this work also on opera and firefox? i tested, it seems to be working ok only in ie, on opera anf ff, editor is gone.

  • Above someone siad they got the extneder to work wiht 2008/3.5 and the newer ajax toolkit. I removed the reference and re added it, and it still does not work?

    Is there any solution yet?

    And, since I can't get it to work, I'm wondering if this will allow postback and not get the 500 error?

  • Great work, Siets. Hope your work is doing progress. I would really appreciate if you put the project on Codeplex as you hinted in a earlier post.
    I think alot of developers who used this piece of code has done some modifications to it that makes it even better.
    If we had it on codeplex we could all contribute to the source.

  • There is an easy fix for FireFox 3. Change the mode attribute to none, instead of textareas. This seems to fix the problem - but I will delve a bit more into it now I have the time available again.

  • Never mind, this was my mistake... remember to turn your smart navigation off when using this control!

  • I have rebuilt the extender with the newest version of the AJAX Control toolkit, changed the mode attribute to none for Firefox and added the black o2k7 skin. All is well except for posting back in an update panel in Firefox 3. When I do a partial postback the editor is reloaded without the data. If I do a full page postback the data returns. Do you have any ideas on a fix for this issue?

  • Noticed an odd little bug, when you add stuff to the init list via the extender, when adding var's that take a boolean value, the extender will pass the following to tinyMCE.init:

    var : 'true' or var : 'false'...

    Which is always true... since any non null string returns evaluates to true in javascript. This is a big time bug when needing to turn off certain tinyMCE (in my case converting url's)

  • Although, that can be fixed by leaving the string empty, which javascript evaluates to false. ;)

  • Hi,

    I've downloaded the last version of this extender and tried to deploy it on vs2008 .net 3.5.

    Went through the step of opening the project, replace the Ajax 1 reference with Ajax 3 refence, but still I'm getting an error when trying to run it...

    basically it returns an object reference not set to an instance of an object at: this.Page.Header.Controls.Add(Include);

    wheren header is returning null.

    Am I missing some type of configuration? PLS help!!!!

    Thanks A lot

  • Hi people,

    I've an js error like: tinyMCE is not defined

    I use VS2008/.NET3.5....and I use AjaxToolKit v3.

  • I tested your live example1 in Firefox 3 and find that the TinyMCE disappears on postback. Has there been any resolution for Firefox 3 yet?

  • Interessante Informationen.

  • Sehr wertvolle Informationen! Empfehlen!

  • I only have visual web developer and can't build dlls. I need a version compat with 3.0.20820 ajaxcontroltoolkit.dll

  • How can I access the value of tinyMCE editor in codebehind to save it to the database?

  • Is very good control, but how to decide the issue with the error data?

  • I just want to add my thanks for this extender. Having thought I'd cured my tinyMCE/UpdatePanel issues, I found this which really did solve them. I did have to recompile it because I have a customised version of the AjaxToolkit, but it worked perfectly. Thanks.

  • New Ajax Toolkit and Im getting the error:
    Could not load file or assembly 'AjaxControlToolkit, Version=3.0.20820.16598,

  • Its OK, I just updated the project to .net 3.5 and added the latest AJAX Toolkit

  • It works good but a little bug occurs if I turn off partialrendering on the scriptmanager so I can see exceptions properly.

  • as spell check doenot work properly i used what kelvin luck suggested in his blog

    so please can anyone tell me how to use this functionality in the above extender...

Comments have been disabled for this content.