code-farmer-i/vue-markdown-editor

A markdown editor built on Vue

vue-markdown-editor's Issues

如何在预览模式下显示文章导航目录

如何默认关闭预览

大佬，请问如何默认关闭预览呢？

---

图片上传按示例代码拿不到files

图片上传按示例代码拿不到files，怎么解决啊？

handleUploadImage(event, insertImage, files) {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      console.log(files)

      // 此处只做示例
      insertImage({
        url:
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
        desc: '七龙珠'
      })
    }

console.log(files)打印的是undefined

希望在预览模式下也有一个标题导航

类似于编辑模式的标题导航

typescript 下编译失败

如图。
理论上在 index.d.ts的倒数第二行前，加个 declare 应该就好了

内置的 codemirror 能不能支持 vim 模式

我想要用 vue-markdown-editor 写一个自己用的笔记软件， 其它还好，但是发现 codemirror 的配置对象不支持 vim 的 keymap . 好像是因为 Ediver.vue 中没有引入 'codemirror/keymap/vim.js' 导致的， 能不能更新一下。还有初始化编辑器的时候，没有默认全屏的配置项，能不能也一起加上呢，谢谢 ^_^

手机显示图片兼容性问题

在手机上图片渲染没有做到自适应，无法正常完成查看图片

本地上传的图片对象怎么获得？

请问有支持图片拖拽上传功能吗

作者弄得很好看哈哈

加粗样式未定义

使用 xxx 对应预览是 文字只是被strong包裹 为定义对应的加粗样式
这导致在使用了reset.css的页面中无法正常显示加粗效果

vue3版什么时候出~

Don't work codemirror-editor

Hi, thanks for the editor!
There was an error using codemirror editor, can you tell me how to solve it?

I am using example code from:
https://code-farmer-i.github.io/vue-markdown-editor/examples/codemirror-editor.html

Error text:

This dependency was not found:

* @kangc/v-md-editor/codemirror-editor in ./src/main.js

To install it, you can run: npm install --save @kangc/v-md-editor/codemirror-editor

有没有办法默认打开有左侧的大纲栏

现在只能点一下按钮才能打开大纲侧边栏

vue3 兼容

有没有vue3的开发计划啊？

版本 1.2.7 import '@kangc/v-md-editor/lib/style/editor.css'; 不存在

在文档：快速上手中

import '@kangc/v-md-editor/lib/style/editor.css';
上述资源不存在

null

想找一个设置文字颜色的功能，没找到

Vuepress主题引用php语言包报错

问题

其它语言包正常，安装php语言包时就报错了。是否是语言包的问题。新手，感谢回答。

浏览器控制台信息

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "text": "TypeError: Cannot read property 'tokenizePlaceholders' of undefined"

found in

---> <VMdPreview> at src/preview.vue
       <Scrollbar> at src/components/scrollbar/index.vue
         <VMdContainer> at src/components/container.vue
           <VMdEditor> at src/base-editor.vue
             <EditArticle> at src/components/mainbody_components/cms/edit_article.vue
               <Cms> at src/components/mainbody_components/cms/cms.vue
                 <Mainbody> at src/views/mainbody.vue
                   <App> at src/App.vue
                     <Root>

TypeError: Cannot read property 'tokenizePlaceholders' of undefined
    at eval (prism-php.js?f652:127)
    at Object.run (vuepress.js?02c6:1)
    at Object.highlight (vuepress.js?02c6:1)
    at highlight (vuepress.js?02c6:1)
    at Object.eval [as highlight] (vuepress.js?02c6:1)
    at a.fence (vuepress.js?02c6:1)
    at eval (vuepress.js?02c6:1)
    at eval (vuepress.js?02c6:1)
    at Object.md.renderer.rules.fence (lineNumbers.js?1f9e:7)
    at i.render (vuepress.js?02c6:1)

包版本

{
  "dependencies": {
    "@kangc/v-md-editor": "^1.4.2",
    "core-js": "^3.6.5",
    "markdown-it": "^11.0.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
  }
}

