Editor "Prometheus" in CommunityServer 2007

[Maxim Minkov]

Im has decided to try to integrate Editor in CommunityServer 2007, after read
thread
http://www.telerik.com/community/forums/thread/b311D-mdmhe.aspx
and having looked sources of wrapper I on tried to make this too
most for Editor from "Prometheus" project. The first with what was the
problem: it "System. InvalidOperationException: The control with ID '
Editor ' requires a ScriptManager on the page. The ScriptManager must
appear before any controls that need it. ".

For the decision of a problem it was necessary to write wrapper which
creates inside of itself instance Editor, configures it, and then creates
instance ScriptManager and adds in wrapper collection of controls all over
again a instance of ScriptManager, and then a instance of Editor, code of wrapper:

public class RadEditorWrapper : WebControl, ITextEditor, ITextControl
    {
        private Dictionary<string, string> configOptions = new Dictionary<string, string>();
        private bool _enableHtmlModeEditing = true;
        private static bool smAdded = false;
        private RadEditor editor;
        private ScriptManager scriptManager;

        #region ITextEditor Members

        public void ApplyConfigurationOption(string name, string value)
        {
            //Save config options
            if (configOptions.ContainsKey(name))
                configOptions[name] = value;
            else
                configOptions.Add(name, value);

            //Try to set control properties
            Type t = editor.GetType();
            System.Reflection.PropertyInfo pi = t.GetProperty(name);
            if (pi != null)
            {
                if (pi.PropertyType == typeof(string))
                {
                    pi.SetValue(editor, value, null);
                }
                else if (pi.PropertyType == typeof(int))
                {
                    pi.SetValue(editor, int.Parse(value), null);
                }
            }
        }

        public int Columns
        {
            get
            {
                return 80;
            }
            set
            {

            }
        }

        public bool EnableHtmlModeEditing
        {
            get
            {
                return this._enableHtmlModeEditing;
            }
            set
            {
                this._enableHtmlModeEditing = value;
            }
        }

        public string GetBookmarkScript()
        {
            return "";
        }

        public string GetContentInsertScript(string contentVariableName)
        {
            return string.Format("$find(\"<%={1}%>\").pasteHtml('{0}');", contentVariableName, this.ClientID);
        }

        public string GetContentScript()
        {
            return string.Format("$find(\"<%={0}%>\").get_Html(true);", this.ClientID);
        }

        public string GetContentUpdateScript(string contentVariableName)
        {
            return string.Format("$find(\"<%={1}%>\").set_Html('{0}');", contentVariableName, this.ClientID);
        }

        public string GetFocusScript()
        {
            return string.Format("$find(\"<%={0}%>\").setFocus();", this.ClientID);
        }

        public bool IsSupported(System.Web.HttpBrowserCapabilities browser)
        {
            return true;
        }

        public bool IsRichTextCapable
        {
            get { return true; }
        }

        public int Rows
        {
            get
            {
                return 20;
            }
            set
            {
            }
        }

        #endregion

        #region ITextControl Members

        public string Text
        {
            get
            {
                return editor != null ? editor.Content : string.Empty;
            }
            set
            {
                if (editor != null)
                    editor.Content = value;
            }
        }

        #endregion

        public RadEditorWrapper()
        {
            editor = CreateRadEditor();
            editor.ID = "RadEditor";

            scriptManager = new ScriptManager();
            scriptManager.EnablePartialRendering = true;
            scriptManager.ID = "RadEditorScriptManager";
        }

        protected override void CreateChildControls()
        {
            if (!smAdded)
            {
                this.Controls.Add(scriptManager);
                smAdded = true;
            }

            this.Controls.Add(editor);
        }
        protected override void OnUnload(EventArgs e)
        {
            smAdded = false;

            base.OnUnload(e);
        }

        private RadEditor CreateRadEditor()
        {
            RadEditor editor = new RadEditor();

            editor.Modules.Clear();

            //DialogDefinition insertEmoticonDialogDefinition = new DialogDefinition("~/EmoticonsDialog.ascx", new DialogParameters());
            //insertEmoticonDialogDefinition.Modal = true;
            //insertEmoticonDialogDefinition.VisibleTitlebar = true;
            //insertEmoticonDialogDefinition.VisibleStatusbar = false;
            //insertEmoticonDialogDefinition.Width = Unit.Pixel(250);
            //insertEmoticonDialogDefinition.Height = Unit.Pixel(250);
            //editor.AddDialogDefinition("Emoticons", insertEmoticonDialogDefinition);

            InitToolbar(editor);
            SetImageManagerProps(editor);

            return editor;
        }

        private void SetImageManagerProps(RadEditor editor)
        {
            string baseVirtualPath = "~/UserImages";
            string cuurentUserName = CurrentUserName.LastIndexOf('\\') < 0 ? CurrentUserName : CurrentUserName.Substring(CurrentUserName.LastIndexOf('\\') + 1);

            if (!IsMember)
                return;

            string basePath = HttpContext.Current.Server.MapPath(baseVirtualPath);
            string userPath = string.Format("{0}\\{1}", basePath, cuurentUserName);
            string userVirtualPath = string.Format("{0}/{1}", baseVirtualPath, cuurentUserName);

            if (!Directory.Exists(basePath))
                Directory.CreateDirectory(basePath);
            if (!Directory.Exists(userPath))
                Directory.CreateDirectory(userPath);

            editor.ImageManager.UploadPaths = new string[] { userVirtualPath };
            editor.ImageManager.ViewPaths = new string[] { userVirtualPath };
            editor.ImageManager.MaxUploadFileSize = 5242880; // 5 Mb
        }

        private void InitToolbar(RadEditor editor)
        {
            EditorToolGroup group = new EditorToolGroup();

            group.Tools.Add(new EditorTool("Bold"));
            group.Tools.Add(new EditorTool("Underline"));
            group.Tools.Add(new EditorTool("Italic"));
            group.Tools.Add(new EditorSeparator());
            group.Tools.Add(new EditorTool("JustifyLeft"));
            group.Tools.Add(new EditorTool("JustifyCenter"));
            group.Tools.Add(new EditorTool("JustifyRight"));
            group.Tools.Add(new EditorTool("JustifyFull"));
            group.Tools.Add(new EditorTool("JustifyNone"));
            group.Tools.Add(new EditorSeparator());
            group.Tools.Add(new EditorTool("ForeColor"));
            group.Tools.Add(new EditorTool("BackColor"));
            group.Tools.Add(new EditorSeparator());
            if (IsMember)
            {
                group.Tools.Add(new EditorTool("ImageManager"));
                group.Tools.Add(new EditorSeparator());
            }
            group.Tools.Add(new EditorTool("InsertOrderedList"));
            group.Tools.Add(new EditorTool("InsertUnorderedList"));
            group.Tools.Add(new EditorTool("InsertSymbol"));
            group.Tools.Add(new EditorTool("InsertHorizontalRule"));
            group.Tools.Add(new EditorSeparator());
            group.Tools.Add(new EditorTool("LinkManager"));
            group.Tools.Add(new EditorTool("Unlink"));
            group.Tools.Add(new EditorSeparator());
            group.Tools.Add(new EditorTool("AjaxSpellCheck"));
            //EditorTool emoticons = new EditorTool("Emoticons");
            //emoticons.ShowIcon = true;
            //group.Tools.Add(emoticons);


            editor.Tools.Clear();
            editor.Tools.Add(group);
        }

        private bool IsMember
        {
            get
            {
                return true;
                //return Roles.IsUserInRole("Members");
            }
        }

        private string CurrentUserName
        {
            get { return HttpContext.Current.User.Identity.Name; }
        }

    }

after that, im add to code check for add ScriptManager to the page once (valiable smAdded), this is a bad workaround :(.
At now Editor display at page, but not functional, and im take some JavaScript errors in Firefox:

Error: InlineContentEditor is not defined
http://localhost/cs/forums/AddPost.aspx?ForumID=1
Error: Sys is not defined
http://localhost/cs/forums/AddPost.aspx?ForumID=1
Error: Telligent_Modal is not defined
http://localhost/cs/forums/AddPost.aspx?ForumID=1
Error: Telligent_InlineEditor is not defined
http://localhost/cs/forums/AddPost.aspx?ForumID=1
Error: DefaultTextEditor is not defined
http://localhost/cs/forums/AddPost.aspx?ForumID=1
Error: Telligent_DblClickInlineEditorPanel is not defined
http://localhost/cs/forums/AddPost.aspx?ForumID=1
Error: Telligent_DblClickInlineEditorPanel is not defined
http://localhost/cs/forums/AddPost.aspx?ForumID=1
Error: TagEditor is not defined
http://localhost/cs/forums/AddPost.aspx?ForumID=1
Error: Sys is not defined
http://localhost/cs/forums/AddPost.aspx?ForumID=1
Error: Telligent_TabbedPanes is not defined
http://localhost/cs/forums/AddPost.aspx?ForumID=1



If you have an opportunity, please help, to understand with a problem.
Probably someone already faced the same problem and could solve it.
Thankful in advance for the help!

[Lini]

Hi,

The JavaScript errors mean that the ASP.NET Ajax extensions have not been correctly registered in the web application. You need to open the community server's web.config file and add the following:

1. in the <compilation> element add the System.Web.Extensions assembly:

<assemblies>
  <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</assemblies>

2. in the <httpModules> section, add the script resource module:

<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

3. in the <httpHandlers> section, add the script handler:

<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

After I made the above changes to the CS web.config file, the editor loaded without problems.

Sincerely yours,
Lini
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Maxim Minkov]

