f-loat / vue-simplemde

📝 Vue SimpleMDE - use simplemde with vue.js

Vue-SimpleMDE

Markdown Editor component for Vue.js. Support only vue2.x.

Use Setup

No longer support Vue1.x, you can modify to use

Install

npm install vue-simplemde --save

Use

• Internal reference in a single component

<template>
  <vue-simplemde v-model="content" ref="markdownEditor" />
</template>

<script>
  import VueSimplemde from 'vue-simplemde'

  export default {
    components: {
      VueSimplemde
    }
  }
</script>

<style>
  @import '~simplemde/dist/simplemde.min.css';
</style>

• Global reference

import Vue from 'vue'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'

Vue.component('vue-simplemde', VueSimplemde)

Props

property	type	default	describe
value	String	None	Initial value, v-model binding can be used
name	String	None	The name of the control.
preview-class	String	None	Custom preview style class
autoinit	Boolean	true	Automatic initialization
forceSync	Boolean	true	Sync value to simplemde each time
highlight	Boolean	false	Is it open to highlight
sanitize	Boolean	false	HTML that does not render input after opening
configs	Object	{}	SimpleMDE's config
previewRender	Function	-	configs.previewRender

Events

event	describe	arguments
input	Triggered when the Input value changes	value
blur	Triggered when the Input loses focus	value
initialized	Triggered when initialization is complete	simplemde

Methods

this.$refs.markdownEditor.simplemde.togglePreview();

• examples/index.vue

• simplemde.js

Markdown style

e.g. use Github's markdown style

github-markdown-css

install

$ npm install --save github-markdown-css

use

<template>
  <vue-simplemde preview-class="markdown-body" />
</template>

<style>
  @import '~simplemde/dist/simplemde.min.css';
  @import '~github-markdown-css';
</style>

Highlight

install

$ npm install --save highlight.js

use

<template>
  <vue-simplemde :highlight="true" />
</template>

<script>
  import hljs from 'highlight.js';

  window.hljs = hljs;
</script>

<style>
  @import '~simplemde/dist/simplemde.min.css';
  @import '~highlight.js/styles/atom-one-dark.css';
  /* Highlight theme list: https://github.com/isagalaev/highlight.js/tree/master/src/styles */
</style>

Editor Theme (simplemde-theme-base)

e.g. use simplemde-theme-base theme

install

$ npm install --save simplemde-theme-base

use

<style>
  @import '~simplemde-theme-base/dist/simplemde-theme-base.min.css';
  /* no need import simplemde.min.css */
</style>

e.g.

Dark Theme

Configuration

SimpleMD's config

• 中文
• English

Examples

• Simple Example
• Nuxt Example
• Demo Page
• Demo Source

Dependencies

• SimpleMDE

Licence

vue-simplemde is open source and released under the MIT Licence.

Copyright (c) 2022 F-loat

vue-simplemde's Issues

require.ensure 網址問題

我要使用高亮的話，請求 highlight.js 網址會變成不是絕對的

ex:
threads/15/js/highlight.ccc81c3aad1bca262474.js

請問一下可以怎麼解決呢

markdown内容过长时，需要点击编辑器才会加载后续内容

页面初始化时，绑定v-model="content"，在created里通过ajax取到markdown内容，设置到content上，markdown内容过长时，编辑器只显示一屏的内容，下面是空白，往下滚动，需要点击一次编辑器才能加载全部内容。

prism.js让代码高亮

你好，怎么使用prism.js让代码高亮

Module parse failed: node_modules/simplemde/dist/simplemde.min.css Unexpected

Hi,
I started a vuejs project by :

vue init webpack-simple myproject

then
I installed vue-simplemde and set the following in my component

import { markdownEditor } from 'vue-simplemde'

export default {
  components: {
    markdownEditor
  }
}

But I got that error

ERROR in ./~/simplemde/dist/simplemde.min.css
Module parse failed: /home/foxmask/[...]/node_modules/simplemde/dist/simplemde.min.css Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
|  * @license MIT
|  */
[...]
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-simplemde/markdown-editor.vue 52:8-51
 @ ./~/vue-simplemde/markdown-editor.vue
 @ ./~/vue-simplemde/index.js
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/TakeNote.vue
 @ ./src/components/TakeNote.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8002 webpack/hot/dev-server ./src/main.js

If I start a vuejs project by

vue init webpack myproject

everything is ok

But I need to start with webpack-simple which is lighter for my own needs.

Can you tell me what I need to set in webpack.config.js ?

error build with vue-cli [webpack]

