Display ASP.MVC view in CKEditor dialog window - asp.net-mvc

Question

I created a plugin with a custom dialog window.
CKEDITOR.plugins.add('imggallery',
{
init: function (editor) {
var pluginName = 'imggallery';
editor.ui.addButton('Image',
{
label: 'Add image',
command: 'OpenWindow',
icon: CKEDITOR.plugins.getPath('imggallery') + 'lightbulb.gif'
});
editor.addCommand('OpenWindow', new CKEDITOR.dialogCommand('simpleLinkDialog'));
var html2 = "<h1>This is a heading</h1>";
CKEDITOR.dialog.add('simpleLinkDialog', function (editor) {
return {
title: 'LinkProperties',
minWidth: 400,
minHeight: 200,
contents:
[
{
id: 'general',
label: 'Settings',
elements:
[
{
type: 'html',
html: html2
}
]
}
]
};
});
}
});
My question is: Is it possible to somehow display ASP.MVC view in window content?
When I assign html2 to elements property the text is shown without formatting (plain text).

Answer 1

Are you sure it's plain text and not a H1 tag that is formatted to look like plain text? There's a big difference :). The CKE dialogs reset most of the standard browser styles so that elements appear like plain text, even though they are not.
As for the MVC view, I would recommend that you add an iframe within the CKE dialog and display the page normally there. Then you can control or get/set values from the iframe using JavaScript. It will be a bit tricky, but should work.
var html2 = '<iframe id="DialogIframe" src="/MyController/MyView?foo=bar"></iframe>';
The other option is to use something like jQuery to $.get() the HTML and then use it, should be relatively simple if you have worked with ajax before. If not, here's a good chance to start! :)