xml地图|网站地图|网站标签 [设为首页] [加入收藏]

关于富文本在Android中的应用以及遇到的坑,And

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:74 发布时间:2020-05-05
摘要:增添完图片后与html对接 public void setSplitt() { exec("javascript:RE.insertHTML('hr/');");} 富文本编辑器首要达成情势 1、EditText Span 的达成情势 2、WebView JavaScript 的贯彻方式 先是种比较简单,这里不
  • 增添完图片后与html对接
public void setSplitt() {
        exec("javascript:RE.insertHTML('<hr/>');");
}

富文本编辑器首要达成情势

1、EditText Span 的达成情势
2、WebView JavaScript 的贯彻方式

先是种比较简单,这里不在赘述,这里首要给我们讲明一后一次之种完毕方式,也是本身项目中用到的点子(当然选拔第三种格局也许有另三个缘故,就是本人熟练前端开垦,熟知JavaScript)

此地html代码里面删除这一行就能够不奇怪删除图片

  那样大家就加多了多少个投入汾水陵的诀窍。其实细心的爱侣曾经开掘insertHTML就是在光标处插入html代码的措施,方便大家在光标的栖息地点插入代码。

先看效率

皇家娱乐平台登陆 1

 function insertImage(imageName, imagePath) { restoreSelection(); var imageElement = document.createElement; var breakElement = document.createElement; imageElement.setAttribute('src', imagePath); imageElement.setAttribute('id', imageName); breakElement.innerHTML = "<br>"; editableContent.appendChild(imageElement); editableContent.appendChild(breakElement); } function updateImageURL(imageName, imageURL) { var selectedElement = document.getElementById(imageName); selectedElement.setAttribute('src', imageURL); }

