我使用在线资源创建了以下 CK 编辑器
<div class="section">
<div class="container">
<h2>CK EDITOR CONSOLE</h2>
@Html.TextArea("Explanation")
<script type="text/javascript" src="@Url.Content("~/ckfinder/ckfinder.js")"></script>
<script type="text/javascript" src="@Url.Content("~/ckeditor/ckeditor.js")"></script>
<script type="text/javascript">
var editor = CKEDITOR.instances['editor1'];
if (editor) { editor.destroy(true); }
CKEDITOR.replace('Explanation', {
enterMode: CKEDITOR.ENTER_BR,
});
CKFinder.setupCKEditor(null, '@Url.Content("~/ckfinder/")');
</script>
<form method="post" action="">
@Html.TextAreaFor(x => x.Text, new { id = "Explanation" })
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
现在我想在单击“提交”按钮上的同一 View 上的单独区域中显示我输入的内容(文本/图像)。
有人可以帮忙吗?
最佳答案
在预览位置添加一个空 div:
<div id="explanation-preview"></div>
添加一个按钮来生成预览,但不提交表单,例如:
<button type="button" id="preview">Click me to preview!</button>
在 jquery 中,声明 ckeditor 后,捕获按钮单击并将内容从编辑器传递到 div:
<script type="text/javascript">
var editor = CKEDITOR.instances['editor1'];
// ...
$('#preview').on('click', function() {
$('#explanation-preview').html(editor.getData());
});
</script>
关于c# - 尝试在不同 DIV 中的同一 View 上显示 CK 编辑器的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32434948/