使用Vuejs和summernote编辑器

Question

我试图创建一个具有以下特点的待办事项清单:

1. 可排序项目
2. 每个项目都有所见即所得编辑器
3. 每个项目编辑器中的更改都存储在todos模型中

我已经完成了1和2，但无法实现第3步。我只能更改任务数组中第一个任务的标题。

这是我的代码：

app.js

Vue.directive('summernote', {
  bind: function() {
    this.editor = $(this.el).summernote({
      airMode: true,
      disableDragAndDrop: true,
      popover: {
        air: [
          ['style', ['bold', 'italic', 'underline', 'clear']]
        ]
      },
      callbacks: {
        onChange: function(contents, $editable) {
          vm.tasks[0].title = contents;
        }
      }
    });
  }
});

var vm = new Vue({
  el: '#todos',

  ready: function (value) {
    Sortable.create(this.$el.firstChild, {
      draggable: 'li',
      animation: 500,
      onUpdate: function(e) {
        var oldPosition = e.item.getAttribute('data-id');
        var newPosition = this.toArray().indexOf(oldPosition);
        vm.tasks.splice(newPosition, 0, vm.tasks.splice(oldPosition, 1)[0]);
      }
    });
  },

  data: {
    tasks: [
      { title: 'First task', done: true },
      { title: 'Second task', done: true },
      { title: 'Third task', done: false }
    ],
    newTask: '',
    editTask: null
  },

  methods: {
    addTask (e) {
      e.preventDefault();
      this.tasks.push({ title: this.newTask, done: false });
      this.newTask = '';
    },

    removeTask (index) {
      this.tasks.splice(index, 1);
    }
  }
})

index.html

    <div class="container">
    <div id="todos"><ul class="list-group">
        <li
            v-for="task in tasks"
            class="list-group-item"
            data-id="{{$index}}"
            >
          <span
                @click="task.done = !task.done"
                class="glyphicon glyphicon-ok"
                ></span>
                <div v-summernote>{{ task.title }}</div>
          <span @click="removeTask($index)" class="close">&times;</span>
        </li>
    </ul>

    <form @submit="addTask">
      <input v-model="newTask" class="form-control" type="text" placeholder="Add some task">
    </form>
    <div v-summernote></div>
    <pre>{{tasks | json}}</pre>
    <pre>{{editor}}</pre>
  </div>
</div>

我该如何编辑和保存每个项目Summernote的内容？这是一个可行的示例。

- Victor Borshchov

---

vm.tasks[0].title = contents; 这就是你正在保存的内容，对吗？你需要当前的任务。 - Roy J

是的，我想动态获取索引而不是[0]。我无法获取该索引。 - Victor Borshchov

我认为你需要一个组件。请查看 https://github.com/Haixing-Hu/vue-html-editor - Roy J

谢谢您提供的链接，我会尝试在我的待办事项列表中使用这个组件并反馈。 - Victor Borshchov

你提到的库看起来已经被放弃了，因为它仅适用于vue-1。这不仅在描述中有说明，而且我还查看了源代码，在此确认它不适用于Vue 2。 - Yevgeniy Afanasyev

Answer 1

我认为首选的方法是构建一个组件（或使用现有的组件），它将具有props等属性。然而，事实证明，在指令内部存在一个名为_scope的属性，您可以使用它：this。它在终端指令示例中得到了记录（至少提到过）。

您的绑定函数变成了：

bind: function() {
  const scope = this._scope;
  this.editor = $(this.el).summernote({
    airMode: true,
    disableDragAndDrop: true,
    popover: {
      air: [
        ['style', ['bold', 'italic', 'underline', 'clear']]
      ]
    },
    callbacks: {
      onChange: function(contents, $editable) {
        scope.task.title = contents;
      }
    }
  });
}

- Roy J

---

感谢您的帮助。我更改了我的示例，以显示任务标题“onInit”Summernote回调函数。 - Victor Borshchov

连接Vue和Summernote的库似乎已被放弃了，因为它只能与Vue-1一起使用。这不仅在说明中有明确说明，我也查看了源代码，所以我确认它在Vue 2上无法工作。 - Yevgeniy Afanasyev

这个链接 https://github.com/cho0o0/vuejs2-summernote-component 可能会有用。 - Paul Cezanne