div에서 호출 할 수있는 함수에서 js 객체 만들기

Question

자바 스크립트로 내 텍스트 편집기를 작성 중이며 이미 수행 한 모든 기능을 사용하고 있습니다. 지금까지는 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> 

아무것도 특별한 :)

감사합니다!

// Ambrose

Answer 1

여기가 출발점입니다. 개체를 초기화하려면 해당 이름의 함수 만 있으면됩니다.

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 

: 모든 기능은 나중에 호출 할 수 있습니다 그래서 당신은 같은 일을 할 수는 함수 내부 this에 새로운 부착 즉

var myEditor = new ambEditor('divId'); 

아무것도로 초기화 할 수 있습니다 이를 명확히하는 코드는 아래를 참조하십시오.

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

또한 인라인 자바 스크립트 핸들러를 사용하지 말고 jQuery 또는 addEventListeners를 사용하여 위와 같이 수행해야합니다. 따라서 특정 버튼을 타겟팅 할 수있는 방법이 필요하므로 클래스 또는 ID를 추가하십시오. 첫 번째 버튼의 신분은 "#boldTextButton"입니다.

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

이 메이크업 감각을 수행

그래서 그냥 할 모든 핸들러를 연결하려면? 그렇지 않다면 다시 한 번 jquery 플러그인을 작성하십시오.