基于webView的ZSSRichTextEditor源代码

刚刚做了一个富文本的需求,有加粗和插入图片的功能。网上说的比较多的是DTRichTextEditor和YYKit。

        因为时间紧迫,选用了DTRichTextEditor的第三方库,是基于DTCoreText实现的,由于这个项目之前是付费的,近两年才开源,连google都搜不到教程,而自己看源代码跟天书无异..。还好我上一家公司用到过这个,先弄个了半成品,但是在插入图片那碰到了很多问题。。。我想把要插入的图片先显示出来,然后等后台上传图片后,再插入<img scr=xxxx>来进行显示。但是无从下手,最后请教了一个朋友才解决了!原来有一个类叫DTLazyImageView,可以实现懒加载!!后来还碰到一些坑,弄了好多天才完成。其实有问题不怕,怕的是源代码真是看不懂啊,跟DTCoreText类似,太费劲了。

    最近无事,想研究一下富文本,想找一个更简单,更好用的库。于是找到了ZSSRichTextEditor,github上2000多个星,非常不错。看了看源代码,发现比DTRichTextEditor简单多了。。也是因为它是基于webView的。可是webView里的编辑框之所以能编辑,不是用的ios原生textView,也不是html里的input,而是最普通的div!为什么能编辑呢?原来div里的属性contenteditable=true就可以了,就这么简单。。害我想了老半天。

    目录结构如下:



editor.html的代码如下:

<body onLoad="zss_editor.init();">

	<!-- ZSSRichTextEditor Editable Content -->
	<div id="zss_editor_content" class="zs_editor_content" contenteditable="true" placeholder=""></div>

	<!-- Footer -->
	<div id="zss_editor_footer"></div>

</body>
ZSSRichTextEditor.js,jQuery,js都一些js操作。

原理很简单,就是在webView上操作,加粗,插入图片时,能过JavascritCore来调用js来不停读写"zss_editor_content"这个div。当然webView有一些回调,也会调用oc代码。


以后有时间再研究一下DTCoreText吧


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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值