从代码层面优化unicloud-uni-ui组件，让富文本编辑器拥有更多样式

2024-02-10 03:22:05

在上一节中，我们学习了如何获取节点信息，并在富文本中添加内容。这一节，我们将继续学习如何修改富文本的样式。

在上一节中，我们给工具栏添加了选中后变色的样式，但没有生效。这是因为我们没有在 DOM 元素中写入属性名 active。给哪一项写入 active，该项就会默认被选中。

因此，我们需要在代码中添加以下内容：

<template>
  <view class="container">
    <u-rich-text ref="richText" :value="value" @input="handleInput" />
    <view class="toolbar">
      <u-button type="primary" @click="handleBold">加粗</u-button>
      <u-button type="primary" @click="handleItalic">斜体</u-button>
      <u-button type="primary" @click="handleUnderline">下划线</u-button>
      <u-button type="primary" @click="handleForeColor">字体颜色</u-button>
      <u-button type="primary" @click="handleBackColor">背景颜色</u-button>
      <u-button type="primary" @click="handleBorder">边框</u-button>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');

    const handleInput = (e) => {
      value.value = e.detail.value;
    };

    const handleBold = () => {
      document.execCommand('bold');
    };

    const handleItalic = () => {
      document.execCommand('italic');
    };

    const handleUnderline = () => {
      document.execCommand('underline');
    };

    const handleForeColor = () => {
      document.execCommand('foreColor', false, '#ff0000');
    };

    const handleBackColor = () => {
      document.execCommand('backColor', false, '#00ff00');
    };

    const handleBorder = () => {
      document.execCommand('insertHTML', false, '<div style="border: 1px solid #000;">');
    };

    return {
      value,
      handleInput,
      handleBold,
      handleItalic,
      handleUnderline,
      handleForeColor,
      handleBackColor,
      handleBorder,
    };
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toolbar u-button {
  margin-right: 10px;
}

.richText {
  width: 100%;
  height: 100%;
}
</style>