CKEditer之所见即所得

最新推荐文章于 2024-06-26 21:22:37 发布

ShadowHost

最新推荐文章于 2024-06-26 21:22:37 发布

阅读量546

点赞数

分类专栏： JavaScript 文章标签： javascript 文本编辑 css

本文链接：https://blog.csdn.net/ShadowHost/article/details/78934369

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CKEditer之所见即所得

CKEditer是比较常用的富文本编辑器，在编辑页面所呈现的文本样式，应该无差别显示在展示页面，即所谓的所见即所得。为了实现样式的统一，我们可以采用两种方式来展示CKEditer所保存下的数据：一：使用CKEditer容器复现，必要时去除CKEditer的编辑组件及其边框样式。二：使用iframe，引用CKEditer所用到的css样式文件。第二种方法由于只加载CKEditer的样式文件，因此效率上会有所提高，代码如下：

一、展示界面iframe

<div style="width:933px;height:auto;margin:0 auto;word-wrap:break-word;">
	<iframe id="noticeIframe" src="detail.html" style="width: 100%;" scrolling="no" frameborder="0" ></iframe>
</div>

二、数据填充的页面

<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="/static/modules/ckeditor/contents.css">
</head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders">
</body>
</html>

三、js对数据进行填充（ajax请求）

success : function(data) {
				var iframe = $("#noticeIframe");
				iframe.contents().find("body").html(data.noticeText);
				var height = iframe[0].contentWindow.document.body.scrollHeight;
				iframe.attr('height',height);
			}

四、说明

数据填充完毕后iframe的高度需要根据内容自适应，因此做了动态的设置。