自定义富文本编辑器（模拟飞书信息发送框）

紫微前端

已于 2022-03-14 14:51:38 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签： javascript vue.js elementui

于 2022-02-28 09:30:07 首次发布

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/123174901

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文档介绍了如何使用JavaScript和Vue.js，结合ElementUI库，实现一个自定义的富文本编辑器，该编辑器类似于飞书应用中的信息发送框功能。通过这个项目，读者将学习到如何集成和定制富文本组件，实现文本编辑、格式化以及发送功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="home" :style="{ height: height }">
    <div class="rightCon" :style="{ height: height }">
      <img style="display: none" class="welcome" src="./welcome.png" />
      <div class="sendmegCon">
        <span v-if="fuWenShow">
          <Button
            size="small"
            onclick="javascript:document.execCommand('bold')"
          >
            加粗
          </Button>
          <Button
            size="small"
            onclick="javascript:document.execCommand('underline')"
          >
            下划线

了解本专栏