如何在预览模式下也生成文章目录

vue3.0 中报错啊

火狐:

Uncaught TypeError: d.a is undefined
    <anonymous> base-editor.js:1
    n base-editor.js:1
    <anonymous> base-editor.js:1
    <anonymous> base-editor.js:1
    <anonymous> base-editor.js:1
    <anonymous> base-editor.js:1
    node_modules chunk-vendors.js:10
    __webpack_require__ app.js:849
    fn app.js:151
    <anonymous> main.js:12
    js app.js:1009
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1022
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonymous> app.js:925
    <anonymous> app.js:928
base-editor.js:1
    <anonymous> base-editor.js:1
    n base-editor.js:1
    <anonymous> base-editor.js:1
    <anonymous> base-editor.js:1
    <anonymous> base-editor.js:1
    <anonymous> base-editor.js:1
    js chunk-vendors.js:10
    __webpack_require__ app.js:849
    fn app.js:151
    <anonymous> main.js:12
    js app.js:1009
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1022
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonymous> app.js:925
    <anonymous> app.js:928

谷歌:

Uncaught TypeError: Cannot read property 'config' of undefined
    at Module.eval (base-editor.js?ee2d:1)
    at n (base-editor.js?ee2d:1)
    at eval (base-editor.js?ee2d:1)
    at eval (base-editor.js?ee2d:1)
    at eval (base-editor.js?ee2d:1)
    at eval (base-editor.js?ee2d:1)
    at Object../node_modules/@kangc/v-md-editor/lib/base-editor.js (chunk-vendors.js:10)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.js:12)

vue3.0里面能用吗?

主题扩展包，单独引入 prism-php，会出现 Cannot read property 'tokenizePlaceholders' of undefined"，且无法切换到其他语言，代码块无法正常显示

👨🏻‍💻👩🏻‍💻欢迎加入 v-md-editor 交流群 🎉🎉🎉

QQ群：798884474

Preview enabled/disabled tooltip text is flipped

When the preview is shown/enabled, the tooltip says "Preview disabled"

希望能在鼠标hover到代码块能在右上角出现复制内容

希望能在鼠标hover到代码块能在右上角出现复制内容，然后点击就会复制当前代码块解析好的代码

不是很理解 model 的作用，没有出现效果，希望能够解答一下

mode
类型：String
默认值: editable
模式。可选值：edit(纯编辑模式) editable(编辑与预览模式) preview(纯预览模式)。

我的代码如下：

<v-md-editor v-model="contents" model="edit"/>

但实际却没有效果

希望加上图片文字环绕～不然图片都按编辑区域werth的100%显示，图片会太大，失真

如何关闭预览时点击图片查看图片的功能，目前手机端是会有问题

编辑区编辑到最下方回车的时候不会自动滚动到页尾

编辑区编辑到最下方回车的时候不会自动滚动到页尾

快捷复制代码

找了好久的基于vue的编辑器就这个比较满意，使用方便，文档详细。
感谢作者

---

快捷复制代码有问题
编辑组件点击
会在当前地址拼接参数?file
预览组件点击没有反应
所有都不能复制不上

import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor'
import '@kangc/v-md-editor/lib/style/codemirror-editor.css'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js' // 主题
VMdEditor.use(vuepressTheme)

import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index'
VMdEditor.use(createCopyCodePlugin())

---

有没有什么方法可以一次导入所有代码高亮的语言包

Mac下粘贴部分类型文件导致报错

目前发现svg、csv会导致报错

https://github.com/code-farmer-i/vue-markdown-editor/blob/dev/src/utils/file.js

