Can't view HTML source in RichEditor with multiple languages (possible solution)

Hi,

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!

I think the current use of random is erroneous: if the partial view execute fast enough, all the random instances will use the same seed, thus returning the same number.

Instead of using that, I used a string reprensation of the bytes of the clientid:

var safeClientId = BitConverter.ToString(System.Text.ASCIIEncoding.ASCII.GetBytes(clientId)).Replace("-", string.Empty);

I think it should just return numbers so its safe to use in a function name.

Great! Thanks a lot for solution.

Can you help with a problem that I'm having with the rich text editor? I changed the code for the newsletter/campaign page from the text to the rich editor. The page shows the editor, it imports pictures, fonts, etc but on save everything changes to html---pictures code out, etc and it appears that the newsletter still thinks it's plain text.

Apparently I've missed a piece of code somewhere? Thank you.