IISExpress

IISExpress seems to hide the UI from typical IIS interfaces.
To see which web.config/app.config is being used, try


AppDomain.CurrentDomain.SetupInformation.ConfigurationFile

Handling CKEditor with JQuery UI's Sortable()

Dealing with multiple CKEditors and sorting them using JQuery UI's Sortable() function causes some undesired results.

Moving the control handling the CKEditor causes the contained text to disappear, never to reappear again.

This happens due to CKEditor's reliance on DOM objects, but can easily be fixed with the following javascript code:

    $(function () {
 
        var ckeConfigs = [];
        $("#precautionRows").sortable({
            handle: '.handle',
            cursorAt: { cursor: "move", top: 6 },
            start: function (event, ui) {
 
                $('.ckeditor4', ui.item).each(function() {
                    var tagId = $(this).attr('id');
                    var ckeClone = $(this).next('.cke').clone().addClass('cloned'};
                    ckeConfigs[tagId] = CKEDITOR.instances[tagId].config;
                    CKEDITOR.instances[tagId].destroy();
                    $(this).hide().after(ckeClone);
                });
            },
            stop: function (event, ui) {
                $('.ckeditor4', ui.item).each(function () {
                    var tagId = $(this).attr('id');
                    CKEDITOR.replace(tagId, ckeConfigs[tagId]);
                    $(this).next('.cloned').remove();
                });
            }
        });
    });

And the HTML for the main rows (_Edit.cshtml):

<div id="precautionRows" class="editor-field">        @{foreach (var item in Model.Precautions)
            {
                Html.RenderPartial("_RowEdit", item);
            }
        }</div>

And the HTML for each item (_RowEdit.cshtml)

<div class="editorRow">@using (Html.BeginCollectionItem("Precautions"))
{
    @Html.HiddenFor(m => m.ID)
    <span onmouseover="this.style.cursor='move'" class="handle"><img src="~/Images/move_icon.png" style="vertical-align:top;" /></span>         @Html.TextAreaFor(x => x.Precaution, new { @class = guid + " ckeditor4" })
   
    <a href="#" onclick="$(this).parent().remove();return false;">Delete</a>}
<script type="text/javascript">    var editor = CKEDITOR.replace($('.@guid')[0].id, {});
</script></div>

The JavaScript de-instances the CKEditors saving the data into temporary variables where it grabs them back and rebinds the CKEditors into the new DOM.

Dave