Question

In our website we’ve created a process where admin users can change the text that appears in labels using the jQuery-UI dialog process that when they are in edit mode, clicking on a text area (label) brings up that text in a dialog box, they can change it, add a tooltip, and even a range of dates. We decided that it would be great to be able to use ckeditor to be able to edit longer news items, or longer instruction labels. Everything works except the actual taking the text to be edited from the database or taking the edited text in the ckeditor instance and saving it off to the database. There is a lot of code, but for the mean time, I’ll present the jQuery code to begin with, along with the .Net markup that generates the dialog box. If this code looks OK to everyone I’ll post more of the behind the scenes code.

$(function () {
$("#dialog-markup").dialog(
{
    autoOpen: false,
    height: 600,
    width: 600,
    modal: true,
    buttons:
    {
        "Save": function () {
            var GuiText = $(".gui_markup_text").val();
            if (GuiText == "")
                GuiText == " ";

            var GuiToolTipText = $(".gui_markup_tooltip").val();
            if (GuiToolTipText == "")
                GuiToolTipText == " ";

            editableControl[0].innerHTML = GuiText;

            var guiKey = "";
            if ($(editableControl).attr('gui_key') != null)
                guiKey = $(editableControl).attr('gui_key');
            else
                guiKey = $(editableControl).attr('id');

            var MarkupGui = new Object();

            MarkupGui.key = guiKey;
            MarkupGui.levels = $('input.hidden_Levels').val();
            MarkupGui.effectiveDate = $('.gui_markup_date_eff').val();
            MarkupGui.terminationDate = $('.gui_markup_date_trm').val();
            MarkupGui.textValue = GuiText;
            MarkupGui.toolTip = GuiToolTipText;
            //MarkupGui.hidden = hidFlag

            var DTO = { 'mg': MarkupGui };

            $.ajax({
                type: "POST",
                url: "GuiConfigWS.asmx/SaveMarkupToDB",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(DTO),
                success: AjaxSuccess,
                error: AjaxFailure
            }); //end of ajax call

            $(this).dialog("close");
            return false;
        },
        "Cancel": function () {
            $(this).dialog("close");
        } //End of Cancel button
    } //end of buttons
}); //end of dialog

}); //end of markup anonymous function

The key and hidden_levels are values that get saved in our database to identify which label this is for and what area’s to apply it to. The Key code is for those cases where we have asp.net controls versus standard html controls. We use the id for a span as the key value in the database. On Asp.net controls we add an attribute called “gui_key” which acts like the id.

We have similar code that just creates a simple text string that can be edited and it works like a charm. You can even add tags to that text, but we’d prefer to let users use ckeditor instead of having to “know” html tags for special formating.

The .net markup follows for creating the dialog box:

<div id="dialog-markup" class="markup" title="Edit Formated Text">
        <p>Use this editor below to add formated text.</p>
        <label id="lbl_Markup" for="txt_Markup">Formated Text: </label><br />
        <CKEditor:CKEditorControl ID="txt_Markup" CssClass="data gui_markup_text" runat="server" Toolbar="Source|Bold|Italic|Underline|Strike|-|Subscript|Superscript
                Cut|Copy|Paste|PasteText|PasteFromWord
                Undo|Redo|-|Find|Replace|-|RemoveFormat
                NumberedList|BulletedList|-|Outdent|Indent|Table
                /
                JustifyLeft|JustifyCenter|JustifyRight|JustifyBlock
         Styles|Format|Font|FontSize|TextColor|BGColor"></CKEditor:CKEditorControl>
        <label id="lbl_MarkupEffDate" for="txt_MarkupEffDate">Start Date: </label>
        <input id="txt_MarkupEffDate" type="text" name="Eff_Date" class="dateField data gui_markup_date_eff" /><br />
        <label id="lbl_MarkupTrmDate" for="txt_MarkupTrmDate">End Date: </label>
        <input id="txt_MarkupTrmDate" type="text" name="Trm_Date" class="dateField data gui_markup_date_trm"/><br />
        <label id="lbl_MaarkupToolTip" for="txt_MarkupToolTip">Tool Tip: </label>
        <input id="txt_MarkupToolTip" type="text" name="ToolTip" class="gui_markup_tooltip" />
    </div>

I’ll add more code in follow up posts, for the GuiConfigWS.asmx webservice, for an example call to this, and for the class that handles the process.

Here is an example of it being used in the code:

<span id="info_Street1" class="editable markup" title="<%= GetGuiToolTip("info_Street1")%>"><%= GetGuiString("info_Street1")%></span>

Here is the GuiConfigWS.asmx:

<%@ WebService Language="C#" Class="GuiConfigWS" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;
using CKEditor;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class GuiConfigWS  : System.Web.Services.WebService 
{
    public class MarkupGui
    {
        public string typeOfDialog { get; set; }
        public string key { get; set; }
        public string levels { get; set; }
        public string effectiveDate { get; set; }
        public string terminationDate { get; set; }
        public string textValue { get; set; }
        public string toolTip { get; set; }
    }

    [System.Web.Script.Services.ScriptMethod]
    [WebMethod(EnableSession = true)]
    public string SaveMarkupToDB(MarkupGui mg) //removed 'static' after public on Dave Ward's advice...
    {
        GuiConfig gc = new GuiConfig("[REDACTED - CONNECTION STRING INFO");
        gc.SetValue(mg.key, mg.levels, mg.effectiveDate, mg.terminationDate, mg.textValue, mg.toolTip, 0); //Convert.ToInt32(mg.hidden));

        return "testString";  //temp return until the rest of the code is written.
    } //end of SaveMarkupToDB

Again, we have another version that works completely. I’m going to hold off adding the class that we use to do this stuff with, if you guys want to see it, post here and I’ll post it. But, it’s very long and I think I’m pushing maximum density already…
Thanks,
Brad.

Answer 1

I had tried adding ckeditor api calls to get and set the data as needed. I finally got rid of the runat=server in favor for using an html version of the editor with this code:

<textarea id="editor1" name="editor1" class="data gui_markup_text" rows="5" cols="25"></textarea>

and

<script type="text/javascript">
    //code to initialize the CKEditor, and setup it's toolbar.
    CKEDITOR.replace('editor1',
            {
                toolbar:
                [
                    { name: 'document', items: ['Source'] },
                    { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
                    { name: 'editing', items: ['Find', 'Replace'] },
                    { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
                    '/',
                    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustiftyCenter', 'JustifyRight', 'JustifyBlock'] },
                    { name: 'insert', items: ['Table'] },
                    { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
                    { name: 'colors', items: ['TextColor', 'BGColor'] }
                ]
            });
</script>

and then it was just a matter of

CKEDITOR.instances.editor1.setData(jQueryElement.html().trim()); 

to load the data from the control label to be edited, and:

var GuiText = CKEDITOR.instances.editor1.getData();

to save the data in our save function.