vuejs contenteditable 和 backline 问题

Question

嗨，我尝试为 vuejs 制作 markdown 编辑器，但我可以使用 backline (\n) 在我的组件的价值！怎么能做到这一点？

用于文本的干净格式，如堆栈或 github

<template>
  <div>
    <div contenteditable="true" class="editor" @input="send"> {{ value }}
   </div>
  </div>
</template>
<script>
  export default {
    props: ['value'],
    methods:{
      send (event) {
        console.log(this.content)
        if (event !== undefined) {
          console.log(event.target.innerHTML)
          this.$emit('input', event.target.innerHTML)
        }

        this.$emit('input', this.value )

      }
    }
  }
</script>

感谢您的帮助！

Answer 1

这样就可以了

<pre>{{ value }}</pre>

Answer 2

有 2 个问题，第一个在您的正则表达式中您需要转义反斜杠 \n 以便添加 <br>

我注意到的第二个是在你的 contenteditable div 你实际上不能写，因为光标总是在开头，我猜这是一个渲染问题（vue 在每次击键时渲染文本)

检查下面。

Vue.component('editor', {
  template: '<div class="editor" contenteditable="true" @input="send"> {{ inp }} </div>',
  props: ['value'],
  data: function() {
    return {
      inp: this.value
    }
  },
  methods: {
    send: function(event) {
      this.$emit('input', event.target.innerText)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    test: 'text with backline' + "\r\n" + 'here'
  },
  computed: {
    text: function() {
      return this.test.replace(/(\r|\n)/g, '<br/>')
    }
  }
})

.editor {
  width: 50%;
  height: 200px;
  display: block;
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <editor v-model="test"></editor>
  <div class="result" v-html="text"></div>
</div>

Answer 3

有第二个问题： v 模型未在 $emit 输入类型事件

上更新

Answer 4

最后我使用了 textarea :

https://github.com/darkiron/EasyMardownEditor 它更容易 ;)

vuejs contenteditable 和 backline 问题

vuejs contenteditable and backline issue

javascript

ecmascript-5

vuejs2