start demo use blocksuite (notion 风格)
import '@blocksuite/editor/themes/affine.css';
import { useEffect, useRef } from 'react';
export default () => {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
import('@blocksuite/editor').then((res) => {
const editor = new res.SimpleAffineEditor();
ref.current?.appendChild(editor)
})
})
return <>
<div className="editor" ref={ref}></div>
</>
}codemirror
vue
<script setup name="javascript">
import useJavaScript from './cJavascript';
useJavaScript();
</script>
<template>
<div id="editor">
</div>
</template>composition api
let useJavascript ;
import { EditorView, basicSetup } from "codemirror"
import { javascript } from "@codemirror/lang-javascript"
import { ref, shallowRef, nextTick } from 'vue'
export default useJavascript = ()=>{
nextTick(() => {
const parent = document.querySelector("#editor");
let view = new EditorView({
extensions: [basicSetup, javascript()],
parent: parent || document.body
})
})
}