在 Web 前端开发领域，富文本编辑器是不可或缺的工具。而实现一个富文本编辑器需要考虑的方面也很多，例如工具栏、样式、图片上传等。而 tinymce 是一个经典的富文本编辑器，功能强大且易于扩展。本文将介绍如何使用 npm 包 @mrvito/tinymce-4-snippet-plugin 实现 tinymce 编辑器中的代码片段功能。
什么是 @mrvito/tinymce-4-snippet-plugin
@mrvito/tinymce-4-snippet-plugin 是一个针对 tinymce 编辑器中代码片段的插件，可以方便地在文章中添加代码片段，并支持复制、粘贴、编辑和删除。该插件基于 tinymce 4 进行开发，封装了常见的代码片段操作，可以快速集成到已有的 tinymce 编辑器中。
安装
首先需要安装 tinymce 4，可以通过 npm 安装：
npm install tinymce@4 --save
然后安装 @mrvito/tinymce-4-snippet-plugin：
npm install @mrvito/tinymce-4-snippet-plugin --save
配置
在页面中引入 tinymce 和 @mrvito/tinymce-4-snippet-plugin：
<script src="node_modules/tinymce/tinymce.min.js"></script> <script src="node_modules/@mrvito/tinymce-4-snippet-plugin/dist/plugin.js"></script>
初始化 tinymce 编辑器，并添加 @mrvito/tinymce-4-snippet-plugin 插件：
tinymce.init({
selector: 'textarea',
plugins: 'snippet',
toolbar: 'snippet',
snippet_separator: '✂️',
height: 400,
branding: false,
});其中 snippet_separator 为代码片段的分隔符，可以根据需要进行自定义。在 tinymce 编辑器中，通过点击工具栏上的 snippet 按钮即可添加、编辑、复制和删除代码片段。
示例
下面是一个完整的示例，包含了如何引入 tinymce 和 @mrvito/tinymce-4-snippet-plugin，并进行配置和使用。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------------- ------------
------- ---------------------------------------------------
------- ----------------------------------------------------------------------------
--------
--------------
--------- -----------
-------- ----------
-------- ----------
------------------ -----
------- ----
--------- ------
---
---------
-------
------
---------------------
-------
-------在页面中输入以下代码片段并点击 snippet 按钮：
✂️hello
console.log('hello');
✂️效果如下：
总结
通过使用 @mrvito/tinymce-4-snippet-plugin，可以非常方便地在 tinymce 编辑器中添加、编辑、复制和删除代码片段。同时，也为我们了解和学习如何在 tinymce 编辑器中扩展功能提供了一个很好的例子。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24481b