百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

免费开源的 Vue 富文本编辑器,专门为 Element UI 使用优化

xsobi 2024-11-26 10:15 1 浏览

一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能。

关于 Element Tiptap Editor

Element Tiptap Editor 是一个在 web 开发领域“所见即所得”的富文本编辑器,基于 tiptap 编辑器和 element-ui 开发,相比很多富文本编辑器,Element Tiptap Editor 使用易上手,对开发者友好,而且可扩展性强,设计简洁。

Element Tiptap Editor 的技术特性

  • 操作按钮等组件使用 element-ui 组件,整体样式协调美观
  • 有许多开箱即用的 extension(编辑器扩展)
  • 完美支持 markdown 语法
  • 支持 TypeScript
  • i18n 国际化支持(en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he)
  • 高度自定义,可以自定义 extension 和它对应的菜单按钮视图
  • 操作灵活,可以通过直接控制编辑器的行为来定制编辑器
  • 提供中文文档

为什么选择 Element Tiptap Editor

上个月在项目的管理后台,接到到类似公告发布的需求,文字需要可以加强调色、列表编辑等较为轻量的富文本编辑需求,需要增加文章编辑的功能。

在一年多前我也写过文章推荐 Tiptap,这是一个基于 vue 的开源富文本编辑器,当时还是 1.x 版本,使用简单,现在更新的 2.0 全新版本,虽然功能更强大了,但复杂程度也大幅提升,1.x 版本也不再维护了。

就在一筹莫展的时候,发现了 Element Tiptap Editor,这是一个搭配 Element UI 使用,API 简化的 Tiptap 编辑器,在使用简单的同时,还能自定义扩展,一些需要按照一定格式插入或者格式化的内容,可以通过自定义扩展来完成,在 Element UI 搭建的项目中,Element Tiptap Editor 简直是最优的选择。

开发上手

Element Tiptap Editor 的官网很简洁,风格传承 Tiptap 1.x 版本,功能演示即代码,非常简单易懂。

安装 Element Tiptap Editor

// 使用 yarn
yarn add element-tiptap

// 使用 npm
npm install --save element-tiptap

在 Vue 中全局注册

import Vue from 'vue';
import ElementUI from 'element-ui';
import { ElementTiptapPlugin } from 'element-tiptap';
// 引入 ElementUI 样式
import 'element-ui/lib/theme-chalk/index.css';
// import element-tiptap 样式
import 'element-tiptap/lib/index.css';

// 安装 ElementUI 插件
Vue.use(ElementUI);
// 安装 element-tiptap 插件
Vue.use(ElementTiptapPlugin, {
  /* 插件配置项 */
});

当然也可以局部引入

<template>
  <div>
    <el-tiptap ...><el-tiptap>
  </div>
</template>

<script>
import { ElementTiptap } from 'element-tiptap';

export default {
  components: {
    'el-tiptap': ElementTiptap,
  },
};
</script>

富文本的操作菜单有很多,最简单的使用方法,就是配置需要用到的功能按钮,保持菜单的简洁,只要在按顺序把需要用到的功能罗列出来,传入组件,就完成了编辑器的搭建:

<template>
  <div>
    <el-tiptap v-model="content" :extensions="extensions" />
  </div>
</template>

<script>
import {
  // 罗列出需要的功能按钮
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
} from 'element-tiptap';

export default {
  data () {
    return {
    // 按照罗列的顺序被添加到菜单栏和气泡菜单中
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }), // 支持多级标题,设置为5级
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
      ],
      // 编辑器的内容
      content: `
        <h1>Heading</h1>
        <p>This Editor is awesome!</p>
      `,
    };
  },
},
</script>

一个简单具备编辑功能的富文本编辑器就完成了。当然这些内置的功能都是基础的文字排版,如果要实现较为复杂的功能,比如插入特定结构或格式的内容(插入一篇文章的封面和摘要),原理是根据 Tiptap 提供的事件,将处理后的内容插入到文章的选中位置,官网有详细的文档,代码量很少,也很容易弄懂。

免费开源说明

Element Tiptap Editor 是一个免费开源的项目,基于 MIT 开源协议,而 TiptapElement UI 同样也是免费开源的。因此任何个人或者公司都可以免费下载使用,不管是个人项目还是商业项目,都可以免费使用。

Element Tiptap Editor 的官网不是很稳定,经常打不开,我们也可以直接访问它的 Github 主页:Leecason/element-tiptap。

关注我,持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址。

Element Tiptap Editor - 免费开源的 Vue 富文本编辑器,专门为搭配 Element UI 使用优化,使用很简单|那些免费的砖

相关推荐

好用的云函数!后端低代码接口开发,零基础编写API接口

前言在开发项目过程中,经常需要用到API接口,实现对数据库的CURD等操作。不管你是专业的PHP开发工程师,还是客户端开发工程师,或者是不懂编程但懂得数据库SQL查询,又或者是完全不太懂技术的人,通过...

快速上手:Windows 平台上 cURL 命令的使用方法

在工作流程中,为了快速验证API接口有效性,团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间,而且促进了团队效率的提升。对于使用Windows系统的用户来说,这里有一套详细...

使用 Golang net/http 包:基础入门与实战

简介Go的net/http包是构建HTTP服务的核心库,功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持,可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...

#小白接口# 使用云函数,人人都能编写和发布自己的API接口

你只需编写简单的云函数,就可以实现自己的业务逻辑,发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程,进入开放平台我的接口-在线接口编程,设计一个新接口,设计和配置好接口参...

极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关

本内容来源于@什么值得买APP,观点仅代表作者本人|作者:iN在之前和大家说过,在iN的家里是没有墙面开关的。...

window使用curl命令的注意事项 curl命令用法

cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...

Linux 系统curl命令使用详解 linuxctrl

curl是一个强大的命令行工具,用于在Linux系统中进行数据传输。它支持多种协议,包括HTTP、HTTPS、FTP等,用于下载或上传数据,执行Web请求等。curl命令的常见用法和解...

Tornado 入门:初学者指南 tornados

Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...

PHP Curl的简单使用 php curl formdata

本文写给刚入PHP坑不久的新手们,作为工具文档,方便用时查阅。CURL是一个非常强大的开源库,它支持很多种协议,例如,HTTP、HTTPS、FTP、TELENT等。日常开发中,我们经常会需要用到cur...

Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介

本章涵盖使用Actix提供静态网页...

我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些

这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话,这是一次比较曲折的Bug跟踪之旅。10月28日,我们在GitHub上提...

linux文件下载、服务器交互(curl)

基础环境curl命令描述...

curl简单使用 curl sh

1.curl--help#查看关键字2.curl-A“(添加user-agent<name>SendUser-Agent<name>toserver)”...

常用linux命令:curl 常用linux命令大全

//获取网页内容//不加任何选项使用curl时,默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...

三十七,Web渗透提高班之hack the box在线靶场注册及入门知识

一.注册hacktheboxHackTheBox是一个在线平台,允许测试您的渗透技能和代码,并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战,并且模拟真实场景,其风格更倾向于CT...