百度ueditor组件上传图片后如何设置img里的alt属性

图片 4

百度ueditor组件,使用上传图片后,自动将上传图片显示在编辑器中,也等于插入了一个img标签。并设置了二个alt属性,其值是上传图片时的本土路径。临时没察觉何地能够配备那几个值。在翻看公布的内容时,看见alt的值是八个磁盘路线,有一点别扭。

话相当少说,直接写

可以在编排完内容,保存到数据库时过滤下,修正alt的剧情,也得以一向校订源码

一、html页面

function callback(){try{var link, json, loader,body = (iframe.contentDocument || iframe.contentWindow.document).body,result = body.innerText || body.textContent || '';json = (new Function("return " + result))();link = me.options.imageUrlPrefix + json.url;if(json.state == 'SUCCESS' && json.url) {loader = me.document.getElementById(loadingId);loader.setAttribute('src', link);loader.setAttribute('_src', link);loader.setAttribute('title', json.title || '');loader.setAttribute('alt', json.original || '');loader.removeAttribute('id');domUtils.removeClasses(loader, 'loadingclass');} else {showErrorLoader && showErrorLoader(json.state);}}catch(er){showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));}form.reset();domUtils.un(iframe, 'load', callback);}

图片 1

 

 

 

 

 

二、html代码:

 

<div class=”descright”>

<div class=”clinic-img”>

<img src=”{{imgUrl.value}}” alt=””>

<a class=”file”>上传图片

<input type=”file” name=”clinicImg” id=”” #imgUrl
(change)=”getImgUrl(imgUrl)”>

</a>

</div>

</div>

 

解释下html代码:

(1)#imgUrl是angular2模板的局地变量,在img标签可平昔引用,就如这么{{imgUrl}},

但以此值console出来的是全体input标签图片 2

 

但大家只要input标签的输入值,所以就径直{{imgUrl.value}},这样就收获了上传那张图片的渠道了,

(2卡塔尔(قطر‎由于要实时监测input标签的值的调换,所以就用表单的(change卡塔尔事件性质绑定一个自定义的艺术getImgUrl(imgUlr卡塔尔(قطر‎,

    方法的现实性实现内容看ts文件

三、ts文件的有的代码:

public imgUrl:string;

getImgUrl(imgUrl){

   //大家就足以把取得的imgUrl.value经过管理保存到数据库,实现图片上传

   console.log(imgUrl.value);

}

四、上传结果

图片 3

图片 4

图片并无法预览,网络查了相当久,说是angular一些逢凶化吉的主题材料,这些后期再优秀查下相关的文书档案,然则上述图片上传思路基本就是那样了。

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图