You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
2.1 KiB
58 lines
2.1 KiB
import { Editor } from '@tiptap/core'
|
|
import StarterKit from '@tiptap/starter-kit'
|
|
import CharacterCount from '@tiptap/extension-character-count'
|
|
import BubbleMenu, { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
|
|
import Image from '@tiptap/extension-image'
|
|
import { getDom } from './utils.js'
|
|
|
|
import "./style/index.scss"
|
|
|
|
class Inkeon {
|
|
constructor(dom: string | Element) {
|
|
const domEl = getDom(dom)
|
|
this.#init(domEl)
|
|
}
|
|
|
|
#editor: Editor
|
|
|
|
#init(dom: Element) {
|
|
this.#editor = new Editor({
|
|
element: getDom(dom),
|
|
autofocus: true,
|
|
extensions: [
|
|
StarterKit,
|
|
Image,
|
|
CharacterCount.configure({
|
|
limit: 240,
|
|
}),
|
|
BubbleMenu.configure({
|
|
element: document.querySelector('.bubble-menu'),
|
|
shouldShow: ({ editor, view, state, oldState, from, to }) => {
|
|
console.log(editor, view, state, oldState, from, to);
|
|
//如果是图片或链接才显示菜单
|
|
return editor.isActive('image') || editor.isActive('link')
|
|
},
|
|
}),
|
|
],
|
|
})
|
|
console.log(this.#editor);
|
|
document.querySelector(".aa").addEventListener("click", () => {
|
|
// console.log(this.#editor.getJSON());
|
|
// console.log(this.#editor.getHTML());
|
|
console.log(this.#editor.getText());
|
|
})
|
|
// this.#editor.options.element = getDom(dom)
|
|
// setTimeout(() => {
|
|
// this.#editor.registerPlugin(BubbleMenuPlugin({
|
|
// updateDelay: 0,
|
|
// editor: this.#editor,
|
|
// pluginKey: "bubbleMenu",
|
|
// element: document.querySelector('.bubble-menu'),
|
|
// }))
|
|
// }, 0);
|
|
this.#editor.chain().setContent(`<p>Hello World!</p> <img src="https://cd2.boardgamesmaker.com/AttachFiles/WebsiteImages/Product_Show/FI_8807.jpg" />`).run()
|
|
}
|
|
}
|
|
|
|
export { Inkeon }
|
|
export default Inkeon
|