Asp.net 文本进出编辑器时出现问题

在我们的网站中，我们创建了一个流程，管理员用户可以使用jQuery UI对话框流程更改标签中显示的文本，当他们处于编辑模式时，单击文本区域（标签）会在对话框中显示该文本，他们可以更改该文本，添加工具提示，甚至可以添加一系列日期。我们决定，如果能够使用ckeditor编辑更长的新闻条目或更长的指令标签，那就太好了。除了实际从数据库中获取要编辑的文本或在ckeditor实例中获取已编辑的文本并将其保存到数据库之外，其他操作都可以正常工作。有很多代码，但同时，我将首先介绍jQuery代码，以及生成对话框的.Net标记。如果大家都觉得这段代码不错，我会发布更多的幕后代码

$(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

}))//标记结束匿名函数

键和隐藏的_级别是保存在我们的数据库中的值，用于标识这是用于哪个标签以及应用于哪个区域。关键代码适用于使用asp.net控件和标准html控件的情况。我们使用跨度的id作为数据库中的键值。在Asp.net控件上，我们添加了一个名为“gui_key”的属性，其作用类似于id

我们有类似的代码，只是创建了一个简单的文本字符串，可以编辑，它的工作就像一个魅力。您甚至可以向该文本添加标记，但我们更愿意让用户使用ckeditor，而不必“知道”用于特殊格式化的html标记

创建对话框的.net标记如下所示：

<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>

使用下面的编辑器添加格式化文本

格式化文本：

开始日期：


结束日期：


工具提示：

我将在后续文章中为GuiConfigWS.asmxwebservice添加更多代码，例如对它的示例调用，以及处理该过程的类

以下是代码中使用的示例：

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

以下是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

使用制度；
使用System.Web；
使用System.Web.Services；
使用System.Web.Services.Protocols；
使用System.Collections.Generic；
使用编辑器；
[WebService（命名空间=”http://tempuri.org/")]
[WebServiceBinding（ConformsTo=WsiProfiles.BasicProfile1_1）]
[System.Web.Script.Services.ScriptService]
公共类GuiConfigWS:System.Web.Services.WebService
{
公共类MarkupGui
{
公共字符串类型对话框{get；set；}
公共字符串密钥{get；set；}
公共字符串级别{get；set；}
公共字符串effectiveDate{get；set；}
公共字符串终止日期{get；set；}
公共字符串textValue{get；set；}
公共字符串工具提示{get；set；}
}
[System.Web.Script.Services.ScriptMethod]
[WebMethod（EnableSession=true）]
public string savemarkuptdb（MarkupGui mg）//根据Dave Ward的建议在public之后删除了'static'。。。
{
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，直到编写完代码的其余部分。
}//savemarkuptdb结束

再一次，我们有另一个完全有效的版本。我会推迟添加我们用来做这件事的类，如果你们想看的话，在这里发布，我会发布。但是，它很长，我想我已经在推最大密度了。。。 谢谢

---

Brad。

我曾尝试添加ckeditor api调用，以根据需要获取和设置数据。我最终放弃了runat=server，转而使用html版本的编辑器，代码如下：

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

要从要编辑的控件标签加载数据，请执行以下操作：

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

在我们的保存功能中保存数据

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

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