CODEWITHSUNDEEP
javascriptjqueryhtmlobject
Ambrose
Ambrose

Reputation: 163

Create js object from functions which can be called on a div

I am working on my own text editor in javascript and I have all the functions done already. Up until now I have called the different functions with buttons in HTML, to make sure that the functionality is ok.

What I want to do now is to only have to create a div on the html page and then invoke my editor for that div. eg create new ambEditor("divId") (I know this is not correct js/html, but you get the idea I hope)

Initializing my functions should create a div around theirs, or inside it, I dont know which is best, as well as the buttons on top of their div. The div div of the ID they give me is what should be used for the input and the changed made by my functions connected to the buttons I create.

I have no idea where to start, which approach is best when creating an object, where to start, etc. etc.

As I said, the functionality of the buttons are done, I just need to create them and so on in my js, put them in the correct place and connect everything to the div the user specifies.

Is anyone able to help me out?

Some general example code, best practises, where to start, good search words, and so on.

Some code of how I am now calling/testing the functions if anyone is interested:

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

Nothing special :)

Thanks for any help you can provide!

//Ambrose

Upvotes: 0

Views: 176

Answers (1)

Evan
Evan

Reputation: 6115

Here's a starting point. To be able to initialize an object, you can just have a function with that name. Any function can be initialized with new i.e.

var myEditor = new ambEditor('divId');

and anything you attach to this inside your function can be called afterwards so you can do things like:

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

or

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

See below code to help clarify this:

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

Also you should not use inline javascript handlers and instead do it like I'm doing above either with jQuery or addEventListeners. So you need some way to target your specific buttons so add a class or an id to them. I'll pretend your first button has an id of "#boldTextButton".

So to attach all the handlers just do:

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

Does this make sense? If not, once again, just do a jquery plugin.

Upvotes: 2

Related Questions