富文本实现图片预览功能的多种方式


关于富文本实现图片预览功能的多种方式

在日常的开发过程中,使用富文本的实现,很多程序猿们应该都遇到过,富文本添加图片,在展示富文本内容的时候,要求点击图片,可以实现图片的预览功能,这边就给大家分享几种富文本预览图片功能的实现方式。


提示:以下是本篇文章正文内容,下面案例可供参考

一、使用Js 手写 图片的预览

html 结构

<div v-show="visible" class="z-mask" @click="visible = false">
  <div class="z-mask__img" @click.stop>
    <img :src="url" :large="url" alt="" preview="1">
  </div>
</div>

监听事件

mounted() {
	// 取到对应的富文本展示区域,添加监听事件,判断监听到点击图片,将图片的路径赋值到 url 展示
	document.getElementsByClassName('Tit-con')[0].addEventListener('click', (e)=>{
	  if (e.target.nodeName == 'IMG') {
	    this.url = e.target.currentSrc
	    this.visible = true
	  }
	});
}

二、使用JQ 实现图片预览

提示:此处利用Jq的特性,相对 js 而言 更为简便,实际原理是一致的
使用Jq的前提是 项目中要引入jQuery

html 结构 与js实现 一致

<div v-show="visible" class="z-mask" @click="visible = false">
  <div class="z-mask__img" @click.stop>
    <img :src="url" :large="url" alt="" preview="1">
  </div>
</div>
mounted() {
	$('#detail_content').on('click', 'img', (e)=>{
	  this.url = e.target.src || e.target.currentSrc
	  this.visible = true
	})
}

vue-photo-preview 组件

提示:该组件的好处是可以一次性加载所有富文本中的组件,前面的方法是简单的展示单个图片,此组件,展示出所有图片,可以放大缩小,还可以自由切换图片

1.引入库

代码如下(示例):

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

2.组件注入

代码如下(示例):

let options = {
  fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: false, //控制是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //控制是否显示分享按钮
  zoomEl: true, //控制是否显示放大缩小按钮
  counterEl: true, //控制是否显示左上角图片数量按钮
  tapToToggleControls: false, //点击应切换控件的可见性
  clickToCloseNonZoomable: false, //点击图片应关闭图库,设置无效
  indexIndicatorSep: ' / ', //图片数量的分隔符
  bgOpacity: 0.9, // 背景透明度
}
Vue.use(preview, options)
Vue.use(preview)

3.组件的使用

<div class="Main-con">
 <div id="detail_content" class="Tit-con" v-html="info.content"></div>
</div>
<script>
export default {
	created() {
		this.info.content = this.handleHtml(this.info.content)
	},
	methods: {
		handleHtml(rich) {
	   		// 使用正则表达式匹配所有图片
	   		let imgReg = /<img.*?(?:>|\/>)/gi //匹配图片中的img标签
	   		let match = rich.match(imgReg)  //筛选出所有的img
	   		if (match) {
	     		// 循环图片数组
	     		for (let i = 0; i < match.length; i++) {
		       		const item = match[i];
		       		// 判断图片大小 100px 才预览
		       		if ($(item).width() > 100 || $(item).height() > 100) {
		         	const len = item.length;
		         	const _str = item.slice(0, len - 2) + " preview=\"0\"/>";// 追加 preview 之后的img
		         	rich = rich.replace(item, _str);
		       		}
	     		}
	   		}
	   		return rich;
	 	}
	}
}
</script>


总结

