Format Code Block in blog edit - Sitefinity - General Discussions

All Replies

Posted by Community Admin on 25-Feb-2011 00:00

Hi,

I'd like to have the 'Format Code Block dialog' option inside the RadEditor when I add or edit blog post items.
How can I achieve this?

Thanks,
Daniel

Posted by Community Admin on 25-Feb-2011 00:00

Hi Daniel,

It is possible to do it only for the BlogPostsInsert and Edit.

1. You need to create a custom class that inherits from HtmlField element and there access the Editor property which will allow you to inject the code block tool

2. You should replace the HtmlField in the configuration

All the best,
Ivan Dimitrov
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

Posted by Community Admin on 25-Feb-2011 00:00

Hi Ivan,

Would you mind to give me an example of such a class?

Thanks,

Daniel

Posted by Community Admin on 25-Feb-2011 00:00

Hello Daniel,

Here is a sample

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Telerik.Sitefinity.Web.UI.Fields;

namespace SitefinityWebApp

public class Class1 : HtmlField

public override string LayoutTemplatePath

get

return Class1._layoutTempaltePath;

private const string _layoutTempaltePath = "path to the html field template";

template

<%@ Control Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>

<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">

<Templates>

<sf:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Read" runat="server">

<sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />

<sf:SitefinityLabel id="viewControl" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfRTFContent" />

</sf:ConditionalTemplate>

<sf:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Write" runat="server">

<sf:ResourceLinks id="resourcesLinks2" runat="server">

<sf:EmbeddedResourcePropertySetter Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.EditorDialogs.css" Static="true" ControlID="editControl" ControlPropertyName="DialogsCssFile" />

<sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.Window.css" Static="true" />

</sf:ResourceLinks>

<asp:Label ID="titleLabel" runat="server" CssClass="sfTxtLbl" AssociatedControlID="editControl" />

<asp:LinkButton ID="expandLink" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander" />

<asp:Panel ID="expandableTarget" runat="server" CssClass="sfEditorWrp sfClearfix">

<telerik:RadEditor

ID="editControl"

runat="server"

Skin="Sitefinity"

Width="100%"

Height="550px"

EnableResize="False"

EditModes="Design,HTML"

DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"

Content=""

NewLineBr="False"

StripFormattingOptions="Css,Font,Span"

OnClientLoad="Telerik$Sitefinity$Web$UI$Fields$HtmlField$radEditorToggleAdvancedToolbars"

OnClientPasteHtml="OnClientPasteHtml"

OnClientCommandExecuting="OnClientCommandExecuting">

<FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />

</telerik:RadEditor>

<sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />

<sf:SitefinityLabel id="exampleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />

</asp:Panel>

<script type="text/javascript">

/* <![CDATA[ */

var className = null;

var toRemove = false;

var handlersAdded = false;

function OnClientPasteHtml(sender, args)

var newContent = args.get_value();

newContent = newContent.replace(new RegExp("<b(\\s([^>])*?)?>", "ig"), "<strong$1>");

newContent = newContent.replace(new RegExp("</b(\\s([^>])*?)?>", "ig"), "</strong$1>");

newContent = newContent.replace(new RegExp("<i(\\s([^>])*?)?>", "ig"), "<em$1>");

newContent = newContent.replace(new RegExp("</i(\\s([^>])*?)?>", "ig"), "</em$1>");

var regex = /<([a-zA-Z]+) ?[^>]*?>\s*<\/\1>/gi;

newContent = newContent.replace(regex, "");

newContent = newContent.replace(new RegExp("( \s*\n*)+", "ig"), " ");

newContent = newContent.replace(new RegExp("(\s*\n*<br\s*\/?>\s*\n*)+", "ig"), "<br />");

args.set_value(newContent);

function OnClientCommandExecuting(editor, args)

var name = args.get_name();

var val = args.get_value();

var commandName = args.get_commandName();

className = "re" + commandName;

if (editor.get_dialogOpener())

if (editor.get_dialogOpener()._container && !handlersAdded)

editor.get_dialogOpener()._container.add_show(AddRemoveCSSClass);

editor.get_dialogOpener()._container.add_close(AddRemoveCSSClass);

handlersAdded = true;

if (name == "MergeTags")

editor.pasteHtml(val);

//Cancel the further execution of the command as such a command does not exist in the editor command list

args.set_cancel(true);

if (commandName == "ToggleScreenMode")

var containerWnd = GetRadWindow();

if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode specify the needed content area width

$(editor.get_element()).addClass("sfFullScreenEditor");

if(containerWnd != null && !containerWnd.isMaximized())

containerWnd.maximize();

