tinymce 使用及自定义上传插件
TinyMCE是一个强大的富文本编辑器，可以用于Web开发中的文本编辑。以下是如何使用TinyMCE以及如何创建一个自定义的上传插件的示例。
- 使用TinyMCE：
首先，在HTML中引入TinyMCE的脚本和样式表：
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE Example</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea', // Change this to your textarea ID
plugins: 'image link code', // Add whichever plugins you need
menubar: 'file edit view insert format tools table help',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | ' +
'bullist numlist outdent indent | link image code',
});
</script>
</head>
<body>
<textarea></textarea> <!-- This is where TinyMCE will be initialized -->
</body>
</html>- 创建自定义上传插件：
TinyMCE允许你创建自定义插件来扩展其功能。以下是一个简单的自定义上传插件示例：
tinymce.PluginManager.add('customUpload', function(editor, url) {
// Adds a button to the toolbar
editor.ui.registry.addButton('customUpload', {
text: '上传图片',
icon: 'image',
onAction: function() {
// Trigger the upload handler
uploadImage();
}
});
// Function to upload the image
function uploadImage() {
// Create a form data object
const formData = new FormData();
formData.append('file', document.getElementById('imageInput').files[0]);
// Send the reque
评论已关闭