I noticed an issue with RichEditor. I'll pass the details since there is a TODO acknowledging that you know the bug. If you already figured it out, forget the rest of my post. Otherwise, read on :)
I spotted three problems:
1. When the editor is rendered, it replaces the "." by "_" in the ID. I did that on the client side in the string passed as the selector value to jquery;
2. jQuery selector requires to escape (with two backslashes) square brackets. Therefore, replace "[" and "]" for "\\[" and "\\]" when passing variable to selector;
3. I also changed the overall javascript function to try to avoid closure and avoid the update button to always update the editor of the first opened html source.
Here's my final javascript code in RichEditor.cshtml:
<script type="text/javascript">
var htmlSourcePopup;
function viewRichHtmlEditorSource@(random)(e) {
var editorSelector = '@(clientId.Replace("[", "\\\\[").Replace("]", "\\\\]"))';
e = $.Event(e);
e.stopPropagation();
e.preventDefault();
var editor = $('#' + editorSelector.replace('.', '_')).data('tEditor');
var html = editor.value();
if (!htmlSourcePopup)
{
htmlSourcePopup =
$('<div class="html-view">' +
'<div class="textarea t-state-default"><textarea style="width: 100%; height: 300px;"></textarea></div>' +
'<div class="t-button-wrapper">' +
'<button id="htmlCancel" class="t-button" style="float: right;">@T("Admin.Common.Cancel")</button>' +
'<button id="htmlUpdate" class="t-button">@T("Admin.Common.Update")</button>' +
'</div>' +
'</div>')
.css('display', 'none')
.tWindow({
title: 'View Generated HTML',
modal: true,
resizable: false,
draggable: true,
width: 700,
onLoad: function ()
{
var $popup = $(this);
$popup.find('.textarea')
.css('width', function () {
return 700 - (this.offsetWidth - $(this).width());
});
}})
.data('tWindow');
}
var element = $(htmlSourcePopup.element);
element.find('.textarea')
.focus()
.end()
.find('#htmlCancel')
.unbind('click')
.click(function () {
htmlSourcePopup.close();
})
.end()
.find('#htmlUpdate')
.unbind('click')
.click(function () {
var value = element.find('textarea').val();
editor.value(value);
editor.focus();
htmlSourcePopup.close();
});
element.find('textarea').val(html);
htmlSourcePopup.center().open();
}
</script>
I hope it helps!