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

vuejs内容可编辑和回退问题

ecmascript-5 vuejs2 javascript

-1

darkiron · 技术社区 · 7 年前

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

Luca Giardina 7 年前

这样就行了

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

Alex Michailidis 7 年前

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

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

darkiron 7 年前

最后我使用了textarea:

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

推荐文章

Pepdbm 7 · 如何使用while循环将带有普通ECMAScript 5的数组转换为大写?

7 年前

Sam · ES5 Javascript封装的对象自动增量id

7 年前

Avery235 · Javascript“filter”+“reduce”与“reduce”+“if”[关闭]

7 年前

maiermic · ECMAScript与C/Java条件表达式的语法差异

7 年前

Magnus · ECMAScript 2017:“13.2创建函数对象”从何而来(来自ES5)?

7 年前

Joe Warner · 在严格模式下,不允许在ie11/Edge on元素中设置宽度-分配给只读属性

7 年前

Ravi Sevta · 投影JavaScript对象字段的最佳方法是什么?

7 年前

TKDev · 在许多站点上导致重定向到404的javascript函数

7 年前

darkiron · vuejs内容可编辑和回退问题

7 年前

Phillip YS · 如何对对象中特定键的所有值求和?

7 年前