上述所讲到的实现方式仅供参考,不管是哪种实现方式,其实思路基本一致,都是通过点击图片,给图片添加事件,监听到该事件,然后将图片展示出来的。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Tinymce 是一款非常流行的富文本编辑器,它提供了许多丰富的功能,包括格式刷功能。 使用 Tinymce 实现格式刷功能的方法如下: 第一步,首先需要配置 Tinymce 编辑器。具体方法是,需要在 Tinymce 的初始化函数中设置一个 toolbar 的数组,用来定义工具栏中显示的按钮。在这个数组中,需要添加一个 button,用来表示格式刷功能。 第二步,添加格式刷功能的代码。这一步可以使用 Tinymce 提供的 API 来实现格式刷功能。具体方法是,使用 getFormat 方法获取选中文本的格式,然后将这个格式应用到其它文本中。在应用格式的过程中,还可以使用 Tinymce 提供的 filter 方法来过滤一些非法的标签和属性。 第三步,添加一个按钮绑定格式刷功能。这个按钮可以添加到工具栏上,或者在页面上以其它形式显示。当用户点击这个按钮时,就会触发格式刷功能。 总之,Tinymce 可以通过一些简单的配置和代码实现格式刷功能。这个功能可以大大提高用户的编辑效率,使得文本编辑变得更加方便和易用。 ### 回答2: tinymce是一种基于JavaScript富文本编辑器,可以在网页上直接编辑网页中的文字内容,实现所见即所得。在tinymce中,有许多实用的功能,其中包括格式刷功能。 格式刷功能是一种非常实用的文字排版工具,可以将已设定好格式的文字样式应用到其他文本上,从而快速实现一致的排版效果。在tinymce中,实现格式刷功能也很简单,具体步骤如下: 1. 打开tinymce编辑器,选择需要应用格式的文字。 2. 点击“格式刷”按钮,这个按钮通常是一个刷子的图标,可以在tinymce的工具栏中找到。 3. 然后,将鼠标的光标移到需要应用格式的文本上,进行单击。 4. 这时,文字的格式就会被应用到选中的文本中。 除了以上这种常规的格式刷功能,还可以在tinymce中自定义格式刷,具体步骤如下: 1. 打开tinymce编辑器,选择需要自定义的文本。 2. 点击“格式刷”按钮,在下拉菜单中选择“自定义格式刷”。 3. 然后,在弹出的对话框中,设置需要自定义的文字格式,比如字体、大小、颜色等。 4. 最后,点击“确认”按钮,将自定义的格式刷保存下来。 这样,在编辑文字时,就可以直接通过选择自定义的格式刷,快速应用之前设置好的文字格式,从而提高工作效率。总之,tinymce编辑器提供的格式刷功能与自定义格式刷功能,对于web前端工程师来说非常实用,帮助他们更加高效地进行网页排版设计,实现所见即所得的效果。 ### 回答3: tinymce是一个非常常用的富文本编辑器,它有着丰富的功能以及插件,其中也包括格式刷功能。格式刷功能可以使用户在编辑文本时更快速、更方便地将文本的格式进行统一。下面就是如何在tinymce中实现格式刷功能的方法。 首先,需要在tinymce的配置项中添加一个按钮,该按钮即为格式刷按钮,用户点击该按钮可以启动格式刷的功能。为此,可以在tinymce配置项的toolbar选项中添加“formatselect”属性,用以显示格式刷按钮。例如: tinymce.init({ selector: 'textarea', toolbar: 'formatselect' }); 在添加了格式刷按钮之后,需要自定义格式刷的样式,以满足用户的需求。可以在tinymce的配置项中的formats选项中定义格式刷样式,例如: tinymce.init({ selector: 'textarea', toolbar: 'formatselect', formats: { custom: { block: 'p', attributes: { class: 'custom-style' } } } }); 上述代码中,我们定义了一个名为custom的自定义样式,该样式的标签是<p>,并且有一个class属性为custom-style。 最后,需要在点击格式刷按钮的时候,将选中的文本应用该格式刷样式。为此,可以在tinymce的配置项中的setup选项中添加一个函数来实现功能。例如: tinymce.init({ selector: 'textarea', toolbar: 'formatselect', formats: { custom: { block: 'p', attributes: { class: 'custom-style' } } }, setup: function (editor) { editor.addButton('formatbrush', { icon: 'formatbrush', tooltip: "Format Brush", onclick: function () { editor.formatter.apply('custom'); } }); } }); 上述代码中,我们添加了一个名为formatbrush的按钮,可以在tinymce中看到其图标为一个刷子。在点击该按钮的时候,调用editor.formatter.apply('custom')方法,即可应用我们定义的custom样式。 总之,通过以上步骤,便可在tinymce中实现格式刷功能了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值