ZSSRichTextEditor使用过程中遇到的问题

最近公司要做一个论坛类的app,有一个类似简书发布文章的富文本编辑器功能,于是各种百度谷歌,最终决定使用ZSSRichTextEditor这个库,当然使用过程中遇到了很多问题.

1.当内容输入多的时候,内容超过键盘,就会不显示.

分析了一下原因,因为contentHeight高度过高,导致被键盘覆盖内容无法显示,那么我看下ZSSRichTextEditor的demo,在键盘升起的监听方法中可以看到

[self setFooterHeight:(keyboardHeight -8)];

[self setContentHeight: self.editorViewFrame.size.height];

作者之所以要给footer设置一个高度就是为了撑起一个键盘高度,我们只需要将contentHeight值减小即可,比如我们减100的高度

[self setContentHeight: self.editorViewFrame.size.height - 100];

这是我们发现就可以正常显示了.

2.当插入图片时,图片过大不超出屏幕

我们只需要在插入图片的js方法中在标签中插入内嵌式的css样式即可

zss_editor.insertImage =function(url, alt) {

    zss_editor.restorerange();

   var html = '<img src="' + url + '" alt="' + alt + '" style="width:100% !important;"/>';

    zss_editor.insertHTML(html);

    zss_editor.enabledEditingItems();

}

3.增加标题输入框

在editor.html中加入输入框

        <input style="border:none;border-bottom: 1px dashed red;width:100%;height:44px;font-size:20px;" id="article_title" maxlength="35" type="text" placeholder="请输入标题">

获取标题值

-(NSString*)getTitle{

    NSString *htmlNum = @"document.getElementById('article_title').value";

    NSString *numHtmlInfo = [self.editorView stringByEvaluatingJavaScriptFromString:htmlNum];

    returnnumHtmlInfo;

}

4.分割线间距太小

zss_editor.setHorizontalRule方法替换为一下方法

zss_editor.setHorizontalRule =function() {

    //    document.execCommand('insertHorizontalRule', false, null);

    varhr_html ="<br />"+'<hr />'+"<br />";

    document.execCommand('insertHTML',false, hr_html);

    zss_editor.enabledEditingItems();

}