Javascript Rich Display WYSIWYG Component/Methodology

Question

quick back story--

I am working on ASP.Net based template editor that lets authors create text templates using Javascript inserted placeholder tags that will be filled in with dynamic text when the templates are used to display the final results.

For example the author might create a template like

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

The application would eventually replace the tag with a dynamic word down the road (though it's not specifically relevant to this post)

The word foo was generated dynamically.

Depending on the circumstances, the template may be created in a text input, textarea or a modified version of the Ajax Control Toolkit HTML Editor. There might be 40 or more of these editable elements on the page, so using lots of stripped down or modified HTML editors would probably bog the page down too much.

The problem is that the tags such as [%12#add] are displayed inline with the user text and the result is confusing and aesthetically gross. The goal is parse the contens of the source element and when a tags such as [%12#add] are encountered, display something prettier and less cryptic to the user such as a stylable element or image wherever tags such as [%12#add] occur. The application still needs the template text with the tags on postback.

So the user might see

The word tag placeholder was generated dynamically.

but the original template would still be the value of the text input box

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

It seems HTML editors like the ACT version and FckEditor accomplish this by rendering their output in an IFrame, but rather than kill myself trying to roll a lighter specialized version myself, I thought I'd ask if anyone knows of an existing free component or approach that has already tackled this.

With good reason, I don't think S.O. allows HTML formatting, but the bold "tag placeholder" above would ideally be something like tag placeholder.

Answer 1

I think CKEditor might be your best bet. I recently wrote a plugin for it that kept placeholders in the editable content for chunks of content that the user couldn't edit directly. A question I asked may help, particularly the comments to the accepted answer: http://stackoverflow.com/questions/2272377/update-editor-content-immediately-before-save-in-ckeditor-plug-in.

The recommendation to me was to look at how object tags (e.g. as used to embed Flash movies) are handled, and from that I was able to proceed fairly quickly. Be aware though that CKEditor is not well documented for plugin developers, so you may often have to resort to looking at the source code.

Answer 2

Final model solution in case someone in the same situation needs a boost.

aspx page:

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

CodeBehind:

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");
}