$(containerWnd.get_element()).addClass("sfWndToBeRestored");

editor.get_document().body.style.maxWidth = "640px";

else

$(editor.get_element()).removeClass("sfFullScreenEditor");

if(containerWnd != null && $(containerWnd.get_element()).hasClass("sfWndToBeRestored"))

$(containerWnd.get_element()).removeClass("sfWndToBeRestored");

containerWnd.restore();

editor.get_document().body.style.maxWidth = "100%";

function AddRemoveCSSClass(sender, args)

var popupElement = sender.get_popupElement();

if (!toRemove)

Sys.UI.DomElement.addCssClass(popupElement, className);

else

Sys.UI.DomElement.removeCssClass(popupElement, className);

function GetRadWindow()

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow;

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;

return oWindow;

Telerik.Web.UI.RadEditor.prototype._setContentAreaHtml = function (initContent, forceNewDocument)

var newContent = this.get_filtersManager().getDesignContent(initContent);

var oContent = null;

var $T = Telerik.Web.UI;

if (-1 != newContent.toLowerCase().indexOf("<html"))

this.set_fullPage(true);

oContent = newContent;

//Check for the presence of DOCTYPE and save it

this._doctypeString = this._extractDoctype(oContent);

else this.set_fullPage(false);

if (this.get_fullPage() && this.get_contentAreaMode() == $T.EditorContentAreaMode.Div)

alert("Error! Set EditorContentAreaMode to Iframe if you want to edit full page HTML");

//strip full HTML from content and leave only what's in the body

newContent = newContent.replace(/^[\s\S]*<html[\s\S]+?<body[^>]*>([\s\S]*?)<\/body>[\s\S]*$/gi, "$1");

this.set_fullPage(false);

if (this.get_contentAreaMode() == $T.EditorContentAreaMode.Div)

this.set_contentArea(this.get_contentAreaElement());

this.set_document(this.get_contentArea().ownerDocument);

this.set_contentWindow(window);

if (newContent.match(/<form[\s>]/i))

alert("Error! Form elements are only supported when the content area is set to Iframe!");

newContent = "";

$T.Editor.Utils.setElementInnerHtml(this.get_contentArea(), newContent);

this.get_filtersManager().getDesignContentDom(this.get_contentArea());

if (!this._divContentAreaInitialized) this._contentAreaCommonInitialization();

return;

if (null != oContent || true == forceNewDocument)

//Set the content to the content area

var operaSpecific = "";

if (this.isOpera)

operaSpecific = " style='height:100%'";

if (!oContent) oContent = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><head><style></style></head><body" + operaSpecific + ">" + newContent + "</body>";

//Mozilla issue - when FULL PAGE editing and there are <link> elements, it loads them with delay!

if ($telerik.isFirefox)

var oLoadFunction = Function.createDelegate(this, function ()

if (this._execLoadFunctionSecondTime)

this._contentFrameLoadFunction();

);

$addHandler(this.get_contentAreaElement(), "load", oLoadFunction);

try

var contentDocument = this.get_contentAreaElement().contentWindow.document;

contentDocument.open();

contentDocument.write(oContent);

contentDocument.close();

//check if the body is there and if not (Mozilla), wait for the onload function

this._execLoadFunctionSecondTime = false;

if (contentDocument.body)

this._contentFrameLoadFunction();

else

this._execLoadFunctionSecondTime = true;

catch (e)

//SAFARI blows when editor is rendered in an invisible parent!

else

//Just set the content in the content area (not full page, body only)

$T.Editor.Utils.setElementInnerHtml(this.get_contentArea(), newContent);

this.get_filtersManager().getDesignContentDom(this.get_contentArea());

/* ]]> */

</script>

</sf:ConditionalTemplate>

</Templates>

</sf:ConditionalTemplateContainer>

All the best,
Ivan Dimitrov
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

Posted by Community Admin on 25-Feb-2011 00:00

I copied the template and class to a folder 'Controls'.
After that I changed the FieldTemplate to: <namespace><classname> or 'DmCms.Controls.BlogContentEditor'.

When creating a new post, the controls loads, but all button faces have dissapeared.
And... it isn' clear to me where to add the extra button? Through the class, or inside the template?

Regards,

Daniel

Posted by Community Admin on 01-Mar-2011 00:00

Hi Daniel,

You can add the FormatCodeBlock through ToolsFile.xml of the RadEditor or you can do this programmatically.

As for the missing buttons, please check whether there is no some script that hides them or the problem is with the sprite images ,because of the skin applied over the RadEditor.

Best wishes,
Ivan Dimitrov
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

This thread is closed