when i build with vue-cli error this :
ERROR in static/js/vendor.48ded05f3a2124ff9079.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [./~/vue-simplemde/index.js:10,0]

old index.js
const markdownEditor = require('./markdown-editor') const VueSimplemde = { markdownEditor, install (Vue) { Vue.component('markdown-editor', markdownEditor) } } module.exports = VueSimplemde

to new
const markdownEditor = require('./markdown-editor') const VueSimplemde = { markdownEditor:markdownEditor, install:function(Vue) { Vue.component('markdown-editor', markdownEditor) } } module.exports = VueSimplemde
this work for my build

How do i get hml only from the model for me to save in database

能否支持上传图片功能？

能否支持上传图片功能？

如何去除粉红色背景

如何去除粉红色背景

内容无法初始化

• It's been tested on simplemde's website, and there's no problem.
  你好我在使用的时候，想初始化编辑器中的内容，因为我绑定的是content，我就把content置为null，但是此时编辑器中还是有内容，并且我将localstorage也清楚了，你们在置空一般怎么使用

为什么我table打不出来？

Column 1	Column 2	Column 3
John	Doe	Male
Mary	Smith	Female

这样输出的不是table..

Editor value does not show until click into?

When I click to the edit button. The MakrdownEditor value changed to the right value, but not show on the editor. The text only show when I click into the editor form. How can I fix that?

Note: I had do configs set autofocus: true but nothing happened

Thank you,

IE11 editor not working

[Vue warn]: Error in mounted hook: "TypeError: Object doesn't support property or method 'assign'"

Is it possible to transpile your code so that object.assign is not in your code?

为什么光标默认居中，我想总是居左怎么办

为什么光标默认居中，我想总是居左怎么办

simplemde.min.css is not find ??

<style> @import '~simplemde/dist/simplemde.min.css'; </style>

[问题]如果我想要监听预览按钮的点击事件怎样监听呢？

如图

