自己做网站原始代码,专业网站制作公司名称,网站建设如何建,入侵织梦网站如果你有更好用的编辑器组件#xff0c;请一定推荐给我!!!#xff08;最好附带使用说明#x1f913;️#xff09;
介绍
在开发一个社区页面的时候#xff0c;需要完成发帖、浏览帖子的能力。这里考虑接入markdown编辑器进行开发#xff0c;也符合大多数用户的习惯。
…如果你有更好用的编辑器组件请一定推荐给我!!!最好附带使用说明️
介绍
在开发一个社区页面的时候需要完成发帖、浏览帖子的能力。这里考虑接入markdown编辑器进行开发也符合大多数用户的习惯。
首先是编辑器的选择经过深思熟虑(随缘)后确定了为 ByteMd, 主要是平时用掘金看到它们也是这个编辑器。 安装很简单
npm install bytemd用起来更简单 import /assets/static/editor_index.css // 引入布局文件防止样式错乱// 可以去了解下每个插件的功能都是现有的不再赘述const plugins [gfm(), highlight(), breaks(), frontmatter(), footnotes(), gemoji(), mediumZoom()]Editorlocale{zhHans} // 选择语言value{content} // 内容区域plugins{plugins} //支持的插件onChange{(v) {setContent(v);}}// 自定义内容区域媒体文件的上传uploadImages{async (files): PromisePickImage, alt | title | url[] {console.log(files, files);const imageUrl await uploadImage(files[0]);return [{title: files.map((i) i.name).join(),url: imageUrl,},];}}/这样就很快的实现了一个markdown的编辑器。不出问题的话就要出问题了
要支持上传视频
挠头这个功能区没有上传视频的区域啊这咋搞呢去掘金上看看掘金是有的那肯定是可以有的。那么就看看如何在tools栏增加一个视频的icon
bytemd本身支持对tools bar做扩展这样就简单了很多。可以拉下来源码看一下新增一个tool的代码也很简单export default function videoPlugin(saveEditorContext: (editorContext: BytemdEditorContext) void) {const ADD_VIDEO url // 视频tool的展示iconconst handleUploadVideo () {window.dispatchEvent(showUploadAVDialog) // 点击时的事件处理这里也是发通知给别处去处理了}return {actions: [{title: 视频,icon: img src${ADD_VIDEO} alt{logo} stylewidth: 24px; height: 24px;/,handler: {type: action,click(context: BytemdEditorContext) {handleUploadVideo()saveEditorContext(context)},},},]}}然后 把这个** videoPlugin** 加到前面的plugins列表里面 这样就有了一个上传视频的icon点击后需要你来实现一下打开文件选择器 - 选择视频 - 上传到服务器 - 处理上传后的链接 这套逻辑不一定是这样得看具体的业务流程
当然这肯定还没完上传之后需要像图片一样在编辑区把视频展示出来吧。 一开始想得很简单直接用一个\iframe或者 \video 标签把视频播出了不就好了。but这肯定是行不通的为了防止XSS这些特殊的标签都是不允许直接在输入框内进行使用的。掘金不太一样它只能插入它们指定播放源的视频也就是说要保证视频源的可靠才能插入。 我们业务暂时不需要考虑都是自己人也不会干这种事。于是参考了其他一些网站的实现直接将视频内容展示为一个视频播放的缩略图。对就是下面的 – \n – const handleUploadSuccess (url: string, file: File) {if (editorContext) {// 创建一个视频播放器的 HTML 代码const videoHtml \n;const {line, ch} editorContext.editor.getCursor();editorContext.editor.replaceRange(videoHtml, {line, ch});setContent(editorContext.editor.getValue());} else {message.error(上传失败请重试)}};在视频上传完成后我们在插入视频的文本光标后面 主动添加视频的缩略图展示。
要注意一点这里用到的 editorContext 是前面 videoPlugin组件中获取的需要在用的组件内保存一下。
细心的你肯定会问这里的url是视频的URL用图片的语法展示会裂吧 确实会有这个问题于是我们还需要对整个编辑区的内容做一个处理把展示的内容里面 视频的url替换成统一的视频缩略图注意只是展示位置的图片被替换了实际上保存的还是视频的URL哈
于是我们再实现一个转换内容的插件前提是基于你已经了解了 bytemd的 这几个接口的含义和调用时机我不是来讲原理的所以就不细嗦了。 export default function videoEmbedPlugin() {const DEFALUT_VIDEO_URL http://cdn.qboost.woa.com/files/community_article_pic/%E8%A7%86%E9%A2%91%20%281%29_1716435376866.pngreturn {// ts-ignoreremark: (processor) // ts-ignoreprocessor.use(() (tree) {visit(tree, image, (node) {if (node.alt AVFile) {// 替换图片 URLnode.url DEFALUT_VIDEO_URL;}});}),};}OK编辑区支持上传视频的能力也算是大功告成了。不过查看markdown文章的展示区也还需要适配毕竟它是不可能自动播放你添加上去的视频的。
查看视频
对于展示区的处理会简单很多因为我们在上传视频的时候对视频的url做了特殊处理也就是在前面添加了[AVFile], 那么我们就可以在布局完成后通过遍历展示区的html结点找到 AVFile的img标签然后将html中的这部分标签替换为 video标签就可以播放视频了
// 替换为video标签
export function handlePicToVideo() {const markdownBodyElement document.querySelector(.markdown-body);if (markdownBodyElement) {// 查找所有的 pimg 元素const images markdownBodyElement.querySelectorAll(img.medium-zoom-image[altAVFile]);images.forEach((img) {const videoUrl img.getAttribute(src);// 创建 video 元素const videoElement document.createElement(video);videoElement.setAttribute(controls, controls);videoElement.setAttribute(width, auto);const sourceElement document.createElement(source);sourceElement.setAttribute(src, videoUrl!);sourceElement.setAttribute(type, video/mp4);videoElement.appendChild(sourceElement);const noSupportText document.createTextNode(Sorry, your browser doesnt support embedded videos.);videoElement.appendChild(noSupportText);// 替换 img 元素为 video 元素const parentParagraph img.parentElement;if (parentParagraph) {parentParagraph.replaceChild(videoElement, img);}});}
}