Thanks for the help, mistakes have disappeared!
The editor has started to work correctly.
But there were 2 more problems:
- color of a background at the editor has changed and displayed not white by default, and color of a background of not edited area, the problem managed to be solved by means of connection javascript-function on OnClientLoad, and changed in function background color to white. In IE this "trick" works correctly,but in Firefox only current edited line is displayed in white (screenshot).
- Animated gif images in Firefox inserted by ImageManager or by means of function pasteHtml in the form of img html tag not "animating", and after opening window ImageManager, begin "animating".

[Lini]

Hello,

I recommend that you change the background color of the editor content area using CSS. You can do that in two ways - either by using the ContentAreaCssFile property or with the CssFiles property. In both cases you need to load your own CSS file, which will override the default Community Server body style. For example:

body {
background-color: white !important;
}

The second problem (animations in Firefox) is a browser specific issue so unfortunately we cannot fix it. Firefox will not play animations (including flash, media) while you are editing content. The animations will be played after you submit the content or if you select preview mode.

Greetings,
Lini
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Maxim Minkov]

Many thanks for the help!

[Support]

Hi,

Im trying to do create a Wrapper that allows the RadEditor for ASP.Net Ajax  (v.2008.01.0415.20) to work on Community Server 2.1 (v.2.1.61025.1)

I used the code above to and i added the following parts:

	public string StyleName
	{
	get { return editor.SkinID; }
	set { editor.SkinID = value; }
	}
	public string GetClientSideMethod
	{
	get { return ""; }
	}

and now it's giving me the following error:

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Stack Trace:

