unicloud云开发进阶22-项目6自定义富文本编辑器editor

新建一个新增页面edit

要实现的效果：

<template>
  <view class="edit">
    新增
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">

</style>

富文本编辑器使用的官方内置组件

在uniapp文档的组件 $\rightarrow$ 内置组件 $\rightarrow$ 表单组件 $\rightarrow$ editor

提交按钮使用uview的实心按钮

编辑页面的基本结构

编辑页面的按钮一开始应该是默认禁用

<template>
  <view class="edit">
    <!-- 标题输入框 -->
    <view class="title">
      <input type="text" placeholder="请输入标题" />
    </view>
    <!-- 内容部分 -->
    <view class="content">
      <editor placeholder="写点什么..."></editor>
    </view>
    <!-- 提交按钮 -->
    <view class="btnGroup">
      <u-button type="primary" text="确定发表" disabled="false"></u-button>
    </view>
    <!-- 富文本功能选择 -->
    <view class="tools">
      <view class="item"><text class="iconfont icon-zitibiaoti"></text></view>
      <view class="item"><text class="iconfont icon-zitijiacu"></text></view>
      <view class="item"><text class="iconfont icon-zitixieti"></text></view>
      <view class="item"><text class="iconfont icon-fengexian"></text></view>
      <view class="item"><text class="iconfont icon-charutupian"></text></view>
      <view class="item"><text class="iconfont icon-duigou_kuai"></text></view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">

</style>

css样式

calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

• 任何长度值都可以使用calc()函数进行计算；

• calc()函数支持 "+", "-", "*", "/" 运算；

• calc()函数使用标准的数学运算优先级规则；

• vh： 视窗高度的百分比（ 1vh 代表视窗的高度为 1%）

视频中点击下方的工具能变色，但是自己的不会变色 这句代码的意思是找到父级类名，在选中时

 &.active{
     color: #0199FE;
}

下方工具条的css样式

   .tools {
     width: 100%;
     height: 80rpx;
     background: #fff;
     border-top: 1rpx solid #f4f4f4;
     // 固定定位
     position: fixed;
     left: 0;
     bottom: 0;
     display: flex;
     justify-content: space-around;
     align-items: center;
     .iconfont {
       font-size: 36rpx;
       color: #333;
       &.active{
         color: #0199FE;
       }
     }

这里uniapp自带的富文本编辑器组件中的placeholder字体是斜的，且颜色较深，uniapp没有提供修改的方法

视频中是通过控制台小箭头审查元素，拿到这个组件的类名，然后用原生的css写法，用/deep/深度作用选择器

他的placeholder中的文字是写在::before中的，通过/deep/组件穿透，

/deep/：让父组件向下影响到子组件内部的样式，就是让父组件可以选中子组件内部的css样式

CSS ::before和::after伪元素允许您在任何非替换元素之前和之后插入“内容”。这有效地允许您在网页上显示 HTML 内容中可能不存在的内容

  /deep/ .ql-blank::before{
    font-style: normal;
    color:#e0e0e0;
  }

字变正了，颜色也变浅了