// Modified from https://github.com/ElemeFE/element/blob/dev/packages/upload/src/upload-dragger.vue
export function filesFilter(files, config) {
  const { accept } = config;

  const filesKeys = Object.keys(files).filter((key) => {
    const file = files[key]; 
    const { type, name } = file; // 这边file是null，导致解构报错
    const extension = name.indexOf('.') > -1 ? `.${name.split('.').pop()}` : '';
    const baseType = type.replace(/\/.*$/, '');

    return accept
      .split(',')
      .map((type) => type.trim())
      .filter((type) => type)
      .some((acceptedType) => {
        if (/\..+$/.test(acceptedType)) {
          return extension === acceptedType;
        }

        if (/\/\*$/.test(acceptedType)) {
          return baseType === acceptedType.replace(/\/\*$/, '');
        }

        // eslint-disable-next-line no-useless-escape
        // eslint-disable-next-line no-useless-escape
        if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
          return type === acceptedType;
        }

        return false;
      });
  });

  return filesKeys.map((key) => files[key]);
}

export function getFilesFromClipboardData(clipboardData) {
  return Object.keys(clipboardData.items)
    .filter((key) => clipboardData.items[key].kind === 'file')
    .map((key) => clipboardData.items[key].getAsFile()); // 这里getAsFile()返回null，导致上面报错
}

啥时候支持SSR呢？

如题，
期待的搓小手手

之后会支持 plantuml 吗

之后会支持 plantuml 吗

vuepress 主题在手机端 显示问题

在手机端 ，图片无法正常， 点击预览图片，也出现不能正常不能 100% 充满

npm下载问题

都四天了
npm下载的还是1.4.7版本
最新版本还是下载不下来

English Version

This is awesome. Could you provide an English version of the documentation?

vue 3 中 工具栏按钮点击无效

在vue 3.0 vite 工具中使用 点击按钮无效，只能使用 键盘快捷键，

提几个小建议

• 1、编辑器现在看到的效果是全屏时 半编辑变预览，无 可全部预览（只显示预览页），无 可全部编辑（只显示编辑页），虽然是可以通过mode去动态控制，对体验来说还是有些问题
• 2、提示信息：提示信息中会存在这个提示、警告、注意的字体，希望能去掉
  
• 3、上传图片后无法点击图片单独预览，要是图片截屏大的情况下，那么就无法具体查看图片内容（重点）

Copy Code 快捷复制代码，代码可以复制到，但是总是会跳转刷新一次本页面

如题

希望加入标题序号

1. xxxxxxx
   1.1 xxxxxxxxxxxxx
   2 xxxxxxxxxxxx
   2.1 xxxxxxxxxxxxx

不支持全屏编辑吗？

如何关闭右侧预览模式

预览组件是否可以引入Katex

在VueMarkdownEditor 中可以使用use导入插件，但在VMdPreview 中没看到有引入Katex插件的方法

:grinning: 看起来效果很好，功能建议

😀 😀😀

您好

同步滚动建议。右侧滚动时，左侧的md没有同步滚动。看起来，左侧滚动后，右侧滚动稍微有些延迟。

希望新增全屏回调事件以及ctrl+s保存快捷键

能否有个按钮，可以切换预览窗口的开关

就是mavon-editor的那个“双栏”按钮

codemirror "change" 事件可以添加 debounce 函数，避免内容过多更新时造成的卡顿问题

简单看了下代码，学了很多东西，但是发现有个问题：

• https://github.com/code-farmer-i/vue-markdown-editor/blob/dev/src/codemirror-editor.vue#L93

这里需要加上防抖函数，避免内容过多更新时造成的卡顿问题。

主题和行号都没生效。。。

希望加个读取和编写 md 文件的功能

读取和编写项目内的md、网络上的md、用户本地的md

todo-list回车后生成的不是todolist格式

预览组件样式解析问题

1. 分割线会使上一行的字体加粗，如果加一行空行就不会，但是在预览组件上不解析空行 。

2. “-”手敲的无序列表在预览组件上不显示

有没有自动生成目录的功能

怎么在前端较好地显示拿到的html代码，高亮代码等

我在拿到了md编辑的代码片段后渲染到前端是这样的，样式很难看