TinyMCE 使用指南：一个简单的 Demo
以下是一个使用 TinyMCE 的简单 Demo：
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE Demo</title>
<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js'></script>
<script>
tinymce.init({
selector: 'textarea',
height: 500,
plugins: 'advlist autolink lists link image charmap print preview',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image',
file_picker_types: 'image',
file_picker_callback: function(callback, value, meta) {
if (meta.filetype === 'image') {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function() {
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
callback(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
}
}
});
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>
在这个 Demo 中，我们首先引入了 TinyMCE 的 JavaScript 文件。然后使用 tinymce.init() 方法初始化 TinyMCE 编辑器，指定了编辑器的选择器、高度、插件和工具栏等配置项。
在这个 Demo 中，我们启用了一些插件和工具栏按钮，包括格式化、加粗、斜体、背景色、对齐方式、列表、图片等。
此外，我们还添加了一个文件选择器回调函数，用于选择图片文件并将其插入到编辑器中。
最后，在 <textarea> 标签中使用 TinyMCE 编辑器。
原文地址: https://www.cveoy.top/t/topic/pg2s 著作权归作者所有。请勿转载和采集!