有来游去
回答者
回答于 2024-07-10
要在TinyMCE编辑器中隐藏常规上传按钮，只保留上传功能，你可以按照以下步骤操作：
- 首先，确保你已经在项目中引入了TinyMCE库。如果还没有引入，可以通过在HTML文件中的
<head>标签内添加以下代码来引入：
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
- 在HTML文件中，为需要使用TinyMCE编辑器的
<textarea>或<div>元素添加一个唯一的ID,例如myTinymce:
<textarea id="myTinymce"></textarea>
- 接下来，在JavaScript代码中初始化TinyMCE编辑器，并设置配置选项以隐藏常规上传按钮：
tinymce.init({
selector: '#myTinymce',
plugins: 'image', // 启用图片插件
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image', // 自定义工具栏按钮
upload_url: '/path/to/your/upload/endpoint', // 设置上传接口的URL
setup: (editor) => {
editor.ui.registry.addButton('uploadImage', { // 添加自定义上传按钮
label: '上传图片',
command: 'insertImage',
icon: 'fas fa-image',
onAction: function() {
// 这里可以实现自定义的图片上传逻辑
}
});
},
});
- 最后，在HTML文件中添加一个按钮，用于触发自定义的图片上传功能(例如，点击按钮后弹出文件选择框):
<button id="uploadImageBtn">上传图片</button>
- 在JavaScript代码中，为自定义上传按钮添加事件监听器，以便在点击按钮时触发图片上传功能：
document.getElementById('uploadImageBtn').addEventListener('click', function() {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*'; // 只接受图片文件
input.onchange = function() {
const file = input.files[0]; // 获取选中的图片文件
const reader = new FileReader();
reader.onload = function() {
const img = document.createElement('img');
img.src = reader.result; // 将图片显示在页面上(可选)
img.alt = ''; // 为图片添加alt属性(可选)
img.style.width = '100%'; // 根据需要设置图片宽度(可选)
const node = document.getElementById('myTinymce'); // 获取TinyMCE编辑器容器节点(可选)
node.appendChild(img); // 将图片添加到编辑器容器中(可选)
tinymce.activeEditor.insertContent(reader.result); // 在TinyMCE编辑器中插入图片(可选)
tinymce.activeEditor.windowManager.close(); // 关闭TinyMCE编辑器窗口(可选)
}
reader.readAsDataURL(file); // 以DataURL的形式读取图片文件(这是异步操作)
};
input.click(); // 点击文件选择框以触发事件(这是同步操作)
});
现在，当你点击“上传图片”按钮时，将弹出文件选择框让你选择要上传的图片。所选图片将通过自定义的上传接口发送到服务器，并在TinyMCE编辑器中插入。请注意，你需要根据实际情况修改上述代码中的一些配置选项和逻辑。
