多种富文本编辑器介绍和使用

最新推荐文章于 2024-06-12 10:02:08 发布
最新推荐文章于 2024-06-12 10:02:08 发布
阅读量2.1k 收藏 17
点赞数 15
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KYGALYX/article/details/136986313
版权

多种富文本编辑器介绍和使用

富文本编辑器

富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。
　作为一个技术人员，手上备上两款富文本编辑器还是很有用的，指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了，毕竟从开发上讲，每个富文本编辑器的用法都是有区别的。

1、TinyMCE

TinyMCE是一个开源的所见即所得的HTML编辑器，界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。而且这么好的东西还是开源免费的，目前一直有人维护，这款编辑器使用的人非常多。
官网地址：https://www.tiny.cloud/docs/demo/full-featured/
在这里插入图片描述

下面将带你快速入门，详细使用可以查看官网使用
1.首先引入该资源库

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

2.将 TinyMCE 初始化为 Web 表单的一部分
selector通过将包含值的对象传递给 来初始化网页上任何一个或多个元素上的 TinyMCE 5 tinymce.init()。该selector值可以是任何有效的CSS 选择器。

例如：要替换<textarea id=“mytextarea”>为 TinyMCE 5 编辑器实例，请将选择器传递’#mytextarea’给tinymce.init()。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

    <script>
      tinymce.init({
        selector: '#mytextarea'
      });
    </script>

  </head>

  <body>
  <h1>TinyMCE Quick Start Guide</h1>
    <form method="post">
      <textarea id="mytextarea">Hello, World!</textarea>
    </form>
  </body>
</html>

将此内容添加到 HTML 文件并在 Web 浏览器中打开它会加载 TinyMCE 编辑器，例如：

<textarea id="default">Hello, World!</textarea>

js如下

tinymce.init({
  selector: 'textarea#default'
});

3.添加您的 API 密钥

要删除该通知：
警告图标:该域名未在 Tiny Cloud 注册。
no-api-key将源脚本 ( )替换<script src=…为 Tiny Cloud API 密钥，该密钥是在注册Tiny Cloud时创建的。注册 Tiny Cloud API 密钥还将提供高级插件的试用版。

4.用表单POST保存内容

使用表单处理程序处理内容。
当<form>提交时，TinyMCE 5 将以POST与普通 HTML 相同的方式显示内容<textarea>，包括编辑器内容的 HTML 元素和内联 CSS。主机的表单处理程序可以以与常规<textarea>.

2、CKEditor

Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本，FckEditor的用户现在基本都转移到Ckeditor了。Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。
　官网地址：https://ckeditor.com/
　在这里插入图片描述
下面将带你快速入门，详细使用可以查看官网使用
多种方式使用
第一种

<script src="https://cdn.ckbox.io/ckbox/2.4.0/ckbox.js"></script>

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/ckbox/2.4.0/ckbox.js"></script>
    </head>
    <body>
        <div id="ckbox"></div>
        <script>
            CKBox.mount(document.getElementById('ckbox'), {
                // You must provide a valid token URL in order to use the application
                // After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
                // https://ckeditor.com/docs/ckbox/2.4.0/guides/configuration/authentication.html#development-token-endpoint
                tokenUrl: 'https://your.token.url'
            });
        </script>
    </body>
</html>

第二种

npm install ckbox

使用：

import * as CKBox from 'ckbox';
import 'ckbox/dist/styles/ckbox.css';

CKBox.mount(document.querySelector('#ckbox'), {
    tokenUrl: 'https://your.token.url'
});

第三种去下载包
https://download.ckbox.io/CKBox/ckbox_2.4.0.zip
解压后使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="ckbox/ckbox.js"></script>
    </head>
    <body>
        <div id="ckbox"></div>
        <script>
            CKBox.mount(document.getElementById('ckbox'), {
                tokenUrl: 'https://your.token.url'
            });
        </script>
    </body>
</html>

3、UEditor

UEditor 是由百度出品的富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源免费。这款编辑器用过的人也非常多，功能非常全面，插件很多，还可以很方便插入百度地图，接入十分简单。

16年之后百度没有怎么更新了，不过现有的功能也足够用了。UEditor分为UE版（全功能版）和UM版（精简版），大家可以根据自己使用环境选择不同的版本。

官网地址：http://ueditor.baidu.com/website/
点击该地址之后有教程使用

4、wangEditor

wangEditor轻量级，小巧实用，配置方便，使用简单。可以自定义皮肤功能，免费开源。用户数量也很多，尤其是用在一些轻型环境，比如论坛社区回帖。wangEditor是国人出品的开源项目。
官网地址：http://www.wangeditor.com/
在这里插入图片描述
下面将带你快速入门，详细使用可以查看官网使用
创建空白编辑器

