Editor StyleBuilder standalone (well sort of)

3 posts, 0 answers
  1. Stuart
    Stuart avatar
    102 posts
    Member since:
    Jul 2012

    Posted 08 Jun 2009 Link to this post

    Requirements

    RadControls version
    .NET version

    2 and up
    Visual Studio version

    2008 Standard
    programming language C#
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    I have been wondering for a while now how to build the CSS stylebuilder of the read editor into a standalone dialog, and found that it needs the editor to initialize its values and image paths. So I put together the following ascx solution that allows you to call the dialog from a button and get and set the CSS property. The editor is cleverly hidden to allow you to view the dialogs but not have to worry about the editor

    Features also includes:

    1. Multiple instances of control ( you can add more than one style builder property callout on the page without scripts conflicting)
    2. Classic dialogs (a set method to allow you to call the CSS builder in a classic dialog)

    The asp.Net Code
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Builder.ascx.cs" Inherits="App_Controls_Administration_StyleBuilderVS_Builder" %> 
    <div style="overflow:hidden; width:0px; height:0px; display:none" id="container" runat="server"
    <telerik:RadEditor ID="sEdit" runat="server" EditModes="Design" EnableResize="false"
        <Content> 
             
     
            <div>a</div> 
        </Content> 
        <Tools> 
            <telerik:EditorToolGroup> 
                 
            </telerik:EditorToolGroup> 
        </Tools> 
        <Content> 
        </Content> 
    </telerik:RadEditor> 
    </div> 
    <div id="cDiv" runat="server"
        <input id="Button1" type="button" value="Style Builder" /> 
    </div> 
    <div id="cDiv2" runat="server" style="display:none"
     
    </div> 
     
    The Code Behind, From the code blelow you'll find i am building the propery into a single tag and when i get the property i string all the tag values off just to return the css values.
    using System; 
    using System.Collections.Generic; 
    using System.Linq; 
    using System.Web; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
     
    public partial class App_Controls_Administration_StyleBuilderVS_Builder : System.Web.UI.UserControl 
        private string imgPath = ""
        protected void Page_Load(object sender, EventArgs e) 
        { 
            container.Style["display"] = "block"
            if (!IsPostBack) 
            { 
                LoadSetting(); 
            } 
        } 
        /// <summary> 
        /// Sets the path of the images directory 
        /// </summary> 
        /// <param name="path">Virtual path</param> 
        private void SetImagePath(string path) 
        { 
            string[] paths = new string[1]; 
            paths[0] = path; 
            sEdit.ImageManager.DeletePaths = paths; 
            sEdit.ImageManager.UploadPaths = paths; 
            sEdit.ImageManager.ViewPaths = paths; 
            imgPath = path; 
        } 
        /// <summary> 
        /// Sets/Gets the virtual path of the images directory 
        /// </summary> 
        public string ImagePath 
        { 
            get 
            { 
                return imgPath; 
            } 
            set 
            { 
                SetImagePath(value); 
            } 
        } 
        /// <summary> 
        /// Gets and sets the CSS property string 
        /// </summary> 
        public string StyleProperties 
        { 
            get 
            { 
                sEdit.Content = sEdit.Content.Replace("<span""<div").Replace("</span""</div"); 
                return sEdit.Content.Replace("<div style=\"", "").Replace("\">a</div>""").Replace("<div>a</div>"""); ; 
            } 
            set 
            { 
                
                sEdit.Content = "<div style=\"" + value + "\">a</div>"
            } 
        } 
        private void LoadSetting() 
        { 
            string s = "<input id=\"selStyleBut" + sEdit.ClientID + "\" onclick=\"OpenSBDialog" + sEdit.ClientID + "()\" type=\"button\" " + System.Environment.NewLine 
                       + "value=\"Select Style\" />" + System.Environment.NewLine 
                       + "<script language=\"javascript\" type=\"text/javascript\">" + System.Environment.NewLine 
                       + "function OpenSBDialog" + sEdit.ClientID + "() {" + System.Environment.NewLine 
                       + "var editor = $find(\""+sEdit.ClientID+"\");" + System.Environment.NewLine 
                       + "editor.fire(\"StyleBuilder\");" + System.Environment.NewLine 
                       + "}" + System.Environment.NewLine 
                       + "</script>" + System.Environment.NewLine; 
            cDiv.InnerHtml = s; 
     
        } 
        /// <summary> 
        /// Value that set the style builder to load in a classic dialog instead of rad window 
        /// </summary> 
        public void SetUseClassicDialogs() 
        { 
            sEdit.OnClientLoad = "OnClientLoad"
            cDiv2.InnerHtml = "<script language=\"javascript\" type=\"text/javascript\">" + System.Environment.NewLine 
                       + "function OnClientLoad(editor)" 
                       + "{" 
                       + "editor.set_useClassicDialogs(true);" 
                       + "}" 
                       + "</script>" + System.Environment.NewLine; 
        } 
     

    This code will hide the editor in a way that it still allows you to view its dialogs, and i kept the code as documented and basic as possible to give you room to build this around your own unique needs.

    If there are any additional feature requests please let me know.



  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 08 Jun 2009 Link to this post

    Hi Stuart,

    Thank you for your submission! I added 3000 Telerik points to your account for your work.

    Sincerely,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Trevor
    Trevor avatar
    17 posts
    Member since:
    Mar 2009

    Posted 27 Apr 2012 Link to this post

    Hey Stuart,

    I am unable to get the css property on close of the stylebuilder.
    Also, when I re-click the "Select Style" button it doesn't retain the style that i previously selected.
    In other words the get/set are not working for me.

    I tested your code a few more times and noticed that none of the code is being executed except for the loadsettings.

    Do you have a sample project that I might be able to use.

    Thanks,
    Trevor
Back to Top