Solved

Low level browser functions

Posted on 2012-12-23
10
450 Views
Last Modified: 2012-12-25
I've been poking around the TinyMCE code and I notice that when you click a toolbar button, like the "B" for bold,  the first TinyMCE code entered is the defaultNativeHandler(evt), where the evt object includes the x and y of where you clicked and also, under "target" the outerHTML for the element that was at that location:
HTML at click point
This tells me that the browser itself handled the mouse click event and figured out itself what HTML was at that location, and then passed a nice evt object with all that information filled in to the TinyMCE code.  Could someone point me to some documentation on what services browsers provide at this low level or maybe provide an explanation?  I think I've heard that browsers will also perform bold and italic operations for upper code.

Thanks for any information.

Steve
0
Comment
Question by:steva
  • 5
  • 4
10 Comments
 
LVL 42

Expert Comment

by:sedgwick
ID: 38718296
did u check the tinyMCE examples page: http://www.tinymce.com/tryit/full.php
0
 

Author Comment

by:steva
ID: 38718611
Yes, I've been ll over their pages.    As far as I can see their documentation just talks about what their software does.  My question is, what low-level functions are they relying on from the browser?   What low level functions are available from a browser?  Apparently the browser will send you an event object when you click that shows the XY values at the point you clicked and the HTML that created the element you clicked.  And I think it will set selected text to bold or italics for you.  What else will it do, and where is all this documented?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 38718743
http://www.w3.org/html/wg/drafts/html/master/

Is the specification that requires all the technical specifications.  You probably want to look at the event model, the DOM/event interface specification and work through how event bubbling occurs.

For actual code to implement the specification, you can probably find mots of it either at sourceforge or the Mozilla developer site, because it is open source.  IE is only going to expose an abstracted level because MS uses proprietary code.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38718750
If TinyMCE is open source, there should be a document detailing the code for the API.

Cd&
0
 

Author Comment

by:steva
ID: 38718964
Cd&,
Thanks for master link.  There are definitely some interesting sections there I'll have to go through.

If TinyMCE is open source, there should be a document detailing the code for the API.

As far as the events go, there doesn't seem to be much of an API.  It looks like TinyMCE just registers a handler, somehow, and then the browser calls it with the event all wrapped up: the xy clicked, the outerHTML for the element at that location, etc., etc.  It's the browser behavior that I'm interested in.Just exactly what services does a browser provide at this low level.

As far as editing the page, I saw something in the master document you referenced about "contenteditable." I think this has to be set to enable the browser to edit the page.  But I didn't see much more.  A search of the master document for "bold" for example came up empty.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38719428
Some of what the browser has to do to support an editor is operating system dependent.  The actual primitives being executed are not exposed for security reasons.  To access the code the browser has to have privilege to private code.  It already has that access and the pipes necessary. To render, it must have access to the O/S primitives.  At the very lowest level, making something display bold is a matter of setting or clearing bits. The XY co-ordinates actually have to get translated to addresses in the graphic array and that then has to be converted to signals for the display device.

The browser is 4 layers of abstraction away from the actual machine/device level code that causes a change in the display. At the primitive level all the hardware understands are binary toggles. How a given effect is implemented is dependent on the interfaces between the layers, and in the end the code is specific to the chipset the device is using.  Without the abstracted layers there would be no real security, and you would have to code a different page for every browser/os/device combination you wanted to support.

Cd&
0
 

Author Comment

by:steva
ID: 38719736
I'm not interested in anything so low that it's OS dependent. My interest is what functions the generic browser exposes upward.  I was surprised when I saw the TinyMCE code getting click events  from the browser that not only specified the xy location of the click but also the HTML element at that location. So the HTML for a TinyMCE  image or button never has an  onclick=function() built into it, as normal HTML clickable elements have. The code just looks in the event object to see the element that was clicked and then jumps directly to the correct function for that element.  (Thinking more about it,  it was actually easy for the browser to know the element at the clicked xy since the browser put the element there  in the first place.)

 I'm looking for the kind of information I would need if I were writing my own rich text editor in JavaScript. What information will the browser give me about events, how do I register my handlers for those events, what can I ask the browser to do for me (change some selected text to bold, italic, etc. ), what else does it know how to do,  and how do I issue those commands to the browser.

This all must be documented somewhere.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38720103
The event model is documented in the W3C specs, but the  code to implement those specs is browser specific.  You would have to look at source code for the open source browsers, and see what sort of API support is available for closed browsers.

If you are going to try and duplicate the functionality of an RTE, you are embarking on a major project that will take perhaps as much as a year to support a range of browsers; with probably 5 or 6 weeks of research just to write the requirements and do a design.

If you are doing a scaled back RTE then the time required will reflect the amount of functionality you actually deliver.  If it is your intent to do this as a commercial product then you better have deep pockets because the marketing to get enough market share to show a profit will probably run run 7 figures.  It does not matter how good your pruduct is, the market is well established and the barriers to entry are formidable.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38720107
BTW, if you are not prepared to learn and understand the primitives that are the underpinning of the browser functionality, you will not be successful developing anything competitive.  You will just have a slow toy.

Cd&
0
 

Author Closing Comment

by:steva
ID: 38720702
Thanks for the discussion.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now