引入 CSS 定义样式

可自定义编辑器、工具栏的尺寸、边框、z-index 等样式。

<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { height: 500px; }
</style>

定义 HTML 结构

<div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>
    <div id="editor-container"><!-- 编辑器 --></div>
</div>

如果想要“全屏”功能，则要求工具栏、编辑器 DOM 节点必须是同一层级
当然，工具栏、编辑器 DOM 节点也可自由组合，例如 仿腾讯文档 demo

引入 JS 创建编辑器

<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
const { createEditor, createToolbar } = window.wangEditor

const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      // 也可以同步到 <textarea>
    }
}

const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default', // or 'simple'
})

const toolbarConfig = {}

const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
})
</script>

mode: ‘default’ 默认模式 - 集成了 wangEditor 所有功能
mode: ‘simple’ 简洁模式 - 仅有部分常见功能，但更加简洁易用

5、kindeditor

KindEditor历史也很长了，用户数也不少，国内某公司出品。免费开源。界面类似于office word，界面和功能中规中矩，文档齐全，使用还算方便。
官网地址：http://kindeditor.net/demo.php
在这里插入图片描述

下面将带你快速入门，详细使用可以查看官网使用

  1. 下载编辑器
    下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。

下载页面: http://www.kindsoft.net/down.php

Note
您可以根据需求删除以下目录后上传到服务器。
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

  1. 部署编辑器
    解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/
  2. 修改HTML页面
    在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>

Note
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。
在该HTML页面添加以下脚本。

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>

Note
第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 。
var options = {
cssPath : ‘/css/index.css’,
filterMode : true
};
var editor = K.create(‘textarea[name=“content”]’, options);

  1. 获取HTML数据
// 取得HTML内容
html = editor.html();

// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery

// 设置HTML内容
editor.html('HTML内容');

Note
KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，所以用form方式提交数据，不需要手动执行sync()函数。
KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式，保留所有标签。

// 关闭过滤模式，保留所有标签
KindEditor.options.filterMode = false;

KindEditor.ready(function(K)) {
        K.create('#editor_id');
}

6、simditor

simditor是Tower平台使用的富文本编辑器，是一款轻量化的编辑器，界面简约，功能实用，插件不是很多，功能要求不高的可以使用。虽然是国内出品，但文档是英文的。开源免费。
　官网地址：https://simditor.tower.im/
　在这里插入图片描述
　两个方式引入，可以使用下载的方式，
　您还可以通过bower和npm安装Simditor：

npm install simditor
bower install simditor

将以下文件导入您的web应用程序

<link rel="stylesheet" type="text/css" href="[style path]/simditor.css" />

<script type="text/javascript" src="[script path]/jquery.min.js"></script>
<script type="text/javascript" src="[script path]/module.js"></script>
<script type="text/javascript" src="[script path]/hotkeys.js"></script>
<script type="text/javascript" src="[script path]/uploader.js"></script>
<script type="text/javascript" src="[script path]/simditor.js"></script>

在项目中使用Simditor
要使用Simditor，首先需要textarea元素如下：

<textarea id="editor" placeholder="Balabala" autofocus></textarea>

初始化Simditor：

var editor = new Simditor({
  textarea: $('#editor')
  //optional options
});

textarea是必需的选项。jQuery对象、HTML元素或Selector字符串可以传递给该选项。

一些可选选项：

  • placeholder（默认值：“”）simditor的占位符。默认情况下，使用文本区域的占位符属性值。
  • toolbar（默认值：true）-显示工具栏按钮
  • toolbarFloat（默认值：true）-修复了滚动时浏览器顶部的工具栏。
  • toolbarHidden（默认值：false）-隐藏工具栏。
  • defaultImage（默认值：'images/image.png'）-默认图像占位符。在Simditor中插入图片时使用。
  • tabIndent（默认值：true）-使用“tab”键进行缩进。
  • params（默认值：{}）-在文本区域中插入隐藏的输入以存储参数（键-值对）
  • upload（默认值：false）-接受false或键值对。上传图像的额外选项。例如“url”、“params”
  • pasteImage（默认值：false）-支持通过粘贴剪贴板中的图像进行上传。只有Firefox和Chrome支持。

7、bootstrap-wysiwyg

bootstrap-wysiwyg是基于Bootstrap的轻型、免费开源的富文本编辑器，界面简洁大方。使用需要先引入bootstrap。
地址：http://mindmup.github.io/bootstrap-wysiwyg/
在这里插入图片描述
使用方法在官网内有

8、summernote

summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。summernote开源免费，该项目一直比较活跃，一直都有人在维护。
summernote同样依赖于jquery和bootstrap，使用前先引入这两项。
地址：https://summernote.org/
在这里插入图片描述
下载压缩包
解压使用

安装
需要HTML5 doctype
Bootstrap使用某些需要HTML5 doctype的HTML元素和CSS属性。包括在你所有项目的开始

<!DOCTYPE html>
<html lang="en">
...
</html>

包括js/css
如果您使用的是Boostrap 3或4版本的Summernote，Summernote使用开源库jQuery和Bootstrap，如果您使用Lite版本的Summarnote，则只使用jQuery。在中包含以下代码headHTML页面的区域

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

如果您在不同的文件夹中下载了summernote，请不要忘记更改文件的路径。

然而，正如现在许多开发人员所做的那样，您可以将样式表包含在head是页面的，并在页面底部，但在结束之前包含Javascript身体标签

Fontawese依赖
在v0.8.0之后，您不必使用fontawesome来显示Summernote的图标。但是你仍然可以使用fontwo敬畏来制作你的自定义图标。有关更多详细信息，请访问自定义按钮第节。在v0.8.18之后，您可以使用自定义图标覆盖注释图标。有关更多详细信息，请访问自定义图标第节

嵌入
Summernote可以与form .
不使用form，我们建议使用div公司在body; 然后，该元素将用于您希望在页面中呈现Summernote编辑器的位置。

<div id="summernote">Hello Summernote</div>

在中使用form，与上面的基本相同，但不是div公司，我们建议使用textarea元素内部形式，它应该包含一个name属性，以便在提交表单时可以使用该名称在后端处理编辑器数据。此外，如果在form设置属性method="post"为了允许更大的编辑器内容解析到后端，如果不这样做，数据可能无法解析，或者将被截断。

<form method="post">
  <textarea id="summernote" name="editordata"></textarea>
</form>

文档准备好后运行下面的脚本！

$(document).ready(function() {
  $('#summernote').summernote();
});

这个$(document).ready如果在文档末尾包含Javascript，则函数是特别必要的。

简单示例
将下面的代码另存为index.html然后用浏览器打开它

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>

9、Froala

Froala是一款功能丰富的富文本编辑器，界面分类清晰，容易集成，容易升级，支持主流浏览器，具有行内编辑功能。Froala代码示例很多，可以集成在很多js框架里如React.js，Aurelia，Angular，Ionic，Django等。插件很多，易于扩充功能。

Froala是收费的不过多介绍
　地址：https://www.froala.com/wysiwyg-editor
　在这里插入图片描述

10、Quill

Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。
开源免费，项目活跃，一直有人维护。
地址：https://quilljs.com/
在这里插入图片描述

12、dhtmlxEditor

DHTMLX组件是一整套基于JS的UI库，功能强大，其中包含编辑器dhtmlxEditor。该编辑器可以直接集成到Angular，React和Vue.js框架中，该编辑器还同时支持Markdown和富文本。

支持普通视图和类似word一样的页面视图，支持全屏幕，工具支持自定义，包括工具条颜色和样式等。

dhtmlxEditor分为免费版和收费版，免费版具有绝大多数功能，而且免费版是开源的你可以在代码级别随便扩充。
　地址：https://dhtmlx.com/docs/products/dhtmlxRichText/

