在HTML中插入编辑器，通常是为了实现在线编辑和预览的功能，这里我们以常用的富文本编辑器TinyMCE为例，介绍如何在HTML中插入编辑器。
1、引入TinyMCE库
我们需要在HTML文件中引入TinyMCE库，可以通过以下方式引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TinyMCE示例</title>
<!-引入TinyMCE库 -->
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<!-在这里插入编辑器 -->
</body>
</html>
2、创建一个textarea元素
接下来，我们需要在HTML文件中创建一个textarea元素，用于承载编辑器的内容，需要为其设置一个唯一的ID，以便后续通过JavaScript操作编辑器。
<textarea id="myEditor">这里是初始内容</textarea>
3、初始化TinyMCE编辑器
现在，我们可以使用JavaScript代码初始化TinyMCE编辑器，需要在<head>标签内添加一个<script>标签，用于编写JavaScript代码，在该<script>标签内，编写如下代码：
// 初始化TinyMCE编辑器
tinymce.init({
selector: 'myEditor', // 选择器，与第2步中的ID对应
theme: 'modern', // 主题，可选值有'modern'、'simple'等
plugins: 'advlist autolink lists link image charmap print preview anchor', // 插件列表，根据需要选择
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', // 工具栏按钮，根据需要选择
menubar: false, // 是否显示菜单栏，可选值有true、false、'file edit view insert format tools table help'等
});
4、保存和预览功能（可选）
如果需要实现保存和预览功能，可以使用TinyMCE提供的API，需要在HTML文件中添加两个按钮，分别用于保存和预览：
<button onclick="saveContent()">保存</button> <button onclick="previewContent()">预览</button>
在JavaScript代码中，编写如下函数：
// 保存内容到服务器或本地存储（如localStorage）
function saveContent() {
const content = tinymce.activeEditor.getContent(); // 获取编辑器内容
// 将内容保存到服务器或本地存储（如localStorage）的代码...
}
// 预览内容（如在新窗口打开预览页面）
function previewContent() {
const content = tinymce.activeEditor.getContent(); // 获取编辑器内容
// 在新窗口打开预览页面的代码...
}
至此，我们已经在HTML中成功插入了TinyMCE编辑器，用户可以通过该编辑器在线编辑和预览内容。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/347892.html
微信扫一扫 