代码之家 › 专栏 › 技术社区 › darkiron

vuejs内容可编辑和回退问题

ecmascript-5 vuejs2 javascript

-1

darkiron · 技术社区 · 8 年前

Hy, 我尝试为vuejs创建标记编辑器,但我可以使用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>

谢谢你的帮助!

4 回复 | 直到 8 年前

1

0

Luca Giardina 8 年前

这样就行了

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

2

0

Alex Michailidis 8 年前

有两个问题,第一个是在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>

3

0

darkiron 8 年前

有第二个问题: 未在$emit input type事件上更新v模型

4

0

darkiron 8 年前

最后我使用了textarea:

https://github.com/darkiron/EasyMardownEditor 更让人兴奋;)