likes
comments
collection
share

vue实现用户自定义富文本部分实验基础

作者站长头像
站长
· 阅读数 28

前言

为了显著提升用户体验并增加用户参与度，现代应用程序和网页平台经常集成让用户自定义富文本的功能。这不仅仅意味着允许用户输入简单的文本，而是为他们提供了一整套工具，使他们能够以丰富多样的方式表达自己，比如改变字体样式、大小和颜色，插入图片、视频、音频或超链接，应用列表或引用格式，以及使用表格或代码块等高级排版功能。通过这样的功能，用户可以创作出更具吸引力的内容，提升用户体验感。

我们将基于简单的文字格式设置为例，进行完善效果

正文

颜色盘的设置

富文本中颜色一定是最重要的属性之一了，但是对于一般的网页颜色盘的设置可谓耗时耗力，而且做出来后的效果一言难尽，并且十分扩大网页缓存大小。

这里我介绍两个简单好用方法给大家使用：

1.使用HTML5的<input type="color">

HTML5提供了一个内置的颜色选择器，通过<input type="color">元素可以直接实现。这是一个简单且不需要额外JavaScript的解决方案，但它提供的界面较为基础，可能不满足所有定制需求。

<input  v-model="textColor" type="color" id="colorSet" placeholder="文字颜色">

然后，你可以用vue中的事件绑定直接来获取用户选择的颜色，如果是使用纯JavaScript实现：

<input type="color" id="colorPicker">
JS部分：
document.getElementById('colorPicker').addEventListener('change', function(event) {
  var color = event.target.value;
  console.log('用户选择了颜色:', color);
});

效果：

vue实现用户自定义富文本部分实验基础

2.使用第三方库

如果需要更复杂的颜色选择器或更多自定义功能，可以考虑使用第三方库，如：

  • JSColor: 是一个轻量级的JavaScript颜色选择器库，支持高度定制。

要在你的Web应用程序中使用JSColor，请按照以下步骤操作：

  1. 下载JSColor库。您可以直接从JSColor GitHub仓库下载最新版本的库文件。
  2. 在HTML文件中引入JSColor库。将以下代码段插入到<head>标签内：
<link rel="stylesheet" href="path/to/jscolor.min.css"> 
<script src="path/to/jscolor.min.js"></script>

其中，path/to/应替换为您实际存储JSColor库文件的位置。

  1. 创建颜色选择器。在HTML文件中，向需要显示颜色选择器的元素添加jscolor属性,默认情况下，JSColor会自动识别所有带有jscolor属性的输入框元素，并为其创建一个颜色选择器。：
<input class="jscolor" value="#000000">

效果： vue实现用户自定义富文本部分实验基础

文字样式设置

对于大型项目文字样式提供是比较重要的工作，因为设计自己独一无二的字体是比较困难的，但是当你使用自带字体，那也是提挺香的了。

1. 利用JavaScript自带字体

如 Arial, Courier New, Georgia, Impact, 和 Verdana 都是常见的系统字体，大多数操作系统都会自带这些字体或者有类似的替代品。这意味着这些字体选择在大多数用户的设备上应该都能正常显示，无需额外加载网络字体资源。

2. 让用户选择系统字体

在Web应用中，可以通过JavaScript的 FontFaceSet.load() 方法或者第三方库（如 google-fonts-picker、fontselect.js）检测用户系统可用的字体，并提供一个下拉菜单让用户选择。这样用户可以选择他们系统中已经安装的任何字体。

3. 上传自定义字体文件

如果你的应用允许更高级的自定义，可以让用户上传自己的字体文件。上传后，可以在客户端或服务器端处理这些文件，转换为Base64编码或存储在服务器上，并动态地将这些字体应用到文本上。这涉及到更多的安全考量和文件处理逻辑。

这里我们只使用JavaScript自带字体：

 <label for="font-family">选择字体:</label>
    <select v-model="selectedFont" @change="updateFont">
      <option v-for="font in fonts" :key="font" :value="font">{{ font }}</option>
    </select>

*******JS部分：*******
data() {
    return {
      // 预设的字体列表
      fonts: [
        'Arial, sans-serif',
        'Courier New, monospace',
        'Georgia, serif',
        'Impact, fantasy',
        'Verdana, sans-serif',
      ],
      // 初始选中的字体
      selectedFont: 'Arial, sans-serif',
    };
  },
styledElement.style.fontFamily = this.selectedFont;

效果：

vue实现用户自定义富文本部分实验基础

文字大小设置

文字大小设置就很简单了，使用input接受参数再返赋值给文字样式大小：

<input v-model.number="textSize" type="text" placeholder="字体大小">
JS:
styledElement.style.fontSize = `${this.textSize}px`;

最后效果GIF animation:

vue实现用户自定义富文本部分实验基础

完整代码：

<template>
  <div>
    <label for="font-family">输入文字：</label>
    <input v-model="textContent" type="text" placeholder="文字">
    <label for="font-family">文字颜色：</label>
    <input class='qqq' v-model="textColor" type="color" placeholder="文字颜色">
    <label for="font-family">文字大小：</label>
    <input v-model.number="textSize" type="text" placeholder="字体大小">

    <label for="font-family">选择字体:</label>
    <select v-model="selectedFont" @change="updateFont">
      <option v-for="font in fonts" :key="font" :value="font">{{ font }}</option>
    </select>


    <button @click="applyStyles">应用样式</button>

    <ul>
      <li ref="styledText"> {{ textContent }} <br>
        <span class="spa">文字样式： color:{{ textColor }};  font-size: {{ textSize }}px; 样式： {{selectedFont}}"</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textContent: '',
      textColor: '#000000', // 默认颜色
      textSize: 16, // 默认字体大小
      fonts: [  //字体
        'Arial, sans-serif',
        'Courier New, monospace',
        'Georgia, serif',
        'Impact, fantasy',
        'Verdana, sans-serif',
      ],
      selectedFont: 'Arial, sans-serif',
    };
  },
  methods: {
    applyStyles() {
      const styledElement = this.$refs.styledText;
      styledElement.style.color = this.textColor;
      styledElement.style.fontSize = `${this.textSize}px`;
      styledElement.style.fontFamily = this.selectedFont;
    },
  },
};
</script>

<style>
.qqq{
  width: 100px;
  height: 30px;
}

ul{
  list-style: none;
}
.spa{
  color:black;
  font-size: 20px;
}
</style>

总结：

富文本文字功能除了基本的文字颜色、大小、字体之外，还有加粗、斜体、下划线、删除线， 上标和下标， 文本高亮或着重标记，文本阴影效果，等等。 大家可自己再去实验完善这些功能。

转载自:https://juejin.cn/post/7381997397822193718
评论
请登录