44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Editor } from "@tinymce/tinymce-react";
|
||
|
|
import React, { useRef } from "react";
|
||
|
|
|
||
|
|
const TinyEditor = () => {
|
||
|
|
const editorRef = useRef<Editor | null>(null);
|
||
|
|
|
||
|
|
const handleEditorChange = (content, editor) => {
|
||
|
|
console.log("Content was updated:", content);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 添加一个函数来以编程的方式插入文本
|
||
|
|
const insertTextAtCursor = (text) => {
|
||
|
|
const editor = editorRef.current;
|
||
|
|
if (editor) {
|
||
|
|
editor.insertContent(text); // 使用 insertContent 方法插入文本
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Editor
|
||
|
|
initialValue="<p></p>"
|
||
|
|
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
||
|
|
init={{
|
||
|
|
height: 500,
|
||
|
|
menubar: false,
|
||
|
|
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",
|
||
|
|
}}
|
||
|
|
onEditorChange={handleEditorChange}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default TinyEditor;
|