Plug-In
history
commonmark
milkdown 사용 방법
.config((ctx) => {
ctx.set(rootCtx, document.querySelector('header'));
})
ctx를 적을? root를 설정한다. 설정하지 않으면 기본적으로 root가document.body로 설정된다.
import { defaultValueCtx } from '@milkdown/core';
const defaultValue = '# Hello milkdown';
Editor.make().config((ctx) => {
ctx.set(defaultValueCtx, defaultValue);
});
에디터를 켰을 때 기본적으로 어떤 것이 나올지 설정해준다.
...
<div id="pre">
<h1>Hello milkdown!</h1>
</div>
...
import { defaultValueCtx } from '@milkdown/core';
const defaultValue = {
type: 'html',
dom: document.querySelector('#pre'),
};
Editor.make().config((ctx) => {
ctx.set(defaultValueCtx, defaultValue);
});
html도 위와 같이 렌더링이 가능하다.
import { listener, listenerCtx } from '@milkdown/plugin-listener';
let output = '';
Editor.make()
.config((ctx) => {
ctx.get(listenerCtx).markdownUpdated((ctx, markdown, prevMarkdown) => {
output = markdown;
});
})
.use(listener);
markdown이 업데이트되면, 즉 사용자가 업데이트할 때마다 어떤 값이 적혀졌는지, 바로 앞 전의 값은 무엇이었는지 알 수 있게 된다.
import { listener, listenerCtx } from '@milkdown/plugin-listener';
let jsonOutput;
Editor.make()
.config((ctx) => {
ctx.get(listenerCtx).updated((ctx, doc, prevDoc) => {
jsonOutput = doc.toJSON();
});
})
.use(listener);
document node 값을 얻을 수 있다.
import { editorViewOptionsCtx } from '@milkdown/core';
let readonly = false;
const editable = () => !readonly;
Editor.make().config((ctx) => {
ctx.set(editorViewOptionsCtx, { editable });
});
// set to readonly after 5 secs.
setTimeout(() => {
readonly = true;
}, 5000);
import { Editor, editorViewCtx, serializerCtx } from '@milkdown/core';
async function playWithEditor() {
const editor = await Editor.make().use(commonmark).create();
const getMarkdown = () =>
editor.action((ctx) => {
const editorView = ctx.get(editorViewCtx);
const serializer = ctx.get(serializerCtx);
return serializer(editorView.state.doc);
});
// get markdown string:
getMarkdown();
}
??? 어떻게 쓰는거지