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

最新推荐文章于 2024-12-12 15:13:32 发布
最新推荐文章于 2024-12-12 15:13:32 发布
阅读量2.8k 收藏 20
点赞数 16
文章标签： 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/

PHP版百度富文本编辑器ueditor
08-08
PHP版百度富文本编辑器ueditor搜索直接到GitHub了，而且没有PHP版本的，用的很不舒服，找到以前用的PHP版百度富文本编辑器，上传供大家使用
( Rich)Rich Text Editor
06-26
Rich Text Editor - 源代码.zip
能粘贴WORD 内容(含图片)的富文本编辑器
最新发布
alisky119的博客
12-12 795
编辑器：百度ueditor前端：vue2,vue3,vue-cli,html5需求：复制粘贴word内容图片，word图片转存交互,导入pdf,导入PowerPoint(PPT)要求：开源，免费，技术支持平台：Windows,macOS,Linux,中标麒麟,银河麒麟,统信UOS,信创国产化场景：外网，内网，涉密环境，信创国产化项目CPU：x86,arm,龙芯(mips),龙芯(LoongArch)团队：原厂开发团队为您提供7*24小时专业技术支持服务。
自己实现Rich Text Editor
weixin_34161083的博客
08-04 289
文章截图 - 更好的排版经过对网上一些常见的RichTextEditor（rte-light, jHTMLArea, NicEdit）的分析后，我决定自己来实现一个。 为的不是重新发明轮子，我也没想把这个做成一个完整的轮子，仅仅是为了学习内部的实现机制。 1. 使IFrame可编辑 为了达到对HTML的编辑，我们不可能在TextArea中完成，这就需要借助一个内嵌的IFrame。 第一个问题就是如...
富文本编辑器
weixin_60930636的博客
06-05 967
富文本编辑器使用(vue3)
富文本编辑器的应用场景
weixin_30326745的博客
08-09 687
在实际应用中，用户一般不会使用富文本编辑器来做编辑操作。他们会先使用他们熟悉的word办公软件编辑好所需内容，再复制粘贴进富文本编辑器里面，保存到数据库。有一些文件比如一些公文是word文档，这个时候他们会直接拷贝到富文本编辑器里，点击保存到数据。按照这样的场景，富文本必须要具备能显示和word文档一摸一样的能力。 转载于:https://www.cnblogs.com/chentu2792036...
vue使用富文本编辑器解决方案(附代码，亲测可用)
01-06
TinyMCE是一款强大的开源富文本编辑器，支持多种功能如文本格式化、图片上传、链接插入等。它具有良好的跨平台兼容性和可定制性，非常适合与前端框架如Vue结合使用。 二、安装TinyMCE 首先，你需要通过npm安装...
uniapp富文本编辑器.zip
01-17
总结，uniapp富文本编辑器的使用涉及多个方面，从组件选择、样式定制、内容获取、事件监听到实际应用场景，都需要开发者有深入的理解和技术实践。通过熟练掌握这些知识点，可以构建出符合业务需求、用户体验优良的富...
富文本编辑器组件.zip
03-06
例如，富文本编辑器组件可能使用了Quill，它是一个轻量级且强大的JavaScript库，具有良好的模块化结构，可以方便地扩展和自定义。 富文本编辑器的核心功能包括： 1. **文本格式化**：加粗、斜体、下划线、删除线、...
TinyMCE富文本编辑器资源包
02-23
TinyMCE是一款强大的开源富文本编辑器，广泛应用于网页内容编辑和内容管理系统中。这个"TinyMCE富文本编辑器资源包"包含了TinyMCE的最新版本——版本6的相关资源，旨在提供一个功能完备、易用且高度可定制的文本编辑...
rich-text-editor
04-30
富文本编辑器的探索 动手实现一个富文本编辑器 记录 document.execCommand会对鼠标选择的文本执行命令，目前就是做到这个， 接下来需要怎么做到编程选择文本 观察Quill的操作方式，发现它的交互与我第一点里想的不一样，是点击B后变成粗体模式， 再次点击变成正常模式，来试试,见提交 step2的交互是点击editor触发编辑模式，然后点击B修改为粗体模式，接着再次触发编辑 模式，这时进行编辑就是粗体，如果再次点击B，此时再编辑便回到正常模式。这里发现虽然editor 失去焦点，但是点击B后的模式还是一直存在，所以document.execCommand不仅仅是对选择的文本 有作用，而且还对编辑激活状态的editor的区域保持了一个模式状态，这个模式状态会保持着，然后 接下来的编辑都会应用这个模式 formatBlock命令是对当前所有的内容加一个包裹,通过回车键以后会对新一行
rich-text-editor:富文本编辑器，旨在仅接受有限的嵌入式HTML标记集
04-29
富文本编辑器 富文本编辑器，旨在仅接受有限的嵌入式HTML标记集。 该富文本编辑器在公众可访问的任何形式（例如博客中的评论形式，社交媒体中的聊天形式以及论坛中的问题或答案形式）上都表现最佳。 用法 <!DOCTYPE html > < html dir =" ltr " > < head > < meta charset =" utf-8 " > < title > Demo </ title > < link href =" rich-text-editor.min.css " rel =" stylesheet " > </ head > < body > < textarea > </ textarea > < script src =" rich-text-editor.min.js " > </ script > <
富文本编辑器-Ueditor
baluo6176的博客
05-28 277
富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。最先只有 IE 浏览器支持，其它浏览器相继跟进，在功能的丰富性来说，还是 IE 强些。虽然没有一个统一的标准，但对于最基本的功能，各浏览...
富文本编辑器（UEditor）
2301_79659699的博客
03-11 3221
富文本编辑器的使用
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KYGALYX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值