基于uniapp的editor富文本仿csdn的app端样式

原创

已于 2022-12-07 16:53:27 修改 · 572 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2022-12-07 16:44:13 首次发布

本文介绍了一个基于Vue的富文本编辑器实现方案，包括文字格式调整、插入图片、添加链接等功能，并展示了如何通过监听键盘高度变化来优化用户体验。

先上效果图，

demo代码：editor.vue

<template>
	<view>
		<editor id="editor" ref="editor" style="height: auto;" class="ql-container" showImgSize showImgToolbar
			showImgResize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady"
			@input="editorInput" placeholder="请输入商品描述..."></editor>
		<view class="toolMenu" @touchend.prevent="tool">
			<text class="toolBtn iconfont icon-charutupian" data-name="tupian"
				:class="currentTool=='tupian' ? 'selected' : ''"></text>
			<text class="toolBtn iconfont icon-zitiyanse" data-name="wenzi"
				:class="currentTool=='wenzi' ? 'selected' : ''"></text>
			<text class="toolBtn iconfont icon-fuwenben" data-name="wenben"
				:class="currentTool=='wenben' ? 'selected' : ''"></text>
			<text class="toolBtn iconfont icon-editor-link" data-name="link"
				:class="currentTool=='link' ? 'selected' : ''"></text>
			<text class="toolBtn iconfont icon-shangyibu" data-name="undo"></text>
			<text class="toolBtn iconfont icon-xiayibu" data-name="redo"></text>
		</view>
		<view v-if="currentTool=='wenzi'" @touchend.prevent="format">

			<view class="formatTitle">文字格式</view>
			<view class="formatMenu">
				<view class="formatItem"> <text data-name="bold" :class="formats.bold ? 'selected' : ''"
						class=" formatBtn iconfont icon-zitijiacu"></text>
				</view>
				<view class="formatItem"><text data-name="italic" :class="formats.italic ? 'selected' : ''"
						class="formatBtn iconfont icon-