Question

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

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

初始化我的函数应该在它们周围创建一个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插件。

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

1 个答案: