Question

快速回复故事 -

我正在研究基于ASP.Net的模板编辑器，该编辑器允许作者使用Javascript插入的占位符标签创建文本模板，当模板用于显示最终结果时，这些标签将用动态文本填充。

例如，作者可能会创建一个类似

的模板

The word [%12#add] was generated dynamically.

应用程序最终将使用动态词替换标记（尽管它与此帖没有特别相关性）

The word foo was generated dynamically.

根据具体情况，可以在文本输入，textarea或Ajax Control Toolkit HTML编辑器的修改版本中创建模板。页面上可能有40个或更多这些可编辑元素，因此使用大量精简或修改的HTML编辑器可能会使页面陷入过多的压力。

问题是[％12＃add]等标签与用户文本内联显示，结果令人困惑且美观。目标是解析源元素的争议，当遇到诸如[％12 #add]之类的标签时，向用户显示更漂亮且更不神秘的东西，例如可设置样式的元素或图像，无论标签如[％12＃add] ]发生。应用程序仍然需要带有回发标记的模板文本。

因此用户可能会看到

标记占位符一词是动态生成的。

但原始模板仍然是文本输入框的值

[％12＃add]这个词是动态生成的。

似乎像ACT版本和FckEditor这样的HTML编辑器通过在IFrame中呈现它们的输出来实现这一点，而不是自己试图推出一个更轻的专用版本，我想我会问是否有人知道现有的免费已经解决这个问题的组件或方法。

有充分的理由，我不认为S.O.允许HTML格式化，但上面的粗体“标记占位符”最好是标记占位符。

Answer 1

我认为CKEditor可能是你最好的选择。我最近为它编写了一个插件，它将占位符保存在用户无法直接编辑的内容块的可编辑内容中。我问过的一个问题可能有所帮助，尤其是对已接受答案的评论：Update editor content immediately before save in CKEditor plug-in。

对我的建议是看看如何处理对象标签（例如用于嵌入Flash电影），从而我能够相当快地进行。请注意，CKEditor没有为插件开发人员提供充分的文档，因此您可能不得不求助于查看源代码。

Answer 2

最终模型解决方案，以防有相同情况的人需要提升。

aspx页面：

<div>
<asp:TextBox runat="server" ID="txtTest" TextMode="MultiLine" CssClass="Over" />
<br />
<a href="javascript:void(0);" onclick="ckTest('txtTest')">Add CKEdit</a>
<br />
<a href="javascript:void(0);" onclick="insertTag('txtTest', '[%2_T]', 'variablePlaceholder')">Add Tag</a>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</div>
<script type= "text/javascript" >
<!--
function ckTest(el) {

    var tinyTool = {
        toolbar:
          [
             ['Bold', 'Italic', 'UIColor'], ['Styles', 'Format', 'Font', 'FontSize']
          ]
    };
    //Note:  config.htmlEncodeOutput = true; to work with ASP.NET, see postback for decoding input
    var editor = CKEDITOR.replace(el);//, tinyTool);
    editor.addCss('.aux1 { background-color: #FFE0C0; border: solid 1px #17659E; }');
}

function insertTag(id, tag, display) {
    var e = CKEDITOR.instances[id];
    if (e) {
        //Storing in comments does not work.  stripped out when using insertHtml.  Workaround?
        //e.insertHtml("<span class='aux1'>" + display + "<!--" + tag + "--></span>");

        //Kludge: fake attribute
        e.insertHtml("<span class='aux1' tag='" + tag +"'>"  + display + "</span> ");
    }
}

-->
</script>


-->
</script>

代码隐藏：

protected void btnSubmit_Click(object sender, EventArgs e)
{
    //Note:  CKEditor converts single to double quotes in insertHtml
    Regex regHiddenTag = new Regex(@"<span\sclass=""\w+""\stag=""(\[%[0-9]{1,2}_[TR]\])"">\w+</span>");

    //Note: config.htmlEncodeOutput = true; 
    string encoded = txtTest.Text
        .Replace("&lt;", "<").Replace("&gt;", ">").Replace("&amp;", "&");

    //TODO:  Use AntiXss Library that I have to thwart bad HTML
    string extractedTag = regHiddenTag.Match(encoded).Groups[1].Value;

    //store to DB
    string template = regHiddenTag.Replace(
        encoded,
        extractedTag);

    //repopulate
    string finalText = template.Replace(extractedTag, "foo");
}

Javascript Rich Display WYSIWYG组件/方法

2 个答案: