Javascript Rich Дисплей WYSIWYG Компонент/Методология

Question

быстро назад story--

Я работаю на ASP.Net основы редакторов шаблонов, который позволяет авторам создавать текстовые шаблоны с помощью Javascript вставленных шаблонных тегов, которые будут заполнены с динамическим текстом, когда шаблоны используются для отображения окончательных результатов.

Например, автор может создать шаблон, как

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

Заявка будет в конечном итоге заменить тег с динамическим словом вниз по дороге (хотя это не особенно значимо на этот пост)

The word foo was generated dynamically. 

В зависимости от обстоятельств шаблон может быть создан в текстовом входе, в текстовом поле или в модифицированной версии HTML-редактора Ajax Control Toolkit. На странице может быть 40 или более из этих редактируемых элементов, поэтому использование большого количества сокращенных или измененных редакторов HTML, вероятно, слишком сильно проглотит страницу.

Проблема заключается в том, что теги, такие как [% 12 # add], отображаются в строке с текстом пользователя, и результат является запутанным и эстетически грубым. Цель состоит в том, чтобы проанализировать содержимое исходного элемента и когда встречаются теги, такие как [% 12 # add], отображают что-то более красивое и менее загадочное для пользователя, например стилизованный элемент или изображение, где бы теги, такие как [% 12 # add ]. Приложение по-прежнему нуждается в тексте шаблона с тегами для обратной передачи.

Таким образом, пользователь может видеть

Слово тег-заполнитель был создан динамически.

но оригинальный шаблон все равно будет значение ввода текста

Слово [% 12 # добавить] был создан динамически.

кажется HTML редактора, как версия ACT и Fckeditor выполнить это делают их выход в IFrame, а не убивать себя, пытаясь свернуть зажигалку специализированной версии себя, я думал, что спросить, если кто знает существующий свободный компонент или подход, который уже принял это решение.

Не без оснований, я не думаю, что С.О. позволяет форматировать HTML, но жирный «тег-заполнитель« выше в идеале должен быть чем-то вроде метки-метки.

Answer 1

Я думаю, что CKEditor может быть вашим лучшим выбором. Недавно я написал для него плагин, который хранит заполнители в редактируемом контенте для фрагментов контента, которые пользователь не может редактировать напрямую. Вопрос, который я задал, может помочь, особенно комментарии к принятому ответу: Update editor content immediately before save in CKEditor plug-in.

Рекомендация для меня заключалась в том, чтобы посмотреть, как обрабатываются теги объектов (например, используемые для встраивания флеш-роликов), и из этого я мог действовать достаточно быстро. Имейте в виду, что 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> 

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