从可以在 div 上调用的函数创建 js 对象

Question

我正在编写自己的 javascript 文本编辑器，并且我已经完成了所有功能。到目前为止，我已经用 HTML 中的按钮调用了不同的功能，以确保功能正常。

我现在要做的是只需要在 html 页面上创建一个 div，然后为该 div 调用我的编辑器。例如create new ambEditor("divId")（我知道这不是正确的 js/html，但我希望你明白）

初始化我的函数应该在它们周围创建一个 div，或者在其中创建一个 div，我不知道哪个最好，以及它们 div 顶部的按钮。他们给我的 ID 的 div div 应该用于输入和由连接到我创建的按钮的函数所做的更改。

我不知道从哪里开始，创建对象时哪种方法最好，从哪里开始等等。

正如我所说，按钮的功能已经完成，我只需要在我的 js 中创建它们等等，将它们放在正确的位置并将所有内容连接到用户指定的 div。

有人能帮帮我吗？

一些通用示例代码、最佳实践、从哪里开始、好的搜索词等等。

如果有人感兴趣，我现在如何调用/测试函数的一些代码：

<div id="editor" class = "editor" contenteditable="true" onpaste="fixPeskyDivs('editor')">Some text is here</div>

<button onclick="boldText()">Bold</button>
<button onclick="italicText()">Italic</button>
<button onclick="surroundElement('code','codePrint','editor')">New Code</button>
<button onclick="surroundElement('span','spanPrint','editor')">New Span</button>
<button onclick="saveContentTo('editor','display')">Save</button>
<button onclick="clearContent('editor')">Clear</button>
<button onclick="clearFormat('editor')">Clear Format</button>

没什么特别的:)

感谢您提供的任何帮助！

//安布罗斯

Answer 1

这是一个起点。为了能够初始化一个对象，您可以只拥有一个具有该名称的函数。任何函数都可以用 new 初始化，即

var myEditor = new ambEditor('divId');

您在函数内附加到 this 的任何内容都可以在之后调用，因此您可以执行以下操作：

myEditor.element // this will equal the element you passed in above via 'divId'

或

myEditor.boldText(); // calls the boldText function attached to the object via self

请参阅下面的代码以帮助澄清这一点：

function ambEditor(element) {
    // now self refers to the initialized ambEditor object (i.e. you can call things like
    // the above
    var self = this;

    // now if you initialize the ambEditor and pass in an element and it will be saved here
    self.element = $(element);

    // you can also attach functions to this object either anonymously or by name
    // now self.element will refer to the element passed in on initialize
    self.boldText = function() { console.log('making some text bold for ' + self.element); };

    self.init = function(){
        // attach your event handlers via javascript here. i'll use jquery cuz easier :)
        // self.boldText will still refer to your function above!
        $('#boldTextButton').on('click', self.boldText);
        // do this for all your events
    };
}

此外，您不应该使用内联 javascript 处理程序，而应该像我在上面使用 jQuery 或 addEventListeners 所做的那样。所以你需要一些方法来定位你的特定按钮，以便为它们添加一个类或一个 id。我会假装你的第一个按钮的 id 是"#boldTextButton"。

所以要附加所有的处理程序：

var myEditor = new ambEditor('divId');
myEditor.init();

这有意义吗？如果没有，再一次，只需做一个 jquery 插件。