Question

问题：

我正在尝试为我的博客创建一个模块化且可重复使用的所见即所得编辑器...不幸的是，我很难将它与多个文本字段一起使用。

工作原理：

编辑器在iframe上启用document.designMode = 'on'。

首先我初始化对象：

init: function(){
    this.cacheDOM();
    this.renderEditor();
    this.enableDesignMode();
    this.bindEvents();
},

然后缓存DOM

cacheDOM: function(){
    this.$editors = $('.editor-toolbar');
    this.$iframes = $('.editor-iframe');
},

然后我使用我的所有编辑器工具渲染工具栏

renderEditor: function(){
    var html = '<div class="text-editor">' +
        '<div class="btn-group">' +
            '<button class="e_bold      btn btn-sm btn-secondary" type="button"><i class="fa fa-bold"></i></button>' +
            '<button class="e_italic    btn btn-sm btn-secondary" type="button"><i class="fa fa-italic"></i></button>' +
            '<button class="e_underline btn btn-sm btn-secondary" type="button"><i class="fa fa-underline"></i></button>' +
        '</div>' +
        '<div class="btn-group">' +
            '<button class="e_align_left   btn btn-sm btn-secondary" type="button"><i class="fa fa-align-left"></i></button>' +
            '<button class="e_align-center btn btn-sm btn-secondary" type="button"><i class="fa fa-align-center"></i></button>' +
            '<button class="e_align-right  btn btn-sm btn-secondary" type="button"><i class="fa fa-align-right"></i></button>' +
        '</div>' +
        '<div class="btn-group">' +
            '<button class="e_header_2  btn btn-sm btn-secondary" type="button" value="h2">h2</button>' +
            '<button class="e_header_3  btn btn-sm btn-secondary" type="button" value="h3">h3</button>' +
            '<button class="e_header_4  btn btn-sm btn-secondary" type="button" value="h4">h4</button>' +
            '<button class="e_paragraph btn btn-sm btn-secondary" type="button" value="p">p</button>' +
        '</div>' +
        '<div class="btn-group">' +
            '<button class="e_unordered_list  btn btn-sm btn-secondary" type="button"><i class="fa fa-list-ul"></i></button>' +
            '<button class="e_ordered_list    btn btn-sm btn-secondary" type="button"><i class="fa fa-list-ol"></i></button>' +
            '<button class="e_table_separator btn btn-sm btn-secondary" type="button">1 | 2</button>' +
        '</div>' +
        '<div class="btn-group">' +
            '<button class="e_unordered_list  btn btn-sm btn-outline-success" type="button"><i class="fa fa-tag"></i></button>' +
            '<button class="e_ordered_list    btn btn-sm btn-outline-info" type="button"><i class="fa fa-tag"></i></button>' +
            '<button class="e_table_separator btn btn-sm btn-outline-secondary" type="button"><i class="fa fa-tag"></i></button>' +
        '</div>' +
    '</div>';
    this.$editors.html(html);
},

接下来我启用designMode。我想在页面上拥有尽可能多的单独编辑器，因此我遍历每个Iframe并在每个iframe上启用设计模式。

enableDesignMode: function(){

    for (i = 0; i < this.$iframes.length; i++) {
        this.$iframes[i].contentDocument.designMode = 'on';
    }
},

现在遇到了困难。我正在尝试将this.$editors[0]上的按钮上的点击事件绑定到this.$iframes[0]，以便每个工具栏都附加到正确的编辑器iframe。

bindEvents: function(){
    for (i = 0; i < this.$iframes.length; i++) {
        this.$editors[0].on('click', 'e_bold', function(){
            this.$iframes[i].contentDocument.execCommand('bold', false, null);
        });
    }
},

问题：

我收到此错误，我不明白为什么：

TypeError：this。$ editors [0] .on不是函数

this.$editors是一个类数组...所以.on函数应该适用于此。$ editors [i]？

这是小提琴：https://jsfiddle.net/7q30tuxo/1/

Answer 1

你错了，this.$editors是一个jQuery对象，而不是＃34;一组类＆＃34;。当您执行this.$editors[0]时，您将获得一个实际的HTML元素。

on是jQuery对象的函数，而不是DOM元素。用jQuery包裹你的this.$editors[n]：$(this.$editors[0])

编辑：正如凯文在下面的评论中所提到的那样，您并未选择多个元素供this.$editors使用，因此您无需解开它：this.$editors.on('click', function(){})

要清楚，即使您选择了多个元素，也通常不需要打开包装。只有当您需要以不同方式处理所选元素时，才需要将其解包。然而，这是一种气味，我建议重构您的选择器，以便他们只选择您打算操作的元素。

不能在类数组上使用`on`方法

1 个答案: