将summernote与vuejs一起使用

Posted 2023-02-22

【中文标题】将summernote与vuejs一起使用

【英文标题】：Use summernote with vuejs

【发布时间】：2017-01-28 13:19:12

【问题描述】：

我尝试使用下一个功能创建待办事项列表：

可分类项目 每个项目中的所见即所得编辑器 项目编辑器中的每个更改都存储在 todos 模型中

我做了1和2，但不能做3。我只能更改tasks数组中第一个任务的标题

这是我的代码

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的每个项目中编辑和保存内容？这是工作example

【问题讨论】：

vm.tasks[0].title = contents; 这就是您要保存的内容，对吧？你需要当前的任务。

是的，我想动态获取索引而不是 [0]。我不能得到那个索引

我认为你需要一个组件。看github.com/Haixing-Hu/vue-html-editor

感谢您的链接我尝试在我的待办事项列表中使用此组件并提供反馈

您提到的library 看起来已被废弃，因为它仅适用于 vue-1。它不仅在描述中指定，而且我还查看了源代码，在此我确认它不适用于 Vue 2

【参考方案1】：

我认为首选的方法是构建一个组件（或使用an existing one），该组件将具有道具等。但是，事实证明，指令内部有一个this的内部属性，您可以使用：_scope。它在terminal directive example 中有记录（嗯，至少提到过）。

你的绑定函数变成：

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;
      
    
  );

【讨论】：

感谢您的帮助。我将example 更改为显示任务标题onInit Summernote 回调

将 vue 连接到 Summernote 的库看起来已被废弃，因为它仅适用于 vue-1。它不仅在描述中指定，而且我还查看了源代码，在此我确认它不适用于 Vue 2

github.com/cho0o0/vuejs2-summernote-component 可能有用