我查看了这个地址(https://codemirror.net/doc/manual.html#events)，英文有点差，好像没发现有说怎么设置的

Vuejs 2.5.2 warning

• It's been tested on simplemde's website, and there's no problem.

Hello,

After upgrading to vuejs 2.5.x, I'm getting the following warning:

WARNING in ./node_modules/Marked/lib/marked.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/nicolaswidart/Sites/Projects/grimdawn.trade/node_modules/Marked/lib/marked.js
    Used by 1 module(s), i. e.
    /Users/nicolaswidart/Sites/Projects/grimdawn.trade/node_modules/vue-simplemde/dist/vue-simplemde.min.js
* /Users/nicolaswidart/Sites/Projects/grimdawn.trade/node_modules/marked/lib/marked.js
    Used by 1 module(s), i. e.
    /Users/nicolaswidart/Sites/Projects/grimdawn.trade/node_modules/SimpleMDE/src/js/simplemde.js
 @ ./node_modules/Marked/lib/marked.js
 @ ./node_modules/vue-simplemde/dist/vue-simplemde.min.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss ./resources/assets/sass/front.scss

is not working in vue 2

hello , nice code .
I tried to install in vue 2 . but it is giving this error when I import vue-simplemde .

how to disable html in editor?

how to deny html inside editor?
smth like <a href="#">link</a> should stay <a href="#">link</a>, not link
thanks

this is used in vue 1.0 or vue 2.0 ?

this is used in vue 1.0 or vue 2.0 ?

请问输入光标是如何渲染的

如果可以能给我看看源码吗 最近也在写富文本编辑器这个问题一直没法解决

bug with IOS

Hello, I use this components for my project VUEJS 1.0

I import it in the main.js

it works in Safari, chome and so on, but it doesn't work in IOS (Safari, chrome). all browsers not work with the import of vue-simplemde, could you please have a look at it?

I think that it is very ease to reproducible, thank you by advance,

Best regards

输出的markdown，换行没有保持。

场景：把编辑完成的markdown文件的content保存到服务端，但是换行的信息并没有保存下来
handleOutputMARKDOWN() { this.type = 'markdown'; this.output = this.content; }
保存以上的content到服务端，下次请求回来继续编辑的时候还需要再次，自己手动换行。

如何将vue-simplemde内容保存到数据库后，再次从数据库取出内容，再次编辑？

现在我已经把vue-simplemde内容保存为html格式并保存到数据库中，但当我从数据库获取的时候展示的有html标签，这个怎么处理？

编辑器的高度无法设置

如下，我想讲编辑器的高度设置撑满屏幕，但是从就是撑不满

.markdown-editor{
        height: 100%;
        background: gray;
        .editor-toolbar{
            height: 100px;
        }
    }

代码无法高亮，预览也没有解析

thank you for this

How to directly edit the content so I can add a markdown element?

I'm trying to build a custom toolbar icon, when clicked injects a image link where the cursor is currently present. How can I directly append to markdown content?

I tried emitting events and but the parent doesn't catch it. Seeking advice on how I could do something similar.

缺少newlineAndIndentContinueMarkdownList方法，事实上在

浏览器console报错：
TypeError: Cannot set property 'newlineAndIndentContinueMarkdownList' of undefined

事实上，文件（E:\TestProject\js\vue\struct\vue-manage-system\node_modules\simplemde\src\js\codemirror\tablist.js）中不存在newlineAndIndentContinueMarkdownList方法，还有一点尽管我搬运，但也无济于事。

源码如下：
/**************************************************************************************************/

<template>
  <div class="markdown-editor">
    <textarea></textarea>
  </div>
</template>

<script>
import SimpleMDE from 'simplemde';

export default {
  name: 'markdown-editor',
  props: {
    value: String,
    previewClass: String,
    customTheme: {
      type: Boolean,
      default() {
        return false;
      },
    },
    configs: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  ready() {
    this.initialize();
    this.syncValue();
  },
  mounted() {
    this.initialize();
  },
  methods: {
    initialize() {
      let configs = {};
      Object.assign(configs, this.configs);
      configs.element = configs.element || this.$el.firstElementChild;
      configs.initialValue = configs.initialValue || this.value;

      // 实例化编辑器
      this.simplemde = new SimpleMDE(configs);

      // 判断是否开启代码高亮
      if (configs.renderingConfig && configs.renderingConfig.codeSyntaxHighlighting) {
        require.ensure([], () => {
          const theme = configs.renderingConfig.highlightingTheme || 'default';
          window.hljs = require('highlight.js');
          require(`highlight.js/styles/${theme}.css`);
        }, 'highlight');
      }

      // 判断是否引入样式文件
      if (!this.customTheme) {
        require('simplemde/dist/simplemde.min.css');
      }

      // 添加自定义 previewClass
      const className = this.previewClass || '';
      this.addPreviewClass(className);

      // 绑定事件
      this.bindingEvents();
    },
    bindingEvents() {
      this.simplemde.codemirror.on('change', () => {
        this.$emit('input', this.simplemde.value());
      });
    },
    addPreviewClass(className) {
      const wrapper = this.simplemde.codemirror.getWrapperElement();
      const preview = document.createElement('div');
      wrapper.nextSibling.className += ` ${className}`;
      preview.className = `editor-preview ${className}`;
      wrapper.appendChild(preview);
    },
    syncValue() {
      this.simplemde.codemirror.on('change', () => {
        this.value = this.simplemde.value();
      });
    },
  },
  destroyed() {
    this.simplemde = null;
  },
  watch: {
    value(val) {
      if (val === this.simplemde.value()) return;
      this.simplemde.value(val);
    },
  },
};
</script>

<style>
.markdown-editor .markdown-body {
  padding: 0.5em
}

.markdown-editor .editor-preview-active, .markdown-editor .editor-preview-active-side {
  display: block;
}
</style>

only cli?

• It's been tested on simplemde's website, and there's no problem.

怎么渲染html字符串 ？ 把拼接的html字符串渲染到编辑器中

怎么渲染html字符串 ？ 因为文章是html结构的

markdown语法输出value值没有换行符‘\n’

• It's been tested on simplemde's website, and there's no problem.
  怎样得到markdown输出换行\n?
  html
  <markdown-editor v-model="mkediter" ref="markdownEditor" v-show="markdownEditor" :configs = "configs" preview-class="markdown-body " ></markdown-editor>
  js
  data: { mkediter: '', configs: {...} }
  得到的mkediter为字符串而换行只是空格，这再初始赋值时，修改文章时就把文章一行显示

how to disable some tags?

for example, I need to deny use links at all
[title](link) should be removed, or transform to only text like that title

can I do it with configs.blockStyles.link ?

not a bug ; just a thanks !

Thank you for this work !

中文输入法在IOS中无法使用

查了很多资料，说是因为codeMirror的问题，因为他会在用户编辑组词时就更新view，导致ios中输入中文不行，始终都是直接输入了英文。

不知道你有没有解决方案呀。网上有几个思路，一个是组词时的event事件，叫做CompositionEvent。但是好像还没有完美解决方案。

开这个issue，我想提醒下作者，这里有个无法避免的问题啊，在ios中。

如果无法解决，可否提供个方法，让我们可选择不使用codeMirror，而是选择其他方式显示编辑时的输入框？比如网上能查到，自动适应高度的texteare，对于ios中，够用了。或者其他，至少能够输入中文就好。

谢谢

Insert emojis?

How can i do it? with github markdown style, emojis are not working

不兼容IE

在IE10中报多个错误

在ios浏览器上的“惊喜”

老铁看图，上面的数字是在ios 九宫格输入法的情况下输出，
全键盘无法输入中文，文字是默认获取到焦点后，待选文字输入的

给的示例在console有错误提示

在对编辑内容进行鼠标拖动选择时，会触发一个bug，该bug导致拖动无法选择内容进行复制，console中报错如下：
Uncaught ReferenceError: selected_content is not defined
能进行一下修复吗

navigator is not defined

I used it in my nuxt project, I got an error about 'navigator is not defined',How should I support it vue SSR?thank you very much

自定义toolbar的时候无法设置方法

根据文档中想要自定义工具栏按钮的图标，文档中说的是

toolbar: [{
            name: 'bold',
            action: SimpleMDE.toggleBold,
            className: 'fa fa-bold',
            title: '加粗'
          }}

但是action中的SimpleMDE并不存在
直接用markdownEditor也没有对应的toggleBold方法

isPreviewActive为false的情况下动态设置value不显示内容

如图
正常图片
不显示内容图片

Error when using babel-loader

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-simplemde/src/markdown-editor.vue
Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level (55:8)

  53 |       if (this.highlight) {
  54 |         configs.renderingConfig.codeSyntaxHighlighting = true;
> 55 |         import('highlight.js').then((hljs) => {
     |         ^
  56 |           window.hljs = hljs;
  57 |         });
  58 |       }

开发者有需要的话我可以提供更多帮助

continuelist.js报错Cannot set property 'newlineAndIndentContinueMarkdownList' of undefined

hi,
使用的时候报这个错是什么原因？

continuelist.js?cae8:18 Uncaught TypeError: Cannot set property
'newlineAndIndentContinueMarkdownList' of undefined
at eval (eval at (build.js:1523), :18:60)
at listRE (eval at (build.js:1523), :6:5)
at eval (eval at (build.js:1523), :11:3)
at Object. (build.js:1523)
at webpack_require (build.js:687)
at fn (build.js:106)
at eval (eval at (build.js:1764), :4:1)
at Object. (build.js:1764)
at webpack_require (build.js:687)
at fn (build.js:106)

  CodeMirror.commands.newlineAndIndentContinueMarkdownList = function(cm) {

这个函数报错

Is it possible to only render?

And don't show the editor?
Or how can i render a text that i made with vue simplemde, i'm using github style too

Less a vue extensions

In the index.js sources, throw a error on use webpack

const markdownEditor = require('./markdown-editor');

I think this line code has no extensions

The is my error

ERROR in ./~/vue-simplemde/index.js
Module not found: Error: Can't resolve './markdown-editor' in 'D:\bakc\workspace\vue\self-blog\views\admin\node_modules\vue-simplemde'
 @ ./~/vue-simplemde/index.js 8:23-51
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/views/post.vue
 @ ./src/views/post.vue
 @ ./src/main.js

oh my vue version is 2

Image upload in Markdown system

Hey bro, this editor is extremely awesome, but I want to know how we can upload file from our pc, like browsing file and save it and then display in our ![] content.

Please guide me.

页面不能滚动

你好，
我在写一个 Vue + Vue-Router 的 SPA 项目，输入框使用的你写的这个插件，很好用，我很喜欢。在使用过程中发现两个小 bug 。

1. 在使用全屏对照编辑（side-by-side）的时候，编辑完成按 ESC 退出全屏，这个流程没有问题。
   问题是这样的，使用 side-by-side 后不按 ESC ，而是点击浏览器的返回按钮，再进入这个页面的时候回出现页面不能滚动的情况。再按 ESC 页面就又能滚动了。

2. 使用预览功能（preview），在文本框内可以预览 HTML 的效果，这里也没有问题。
   问题是这时候再点击全屏，不按 ESC 而点击浏览器返回按钮，再进入这个页面，会出现和上面一样的问题。

目前我的解决办法是在 hideIcons 中添加了 side-by-side、fullscreen 来隐藏掉这两个功能。

我想 把select，key 等关键字高亮 该在什么地方配置

• It's been tested on simplemde's website, and there's no problem.

怎么获取编辑器中的字数、行数、段落数

如图，

Build failed

Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib