Как вернуть клиентский источник CKEditor HTML для отображения в отдельном всплывающем окне MVC?

Question

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

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

У меня есть несколько проблем с тем, что я кодировал до сих пор. 1st , я даже не могу передать короткую фразу, потому что контент, который я возвращаю, мешает работе MVC framework, как описано ниже. 2-й , даже если бы я мог передать содержимое обратно, как описано ниже, это кажется неправильным, потому что при фактическом использовании содержимое будет больше и не подходит для передачи в качестве аргумента.

Приведенный ниже код редактирования представления сильно отредактирован, чтобы список был короче, но я считаю, что соответствующие фрагменты кода присутствуют.

@ModelType conf.Models.HelpTopic

@Using (Html.BeginForm())
  @Html.AntiForgeryToken()
  @<div class="form-horizontal">

    @Html.ValidationSummary(True, "", New With {.class = "text-danger"})
    @Html.HiddenFor(Function(model) model.HelpTopicID)
    @* THERE ARE MANY ADDITIONAL HIDDEN PROPERTIES *@

    @* ALL OF THE DISPLAY/EDITING CODE IS OMITTED FOR BREVITY, THE VARIOUS VIEW ACTIONS ARE NEXT *@

    <a href = "#" onclick="ShowEditTopicWindow();">View Topic</a>    @* THIS TRIGGERS THE POP UP *@
    <input type = "submit" value="Submit" Class="btn btn-default"/>
    @Html.ActionLink("Back to List", "Index")

  </div>
End Using

@Section Scripts
  <Script src = "~/scripts/ckeditor/ckeditor.js" ></script>
    <Script>

    CKEDITOR.on('dialogDefinition', function (ev) {
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition; 
        If (dialogName == 'image') {               
            var infoTab = dialogDefinition.getContents('info');
            infoTab.get('txtWidth')['default'] = '50';
            dialogDefinition.removeContents('Upload');
        }
    });

    CKEDITOR.replace('Model.Content', {
        filebrowserImageUploadUrl: '/', 
        filebrowserBrowseUrl: '/Common/ImagePicker?path=' + "/content/image",      
        toolbarGroups: [                // Define toolbar groups
            { name 'about', groups: ['about'] }
            @* REMAINING TOOLBARS ARE OMITTED FROM THIS LISTING FOR BREVITY *@
        ],
        removeButtons: 'Save,NewPage,Templates,Language,Anchor,Flash,Iframe,CreateDiv'
    });
                                            @* Model_Content is the ID of the textarea CKEditor replaces *@
    Function ShowEditTopicWindow() {
        var editorContent = CKEDITOR.instances.Model_Content.document.getBody().getHtml();
        alert(editorContent);
        editorContent = "my text";   @* WHEN I COMMENT OUT THIS LINE, EVERYTHING BREAKS *@
        window.open(ShowEditTopicPath + editorContent, "", "top=300,left=300,height=500,width=800");
    }

  </script>

  <script type = "text/javascript" >
    var ShowEditTopicPath = "/HelpMnx/ShowEditedTopic?helpTopicName=@Model.HelpTopicName&helpTopicContent=";
  </script>

  @Scripts.Render("~/bundles/jqueryval")
End Section

При построении страницы модель представления может использоваться для настройки переменная ShowEditTopicPath отображается в конце списка. Параметр helpTopicName загружается, и параметр helpTopicContent также запускается, который должен быть завершен при активации функции javascript ShowEditTopicWindow().

Поскольку текущее редактирование в CKEditor существует только на стороне клиента, это содержимое необходимо отправить обратно для метода контроллера ShowEditedTopic для создания отдельного всплывающего представления. При щелчке по ссылке <a> View Topic </a> запускается функция javascript ShowEditTopicWindow(). Данные добавляются к переменной ShowEditTopicPath для команды window.open(), которая использует заполненный URL-адрес для перехода к методу контроллера ShowEditedTopic.

В функции javascript ShowEditTopicWindow() строка alert(editorContent); (добавлен для отладки) всегда правильно отображает содержимое CKEditor, например следующее:

Но при передаче данных обратно в контроллер есть 2 другой сценарий ios. Если строка editorContent = "my text"; (также добавленная для отладки) работает, следующий URL-адрес отправляется обратно и отображается правильно:

http://localhost:53908/HelpMnx/ShowEditedTopic?helpTopicName=ActivityController&helpTopicContent=my%20text

Но если строка editorContent = "my text"; закомментирована, этот URL-адрес отправляется назад:

http://localhost:53908/HelpMnx/ShowEditedTopic?helpTopicName=ActivityController&helpTopicContent=%3Cp%3EHi%20people%20up%3C/p%3E

Символы в конце, %3Cp%3EHi%20people%20up%3C/p%3E, являются необработанными данными. Я предполагаю, что %3C - это код для < и так далее. Но в любом случае эти данные, кажется, сбивают с толку структуру MVC, которая предпринимает действия, которых я не понимаю; он возвращается к методу Edit Get, а затем выдает ошибку из-за отсутствия правильного параметра Id.

Итак, 1st вопрос: есть ли способ на стороне клиента получить HTML источник, который я обычно получаю после обычного редактирования сообщения? Когда обычное представление редактирования отправляет обратно в метод контроллера, возвращаемое содержимое содержит HTML данных, но не сырые HTML данные. Я использую Request.Unvalidated.Form("Model.Content") для захвата данных HTML.

Но эти необработанные данные HTML плохо сочетаются с MVC при передаче в качестве аргумента. Было бы неплохо понять, почему эти данные вызывают MVC проблему. Я предполагаю, что необработанные данные HTML приводят к сбою метода контроллера ShowEditedTopic, но вместо того, чтобы быть обнаруженным как ошибка, каким-то образом MVC возвращается к последнему завершенному ActionResult, который был Edit Get. Но это становится спорным с моим следующим вопросом:

2nd : Как мне действительно передать данные CKEditor обратно в этом сценарии? Я бы подумал, что это что-то вроде скрытого значения или какой-то структуры данных, но в настоящее время мои javascript навыки не простираются так далеко.