Question

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

用于清理格式化文本，如stack或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

有两个问题，你的regexp中第一个需要转义反斜杠\\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-model没有更新$ emit输入类型事件

Answer 4

最后我使用textarea：

https://github.com/darkiron/EasyMardownEditor 它更加狡猾;）

vuejs contenteditable和backline问题

4 个答案: