📅 最后修改于: 2023-12-03 15:20:38.103000 🧑 作者: Mango
题目：tinymce 通过 id 获取编辑器
在前端开发中，富文本编辑器是非常常见的功能。tinymce 就是一个常用的富文本编辑器插件，它可以让用户更加方便地进行文本的编辑和排版。对于一个网站而言，获取 tinymce 编辑器是非常重要的一环，因此，本文将介绍如何通过 id 获取 tinymce 编辑器。
首先，在 HTML 中引入 tinymce 插件的 js 和 css 文件，然后在 body 中添加一个 div，指定一个唯一的 id，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tinymce 通过 id 获取编辑器</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tinymce@5.7.0/themes/silver/theme.min.css">
<script src="https://cdn.jsdelivr.net/npm/tinymce@5.7.0/tinymce.min.js"></script>
</head>
<body>
<div id="my-tinymce"></div>
</body>
</html>
接下来，在 JavaScript 中获取该 div，并使用 tinymce 初始化编辑器：
tinymce.init({
selector: '#my-tinymce',
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
});
在初始化过程中，需要指定 selector 属性，该属性的值为步骤一中的 div 的 id。这样就成功获取了 tinymce 编辑器。其中，除了 selector 属性，还可以指定其他的属性，比如 plugins、toolbar 等，以满足不同的需求。
最后，获取 tinymce 编辑器的内容，可以使用 getContent 方法，返回的内容为 markdown 格式的字符串，代码片段如下：
let content = tinymce.get('#my-tinymce').getContent({format: 'text'});
console.log(content);
以上就是通过 id 获取 tinymce 编辑器的详细介绍。同时，还介绍了如何获取编辑器的内容，并返回了 markdown 格式的字符串。希望对大家有所帮助！