f-loat / vue-simplemde Goto Github PK

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

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

在IE10中报多个错误

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

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

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

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 ?

这样输出的不是table..

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

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

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

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

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

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

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

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

谢谢

this is used in vue 1.0 or vue 2.0 ?

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

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

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

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

• 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

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) {

这个函数报错

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.

[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?

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

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

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

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

能否支持上传图片功能？

浏览器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>

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,

如图，

如何去除粉红色背景

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

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

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

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.

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

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

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

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

請問一下可以怎麼解決呢

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

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

如图

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

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

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 ?

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

Thank you for this work !

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 |       }

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

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

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

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

• 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为字符串而换行只是空格，这再初始赋值时，修改文章时就把文章一行显示

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

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