uni-app内置的editor直接使用的时候是什么图标都没有的,各个功能也需要自己借助api进行封装,因此简单封装一个编辑器组件,包括了几个基本的功能,包括加粗、倾斜、段落格式、分割线、上下角标等。
最终呈现的样式大致如下(注释了部分暂时用不到的按钮)
具体代码如下:
(使用到的icon可以在阿里巴巴里面自己找一下进行替换哈)
<template>
<view class="container">
<view class="page-body">
<view class="wrapper">
<view
class="toolbar"
@tap="format"
style="max-height: 240rpx; overflow-y: auto"
>
<!-- 字体 -->
<!-- <view
:class="data.formats.fontFamily ? 'ql-active' : ''"
class="iconfont icon-font"
data-name="fontFamily"
data-value="Pacifico"
></view> -->
<!-- 加粗 -->
<view
:class="data.formats.bold ? 'ql-active' : ''"
class="iconfont icon-zitijiacu"
data-name="bold"
></view>
<!-- 斜体 -->
<view
:class="data.formats.italic ? 'ql-active' : ''"
class="iconfont icon-zitixieti"
data-name="italic"
></view>
<!-- 下划线 -->
<view
:class="data.formats.underline ? 'ql-active' : ''"
class="iconfont icon-zitixiahuaxian"
data-name="underline"
></view>
<!-- 删除中划线 -->
<!-- <view
:class="data.formats.strike ? 'ql-active' : ''"
class="iconfont icon-zitishanchuxian"
data-name="strike"
></view> -->
<!-- 字号 -->
<!-- <view
:class="data.formats.fontSize === '24px' ? 'ql-active' : ''"
class="iconfont icon-font-size"
data-name="fontSize"
data-value="48rpx"
></view>-->
<!-- 字体颜色 -->
<!-- <view
:class="data.formats.color === &