真实z 私聊

Milkdown技术求助

拔作岛2玩后感

@ #1 我用你这个试了后发现一个问题就是如果我用一个英文的引号后面随便跟一个字符的话就会报错。 例子如下： //markdown输入 :1 //报错日志 MilkdownError: Cannot match target parser for node: {"type":"textDirective","name":"1","attributes":{},"children":[],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1,"column":3,"offset":2}}}. Video插件的写法如下: //https://github.com/zhenshiz/mcmodwiki/blob/master/src/components/milkdown/plugin/video.js import { $command, $inputRule, $node, $remark } from '@milkdown/utils' import { InputRule } from '@milkdown/prose/inputrules' import { createApp, h } from 'vue' import directive from 'remark-directive' import Plyr from '@/components/milkdown/components/Plyr.vue' export const videoRemarkDirective = $remark('video', () => directive) export const videoNode = $node('video', () => ({ content: '', group: 'block', selectable: true, draggable: true, atom: true, isolating: true, defining: true, marks: '', attrs: { src: { default: '' } }, parseDOM: [{ tag: 'div[data-video-player]', getAttrs: (dom) => ({ src: dom.getAttribute('data-src') }) }], toDOM: (node) => { const container = document.createElement('div') container.setAttribute('data-video-player', '') container.setAttribute('data-src', node.attrs.src) container.setAttribute('contenteditable', 'false') container.className = 'w-full my-4 overflow-hidden shadow-lg rounded-xl' const app = createApp({ render: () => h(Plyr, { src: node.attrs.src }) }) app.mount(container) return container }, parseMarkdown: { match: (node) => node.name === 'video', runner: (state, node, type) => { state.addNode(type, { src: node.attributes.src }) } }, toMarkdown: { match: (node) => node.type.name === 'video', runner: (state, node) => { state.addNode('leafDirective', undefined, undefined, { name: 'video', attributes: node.attrs }) } } })) export const insertVideoCommand = $command( 'InsertVideo', (ctx) => (payload) => { console.log(payload) if (!payload) { return false } return (state, dispatch) => { if (!dispatch) { return false } const node = videoNode.type(ctx).create({ src: payload }) if (!node) return true dispatch(state.tr.replaceSelectionWith(node).scrollIntoView()) return true } } ) export const videoInputRule = $inputRule((ctx) => new InputRule( /{{video="(?[^"]+)?"?}}/, (state, match, start, end) => { const [matched, src = ''] = match const { tr } = state if (matched) { return tr.replaceWith( start - 1, end, videoNode.type(ctx).create({ src }) ) } return null } ) ) export const video = [ videoRemarkDirective, videoNode, insertVideoCommand, videoInputRule ].flat() 我这个插件是能成功插入视频的但是同时也会导致:1这样的格式出错。 导入插件的编辑器： 对此我的排查是这样的 1.禁用video插件 结果：无报错 判断：确实是video插件导致的问题 2.将video插件中export const videoRemarkDirective = $remark('video', () => directive) 这块注释掉 结果：无报错 判断：初步判断是$remark导致的问题，因为这个会将我在$inputRule定义的格式{{video:"https://img.touchgalstatic.org/2023/05/f15179024920231109233759.mp4"}}变成::video{src=https://img.touchgalstatic.org/2023/05/f15179024920231109233759.mp4}也是因为这个格式感觉是导致我用:1冲突的原因 如果大佬知道咋解决的话，求教谢谢🙏

@ #1 我是vue3的，太谢谢了已经成功在我的网站里跑起来了

新年快乐！

我以前遇到过水仙的网页版 不用下载直接玩确实很方便