0

私たちの Web サイトでは、編集モードのときにテキスト領域 (ラベル) をクリックすると、そのテキストがダイアログに表示される jQuery-UI ダイアログ プロセスを使用して、管理者ユーザーがラベルに表示されるテキストを変更できるプロセスを作成しました。ボックスを変更したり、ツールチップを追加したり、日付の範囲を追加したりできます。ckeditor を使用して、より長いニュース項目やより長い説明ラベルを編集できるようになれば素晴らしいと判断しました。データベースから編集するテキストを実際に取得するか、編集されたテキストを ckeditor インスタンスで取得してデータベースに保存する以外はすべて機能します。たくさんのコードがありますが、当面は、ダイアログ ボックスを生成する .Net マークアップと共に、最初に jQuery コードを提示します。このコードが誰にとっても問題ないと思われる場合は、舞台裏のコードをさらに投稿します。

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

}); //マークアップ無名関数の終わり

key と hidden_​​levels は、データベースに保存される値で、これがどのラベルに適用され、どの領域に適用されるかを識別します。キー コードは、標準の html コントロールに対して asp.net コントロールがある場合のためのものです。スパンの ID をデータベースのキー値として使用します。Asp.net コントロールでは、ID のように機能する「gui_key」という属性を追加します。

編集可能な単純なテキスト文字列を作成するだけの同様のコードがあり、魅力的に機能します。そのテキストにタグを追加することもできますが、特別な書式設定のために html タグを「知る」必要がなく、ユーザーが ckeditor を使用できるようにしたいと考えています。

ダイアログ ボックスを作成するための .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

繰り返しますが、完全に機能する別のバージョンがあります。これを行うために使用するクラスの追加は保留します。見たい場合は、ここに投稿してください。投稿します。しかし、それは非常に長く、私はすでに最大密度を押し上げていると思います. ありがとう、ブラッド.

4

1 に答える 1

0

必要に応じてデータを取得および設定するために 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();

save 関数でデータを保存します。

于 2012-09-13T16:14:30.260 に答える