[NullReferenceException: Object reference not set to an instance of an object.] CommunityServer.Controls.Editor.set_Width(Unit value) +43 ASP.themes_default_skins_view_createeditpost_ascx.__BuildControlPostBody() +134 ASP.themes_default_skins_view_createeditpost_ascx.__BuildControlPost() +258 ASP.themes_default_skins_view_createeditpost_ascx.__BuildControl__control4() +119 ASP.themes_default_skins_view_createeditpost_ascx.__BuildControlComposePane() +150 ASP.themes_default_skins_view_createeditpost_ascx.__BuildControlEditorTabs() +171 ASP.themes_default_skins_view_createeditpost_ascx.__BuildControlTree(themes_default_skins_view_createeditpost_ascx __ctrl) +118 ASP.themes_default_skins_view_createeditpost_ascx.FrameworkInitialize() +34 System.Web.UI.UserControl.InitializeAsUserControlInternal() +31 System.Web.UI.TemplateControl.LoadControl(IWebObjectFactory objectFactory, VirtualPath virtualPath, Type t, Object[] parameters) +312 System.Web.UI.TemplateControl.LoadControl(VirtualPath virtualPath) +119 System.Web.UI.TemplateControl.LoadControl(String virtualPath) +23 CommunityServer.Controls.TemplatedWebControl.LoadThemedControl() +142 CommunityServer.Controls.TemplatedWebControl.CreateChildControls() +58 System.Web.UI.Control.EnsureChildControls() +87 System.Web.UI.Control.PreRenderRecursiveInternal() +50 System.Web.UI.Control.PreRenderRecursiveInternal() +170 System.Web.UI.Control.PreRenderRecursiveInternal() +170 System.Web.UI.Control.PreRenderRecursiveInternal() +170 System.Web.UI.Control.PreRenderRecursiveInternal() +170 System.Web.UI.Control.PreRenderRecursiveInternal() +170 System.Web.UI.Control.PreRenderRecursiveInternal() +170 System.Web.UI.Control.PreRenderRecursiveInternal() +170 System.Web.UI.Control.PreRenderRecursiveInternal() +170 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2041

Please Help

[Maxim Minkov]

Hi,
get the "Developer" version of CommunityServer and try to use your control with attached debuger.

[chirag]

Hi,

This wrapper works fine. But the old problem of CommunityServer Preview not working still remains the same.

Telerik team provided this hack, but it's not working anymore.
Overriding InkHidden named javascript function to call RadEditorNameSpace.SaveAllEditors(). Now, RadEditorNameSpace is not defined with the new RadAjax Editor.

Any new hack for this problem?

[Lini]

Hi,

We have just updated the Telerik provider with the new Ajax RadEditor control. You can read more about it on the Telerik Blogs site - http://blogs.telerik.com/StoyanStratev/Posts/08-06-23/RadEditor_for_ASP_NET_AJAX_in_Community_Server.aspx

The new provider works with the Preview tab by calling a different client API method - editor._saveContentDelegate();

Regards,
Lini
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[chirag]

editor._saveContentDelegate(); worked fine for me. Thanks!

[chirag]

editor._saveContentDelegate() works in IE7 but it didn't work in Firefox 3.

I debugged into it, and found that get_html(true) (and even false) is not working in Firefox 3. It returns empty string in any case in Firefox 3.

Let me know if we have other solutions.

[Lini]

Hi,

Which CS and editor provider versions do you have? I just tested the current editor provider in CS 2007 and the preview functionality worked fine in Firefox 3 (using the _saveContentDelegate() method). I went to the forums, created a new post, wrote some text and clicked preview. Then I saved the post, clicked the edit post button, entered some more text, and finally clicked preview. In both cases the preview tab showed the correct content in Firefox.

If possible, give me a list of steps I can use to reproduce the issue on my local install.

Sincerely yours,
Lini
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[chirag]

I'm using CS 2007.1 version.
And I'm using the latest wrapper as given in the above blog post of Stoyan Stratev.
You followed correct steps to reproduce the problem.

[Lini]

Hello,

Since we are not able to see the problem locally, I suggest that you open a formal support ticket and send us a live URL and login details so we can try it on your installation. If you cannot give us a live URL, then we will need some more information - try installing Firebug 1.2 and see if there are any JavaScript errors on the page before and after you click the preview button. Send us the HTML output of the page with the editor so we can check it for any problems. Thank you in advance for your cooperation!

Kind regards,
Lini
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.