We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Course Of The Month
4 days, 22 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Low level browser functions
Posted on 2012-12-23
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),
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
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
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
5-
4
10 Comments
did u check the tinyMCE examples page: http://www.tinymce.com/try
Active 6 days ago
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?
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&
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&
Active 6 days ago
Cd&,
Thanks for master link. There are definitely some interesting sections there I'll have to go through.
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.
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.
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&
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&
Active 6 days ago
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.
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.
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&
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&
Featured Post
Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page.
Reference your jQuery libraries: (CODE)
Include your new external js/jQuery file: (CODE)
Write your first lines of code to setup your site for jQuery.: (CODE)
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.
Suggested Courses
Course of the Month4 days, 22 hours left to enroll
688 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.