Ckeditor 首行缩进

//初始化编辑器 

var ckeditor = CKEDITOR.replace(domName,{
   height: 500,
   width:800
});
 

//监听粘贴代码时,进行首行缩进,因为粘贴后,编辑器还需要处理内容才会渲染,所以需要加入延时执行。

技术要点:

  1. ckeditor编辑器会默认过滤“text-indent”的样式。
  2. 不能关闭ckeditor过滤功能,会增加很多垃圾代码。
  3. 即使关闭过滤机制,可以通过 (item).style.textIndent='2em',设置缩进,对不需要缩进的段落取消缩进的时候也无法实现,因为ckeditor没有对应的工具设置。
  4. 粘贴后,不能直接进行document处理,需要加入延时
  5. 需要判断那些标签需要加入缩进,连图片一起粘贴的代码里面,img标签会在p标签里面换行。效果是这样的:“<p><img src="****"/></p>”,其他情况暂时未知,还需要根据实际情况定义。
ckeditor.on("instanceReady", function () {

	//监听粘贴事件
	this.document.on("paste", function(e) {

		setTimeout(function(){
			var p = ckeditor.document.find("p");
			count = p.count();
			for(var i = 0; i < count; i++) {
				var item = p.getItem(i).$;

				//判断是否有子元素,用于判断是否p标签里面有图片的情况,具体要根据实际情况进行判断
				if(item.children.length<1){
					var html = item.innerHTML;
					if(html){
						//因为text-indent会被编辑器默认过滤掉,所以需要使用全角字符“ ”代替缩进,这个空白字符代表一个中文字符长度,非空白键。
						html = html.replace(/ /g,''); //过滤部分网站已经存在的缩进符号,如新浪新闻就是使用全角空白符代替缩进的。
						item.innerHTML = '  '+html; //从新设置内容
					}
				}
			}
		},500);

	});
});

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值