md-editor-v3拓展工具栏失效的问题

因为最近在写一个项目，需要用到emoji表情，所以想着用md-editor-v3去拓展一下，官方其实也给了文档，但是恕我直言，官方文档没有一个完整的示例，全是片段，也没搜到关于拓展emoji的文章，导致我花了大量的时间解决bug。

在官方文档首页的展示里面有emoji，所以我根据他的地址到了github

进入EmojiExtension下的index.vue，里面提供了以下代码：

<template><dropdown-toolbar title="emoji" :visible="state.visible" @on-change="onChange"><template #overlay><div class="emoji-container"><ol class="emojis"><liv-for="(emoji, index) of emojis":key="`emoji-${index}`"@click="emojiHandler(emoji)"v-text="emoji"></li></ol></div></template><template #trigger><svg class="md-icon" aria-hidden="true"><use xlink:href="#icon-emoji"></use></svg></template></dropdown-toolbar>
</template><script lang="ts" setup>
import { reactive } from 'vue';
import type { PropType } from 'vue';
import { emojis } from './data';
const props = defineProps({editorId: {type: String as PropType<string>,default: ''}
});
const emit = defineEmits(['onChange']);
const state = reactive({visible: false
});
const emojiHandler = (emoji: string) => {// 获取输入框const textarea = document.querySelector(`#${props.editorId}-textarea`) as HTMLTextAreaElement;// 获取选中的内容const selection = window.getSelection()?.toString();// 获取鼠标位置const endPoint = textarea.selectionStart;// 根据鼠标位置分割旧文本// 前半部分const prefixStr = textarea.value.substring(0, endPoint);// 后半部分const suffixStr = textarea.value.substring(endPoint + (selection?.length || 0));emit('onChange', `${prefixStr}${emoji}${suffixStr}`);setTimeout(() => {textarea.setSelectionRange(endPoint, endPoint + 1);textarea.focus();}, 0);
};
const onChange = (visible: boolean) => {state.visible = visible;
};
</script><script lang="ts">
export default {name: 'EmojiExtension'
};
</script>

这份代码本身是没有问题的，但是不完整，使用时记得在index.vue的同级目录下复制data.ts，里面是emoji表情，可以自由替换。

有了这个代码还是用不了的，我们再去看文档，在DropdownToolbar的演示里，给出了这样一段代码：

<template><md-editor-v3 v-model="text"><template #defToolbars><dropdown-toolbartitle="emoji":visible="data.emojiVisible":on-change="emojiVisibleChanged"><template #overlay><div class="emoji-container"><ol class="emojis"><liv-for="(emoji, index) of emojis":key="`emoji-${index}`"@click="emojiHandler(emoji)"v-text="emoji"></li></ol></div></template><template #trigger><svg class="md-icon" aria-hidden="true"><use xlink:href="#icon-emoji"></use></svg></template></dropdown-toolbar></template></md-editor-v3>
</template>

再通过其他组件介绍，我们知道github里的dropdown-toolbar外面要套一层<template #defToolbars>，所以就成了这样：

<template><md-editor-v3 v-model="text"><template #defToolbars><dropdown-toolbartitle="emoji":visible="state.visible"@on-change="onChange"><template #overlay><div class="emoji-container"><ol class="emojis"><liv-for="(emoji, index) of emojis":key="`emoji-${index}`"@click="emojiHandler(emoji)"v-text="emoji"></li></ol></div></template><template #trigger><svg class="md-icon" aria-hidden="true"><use xlink:href="#icon-emoji"></use></svg></template></dropdown-toolbar></template></md-editor-v3>
</template>

但是还是没有效果，工具栏没有出现图标，因为这时候的代码还是不完整的，然后我就试了一下这个自定义扩展页脚，发现这个是有效的，然后我把自定义页脚的:footers="footers"给删了，发现就失效了，所以我们又知道在md-editor组件上要加上:toolbars="toolbars"

但是还是没用，工具栏还是没有emoji，我点开网页源码，发现dropdown-toolbar组件根本就没有被解析

这我才意识到我还没有引入dropdown-toolbar组件，但源码没有介绍怎么引入，所以我只好去源码里找，进入MdEditor我们可以看到MdEditor是有这个属性的

所以我们可以这么引入，当然还要注册

const DropdownToolbar = MdEditor.DropdownToolbar;

引入成功后可以看到还是没有出现，但这时候鼠标移上去已经有列表出现了：

但为什么是竖的？因为根本就没有给样式！！！！！！组件只给了一个html结构，但没有提供css，这个需要自己去写，看到这里我就已经放弃了，这玩意儿浪费了我太多时间，还要我自己去写css，而且搞到现在，js功能都还有bug，但我已经懒得去看了，改用v-md-editor去了，v-md-editor内置emoji

md-editor-v3拓展工具栏失效的问题相关推荐

1st Javascript Editor V3 8绝对完美破解版
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 1st ...
1st Javascript Editor V3.8绝对完美破解版
1st Javascript Editor V3.8绝对完美破解版(智能提示绝对好用) 感谢大Z(他的blog地址是:http://www.zhanggango84415.1047.vh.cnolni ...
富文本编辑器中空格转化为a_如何对富文本编辑器（FCK Html Editor）的工具栏进行扩展？...
我们在项目开发过程中,会经常使用到富文本编辑器.GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Htm ...
Unity Editor 编辑器拓展 11——SerializedProperty 和 SerializedObject 的使用
在自定Inspector面板的时候,经常会使用到SerializedProperty 和 SerializedObject.使用这两个类可以十分方便的进行数据的显示与处理.他们自带撤销记录.使用的Un ...
开源在线的MarkDown编辑器 --【Editor.md】
开源在线的MarkDown编辑器 --[Editor.md] 下载官网地址: https://pandao.github.io/editor.md/index.html Gitee 地址:https ...
【最简单的例子】Editor.md的初步使用
前言这个Demo的文件,我帮大家准备了.直接下载就可以了. 蓝奏云 : https://jww.lanzoui.com/iKV13p3qqwh csdn下载: https://download.cs ...
Typora等markdown笔记软件图片链接失效的问题解决办法，图片的相对路径、绝对路径的设置，图片上传到图床的方法
文章目录 -遇到的问题:Typora编辑MD文档,图片失效的问题解决 -解决的方法: 方法一:本地图片,使用相对路径,并将图片放在和md文件的同一目录下步骤1.Typora的图片根目录设置步骤2. ...
修正 010 Editor 模板文件 MachO.bt 的错误
使用 010 Editor 模板 MachO.bt 去分析 Mach-O 文件格式,提示一个错误 Hit an unknown or unsupported load command : [-2147 ...
uniapp 微信小程序 editor富文本编辑器 api 使用记录
文章目录 1.查看官方示例 2.关于富文本编辑器的工具栏 3.自己实践一下效果这里记录一下自己研究学习的结果之前一直使用textarea 来进行内容的编辑.但是局限性还是太多,最近发现了edit ...

md-editor-v3拓展工具栏失效的问题

md-editor-v3拓展工具栏失效的问题相关推荐

最新文章

热门文章