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

vuejs内容可编辑和回退问题

ecmascript-5 vuejs2 javascript

-1

darkiron · 技术社区 · 6 年前

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 回复 | 直到 6 年前

Luca Giardina 6 年前

这样就行了

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

Alex Michailidis 6 年前

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

darkiron 6 年前

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

darkiron 6 年前

最后我使用了textarea:

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

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

2 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前