asp.net - 将文本输入和输出 ckeditor 的问题

Question

在我们的网站中，我们创建了一个流程，管理员用户可以使用 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 == "&nbsp;";

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

            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

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

key 和 hidden_levels 是保存在我们数据库中的值，用于识别这是用于哪个标签以及将其应用到哪个区域。关键代码适用于我们拥有 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.asmx Web 服务、对此的示例调用以及处理该过程的类。

这是在代码中使用的示例：

<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

同样，我们有另一个完全可以工作的版本。我将推迟添加我们用来做这些事情的类，如果你们想看到它，在这里发布，我会发布它。但是，它很长，我想我已经在推动最大密度了……谢谢，布拉德。

score 0 · Accepted Answer

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

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

和

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

然后这只是一个问题

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

从要编辑的控件标签加载数据，并且：

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

在我们的保存函数中保存数据。

asp.net - 将文本输入和输出 ckeditor 的问题

1 回答 1

Related

Reference