然后大家须要缓解七个主题素材,那正是,在富文本编辑器的使用中,5.0之下的种类自带的webview不能够完毕删除图片的效率。那个漏洞在5.0过后被谷歌(GoogleState of Qatar集团拓宽了修复。不过难点来了,公司的软件是要合营到4.2种类的,总不能够因为这么些主题材料不让顾客用4.x的无绳电电话机呢,而且那批顾客还不菲,所以供给杀绝这么些问题。大家的思路是替换掉系统的webview,更改第三方自定义webview。这里有三个好的框架推荐便是Tencent的X5内核,内含Tencent重写的Webview,版本到7.0。这里不首要陈说X5内核的益处,我们看一下怎么替换。大家看出,RichEditor中最珍视的叁个自定义类是一个叫作RichEditor的类。那是我们布局上输入富文本区域的控件。大家看看它的世袭类是WebView。这里大家把代码拷贝出来还要重写该类,并将世襲类换到X5内核中的WebView,如下样式:

明日产品提议在移动端完毕富文本编辑器成效,要求能编辑文字加粗、颜色、插入图片、下划线等一多元成效等,最终要生成二个html格式然后base64转码后上传服务端,最后在前端网页和活动端展现。
Android富文本编辑器 的 GitHub 主页点击这里:Android富文本编辑器

{ @"Id":"当时新建模板这个不传,更新模板必须传", @"title":"模板标题", @"text":"<p dir="ltr">测试文字</p>![](http://upload-images.jianshu.io/upload_images/1694866-a9a1da57455b2054.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)<p>![](http://pic.baikemy.net/apps/kanghubang/486/3486/1457968327238.amr@type=1@duration=1852)<p>", @"sendstr":"22372447516929 如果模板要保存同时发送给患者,这个值必须传,可以多个患者发送患者id以逗号隔开" @"1457968280769.jpg": @"文件名":"BACES64 数据 这个是多个图片或语音一起上传"}

例子2:

二、早先时期要求知识的一部分j s技巧
1,document.execCommand(sCommand[,交互方式,动态参数])

   其中:sCommand为指令参数(如”2D-Position”),交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框(下例中的”false”即表示不显示对话框),动态参数一般为一可用值或属性值(如下例中的”true”)。

2,bold,italic,subscript,underline等等

3,html语句,例如:

html = "<img src="/i/eg_tulip.jpg"alt="上海鲜花港-郁金香"/>"
document.execCommand('insertHTML',false, html);

4, webView中交互监听(js代码中)

   this.wrappedObject.bind('tap', function(e) {thisObj.handleTapEvent(e); });
   this.wrappedObject.bind('focus', function(e) {thisObj.handleFocusEvent(e); });
   this.wrappedObject.bind('blur', function(e) {thisObj.handleBlurEvent(e); });
   this.wrappedObject.bind('keydown', function(e){thisObj.handleKeyDownEvent(e); });
   this.wrappedObject.bind('input', function(e) { thisObj.handleInputEvent(e);});

注意点:
1、executeCallback方法上要求加@JavascriptInterfae//17之后的本子,必得加该注明,不然不能够调用
2、 webview要求先加载html文件,此处为地面文件
mWebView.loadDataWithBaseURL("file:///android_asset/",html艾德itor, "text/html","utf-8", ""卡塔尔;最终页面样式能够由此CSS样式调节,会写js语句就越来越快化解了!
3、必要将编辑器设置为多行,监听enter键盘,施行document.execCommand("insertLineBreak"卡塔尔国;

 NSString *place = [NSString stringWithFormat:@"window.placeHTMLToEditor",self.inHtmlString]; [webView stringByEvaluatingJavaScriptFromString:place];

这一个富文本没有增多分水岭的点子,大家为它加一个。在重写的XRichEditor中,便是十全十美了X5内核的富文本中,大家写入如下代码

一、WebView JavaScript 与android原生的相互原理:
1,原生代码:

if(Build.VERSION.SDK_INT < 17) {
     mWebView.setJsCallbackReceiver(newJsCallbackReceiver(this));
} else {
        mWebView.addJavascriptInterface(newJsCallbackReceiver(this), JS_CALLBACK_HANDLER);
}
在WebViewClient的shouldOverrideUrlLoading方法中执行mJsCallbackReceiver.executeCallback(callbackId, params)方法。
注意callbackId是js回调过来的key和JsCallbackReceiver中定义的key是一样的,用于区分不同js执行事件
在JsCallbackReceiver中的js回传中做自己处理

2,js中代码:

window.nativeCallbackHandler.executeCallback("callback_image_click",imageNode.src);(就是动态语言,参数动态化)
executeCallback为原生JsCallbackReceiver中的方法

拍卖措施如下

public class XRichEditor extends com.tencent.smtt.sdk.WebView
三、这里在附加疏解一下图片上传计谋难题

大多数开拓者会采纳的格局:先在编辑器里展现本地图片,等待客商编辑达成再上传全体图纸,然后用上传回到的url替换以前html中展现本地图片的岗位。

那般的难点是:假若图片相当多,上传的数据量会十分的大,手提式有线电话机的网络状态平常不牢固,超级轻巧上传败北。其余等待时间会很短,体验相当糟糕。

解决办法:选图实现即上传,获得url之后直接插入,上传是耗费时间操作,再加上海体育地方片压缩的年月,那样编辑器呈现图片会有中度的延迟时间,实际项目中能够加叁个loading占位图,别的加二个标识提醒客户是不是上传实现,制止未有上传成作顾客即提交的主题材料。

运用webview加载三个当地html文件,该html内部编写好js方法用于与oc互相调用 最后输出该富文本字符串传输给服务器

  那样,大家就足以让大家的图纸响应通过WebView注入的接口,进而调用大家原生的点子。

 self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 64 50, [UIScreen mainScreen].bounds.size.width, self.view.frame.size.height - 50)]; self.webView.delegate = self; [self.view addSubview:self.webView]; NSBundle *bundle = [NSBundle mainBundle]; NSURL *indexFileURL = [bundle URLForResource:@"richTextEditor" withExtension:@"html"]; [self.webView setKeyboardDisplayRequiresUserAction:NO]; [self.webView loadRequest:[NSURLRequest requestWithURL:indexFileURL]]; UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; [btn addTarget:self action:@selector(addImage:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:btn];

随着大家应用document.execCommand的连锁办法在js文件中对HTML举行连锁的操作。改套方法可以允许运维命令来支配可编写制定区域的剧情。大许多指令影响文书档案的取舍(粗体,斜体等),而其他命令插入新因素(增添链接)或影响整行(缩进)。当使用contentEditable时,调用 execCommand(卡塔尔(قطر‎ 将影响当下移动的可编写制定作而成分。

服务端必要自作者最终回到的数码格式为:

如此大家就能够在这里个类中进行其余的某些改良,举个例子新功能的拉长等等的,上面举八个实用的小例子

皇家娱乐平台登陆,内部id部分为自己管理的例外界分

compile 'jp.wasabeef:richeditor-android:1.2.0'
  • 编写服务器中的富文本

例子1:

时至前天可达成叁个富文本编辑器的新增添与编辑.

富文本得感觉客商提供进一层多样化的文本显示方式,但由于其接纳了H5标签的特殊性,平日都须求第三方框架的支撑。这里推荐一款切合的第三方富文本框架,richeditor。

2017-04-21 更新

作者们还能让网页的开始和结果响应大家的点击事件

  • 2018-08-01

By WaterWood

 //以时间戳重命名图片 NSString *imageName = [NSString stringWithFormat:@"iOS%@.jpg", [self stringFromDate:[NSDate date]]]; NSString *imagePath = [documentsDirectory stringByAppendingPathComponent:imageName]; NSString *mediaType = [info objectForKey:UIImagePickerControllerMediaType]; UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage]; NSInteger userid = [[NSString stringWithFormat:@"%@", [[NSUserDefaults standardUserDefaults] objectForKey:@"userID"]] integerValue]; NSString *url = [NSString stringWithFormat:@"http://pic.baikemy.net/apps/kanghubang/%@/%@/%@",[NSString stringWithFormat:@"%ld",userid00],[NSString stringWithFormat:@"%ld",userid ],imageName]; NSString *script = [NSString stringWithFormat:@"window.insertImage('%@', '%@')", url, imagePath]; NSDictionary *dic = @{@"url":url,@"image":image,@"name":imageName}; [_imageArr addObject:dic];//全局数组用于保存加上的图片 [self.webView stringByEvaluatingJavaScriptFromString:script];

如此我们就足以欢腾的选择富文本编辑器了。更加多职能还要读者自个儿去根究。

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:关于富文本在Android中的应用以及遇到的坑,And

关键词: 程序员 编辑器 Android 文本

上一篇:结构体构造器

下一篇:没有了

频道精选

最火资讯