KYGALYX
关注
  • 15
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp富文本编辑器.zip
01-17
总结，uniapp富文本编辑器的使用涉及多个方面，从组件选择、样式定制、内容获取、事件监听到实际应用场景，都需要开发者有深入的理解和技术实践。通过熟练掌握这些知识点，可以构建出符合业务需求、用户体验优良的富...
推荐10款在工作中常用的富文本编辑器
u011757939的博客
03-26 1323
8.Lexical是一个可扩展的文本编辑器框架，提供了出色的可靠性、可访问性和性能。
几款主流好用的富文本编辑器介绍
m0_68652823的博客
06-20 6240
富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。
推荐一款基于Draft.js的富文本编辑器：draft-js-editor
最新发布
gitblog_00098的博客
06-12 372
推荐一款基于Draft.js的富文本编辑器：draft-js-editor 项目地址:https://gitcode.com/AlastairTaft/draft-js-editor 在这个数字时代，内容创作的需求日益增长，一个好的富文本编辑器是不可或缺的工具。今天，我们向您推荐一个由Facebook的Draft.js构建的高级文本编辑器——draft-js-editor。它以Medium和Fac...
十二款·富文本编辑器：数字创作的瑞士军刀
奇遇少年
01-22 6165
在实际项目中，选择适合需求的富文本编辑器，并根据最佳实践进行集成和定制，将有助于提高用户编辑体验，为项目增添更多的交互性和吸引力。
富文本编辑器介绍
月亮的博客
10-21 2万+
富文本编辑器，Multi-function Text Editor, 简称 MTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。功能强大的富文本编辑器可以实现文本编辑、格式设置、排版设置、媒体文件编辑上传、超链接、文本导出、打印等等功能。
前端必备14款业界受欢迎的富文本编辑器
Caleb的博客
03-23 5982
富文本编辑器真的非常多，以上只是本人接触过的一些，相信还有很多很好的富文本存在，其实也没必要全都试一遍，只有最适合自己的，才是最好的。
LayUI - 富文本编辑器
学弟不想努力了
11-30 2万+
一个做后端的猿，难免用到LayUI，首先在这里，不推荐使用，坑多 一、富文本编辑器 缺点：功能太少，只能满足简单需求，只有下面这几个功能 废话少说，直接丢代码 html部分 <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> <div> <!-- 引入layui语法 --> <texta.
富文本编辑器
codercjw的博客
01-13 3049
富文本编辑器
TinyMCE富文本编辑器资源包
02-23
TinyMCE是一款强大的开源富文本编辑器，广泛应用于网页内容编辑和内容管理系统中。这个"TinyMCE富文本编辑器资源包"包含了TinyMCE的最新版本——版本6的相关资源，旨在提供一个功能完备、易用且高度可定制的文本编辑...
ThinkPHP中使用Ueditor富文本编辑器
10-23
在ThinkPHP框架中集成Ueditor富文本编辑器是常见的需求，用于提供用户友好的文本编辑体验，例如在创建博客、论坛或CMS系统时。Ueditor是一款功能强大的在线文本编辑器，支持多种格式的文本处理，如图片上传、表格、...
富文本编辑器组件.zip
03-06
例如，富文本编辑器组件可能使用了Quill，它是一个轻量级且强大的JavaScript库，具有良好的模块化结构，可以方便地扩展和自定义。 富文本编辑器的核心功能包括： 1. **文本格式化**：加粗、斜体、下划线、删除线、...
tinymce富文本编辑器的使用
weixin_44867717的博客
12-03 8655
富文本
9款 Vue 富文本编辑器
学习 记录 总结 分享
05-10 1万+
Trumbowyg 是一个轻量，可定制的 jQuery 所见即所得（WYSIWYG）的编辑器插件，可生成语义化代码，带有功能强大的 API。编辑器和生成的代码进行了优化以支持 HTML5。兼容大部分浏览器，如 IE8+、Chrome、Opera 和 Firefox。基于bootstrap,比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。
TinyMce富文本编辑器使用【详细】
TeroZhang的博客
11-10 1982
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
超简单！教你手把手整一个富文本编辑器
qq_57305254的博客
01-10 1301
基于Quill的富文本编辑器上传图片,提交内容,后端处理全流程，纯js版本
几款主流好用的富文本编辑器（所见即所得常用编辑器）介绍
热门推荐
黄志千的博客
09-15 33万+
富文本编辑器 　富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。 　作为一个技术人员，手上备上两款富文本编辑器还是很有用的，指不定那个项目就要集成一个进去。到时候现找现用那可就费功夫了，毕竟从开...
常用的几种富文本编辑器
u013733643的博客
04-26 364
常用的几种富文本编辑器
vue3使用富文本编辑器
05-11
Vue 3 可以使用多种富文本编辑器，其中一些比较常见的包括： 1. Quill：一个轻量级的富文本编辑器，支持自定义主题和插件。 2. CKEditor 5：一个功能强大的富文本编辑器，具有可扩展性和自定义性。 3. TinyMCE：一个易于使用的富文本编辑器，支持插件和主题的自定义。 4. Froala Editor：一个现代化的富文本编辑器，具有响应式设计和自定义选项。 对于使用这些富文本编辑器的步骤，一般包括以下几个步骤： 1. 安装富文本编辑器的包，例如 `npm install quill`。 2. 在 Vue 3 中导入并注册富文本编辑器组件。 3. 在组件中使用富文本编辑器。 以下是一个使用 Quill 富文本编辑器的示例代码： ``` <template> <div> <div ref="editor"></div> </div> </template> <script> import Quill from 'quill' export default { mounted() { const editor = new Quill(this.$refs.editor, { theme: 'snow' }) } } </script> ``` 在上面的代码中，我们将 Quill 富文本编辑器作为一个组件导入，然后在组件的 `mounted()` 生命周期钩子中实例化了一个编辑器实例。在 `div` 中使用 `ref` 属性引用了一个 `editor` 元素，这个元素将会被 Quill 富文本编辑器实例化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值