Develop Reference

Iframes and Deprecated methods in javascript

I am building a classic post related cms on LAMP stack, as a project to show at future interviews and land a job potentially. I want to build a rich text editor. After some research both in r/javascript and stack overflow I drew some conclusions.
Don't use "contentEditable=true" flag because according to one of
CKEditor's devs https://stackoverflow.com/a/11479435/10245890 is not optimal
The general consensus is to use iframe because of the isolation it
provides.
Yes I know I will not build the next CKEditor on my own, it takes
years of far more experienced people than me, I just want to learn
about the Javascript APIs.
Generally I want to use vanilla version of the languages in the
stack in order to get a better understanding of them.
The 'easy' way out to get a simple rich text editor going is to use execCommand but it is obselete. What I came up with goes like this:
function formatBold(){
var selection = document.getSelection().toString();
var originalString = document.getElementById("post-body-editor").innerHTML;
document.getElementById("post-body-editor").focus();
document.getElementById("post-body-editor").innerHTML = originalString.replace(selection, '<b>'+ selection +'</b>');
return;
}
document.addEventListener('keydown', function(event) {
if(event.ctrlKey && event.key === 'b'){
formatBold();
return;
}
return;
});
The function is called with a HTML button or key press. I saw in MDN that there is a method to implement insert Link, format a text with bold etc. Question is. I see some, if not many ,methods flagged as deprecated but they seem to be working. Should I use them or make it work on my own as shown above? I realize its not the most elegant solution but I believe it works fine for my level. Also any articles or other reading material is appreciated ofc.
EDIT:Formatting

If the question is just about using deprecated/obsolete features, the answer is: don't use. Though, I doubt execCommand would never really be removed from the browsers, that would break tons of existing pages ... If you really want to create a WYSIWYG editor, you've to dive deep in the world of DOM. In that world use of innerHTML is exceptional, you would work with Nodes and ShadowRoot etc.
Answered by Teemu in comment above.

jQuery(document).on("keydown",...) works, but not document.addEventListener("keydown",...)

I thought I should see how much I really need jQuery now. So I started by replacing
jQuery(document).on("keydown.", function(e){...})
with
document.addEventListener("keydown", function(e){...})
I believed that one was easy, but to my surprise the event was no longer fired. To investigate this a bit I entered the second version in the console. Now it worked. ;-)
That is a bit impractical, of course. I would prefer that I did not have to enter it in the console...
In the code the event listener is added right after some changes to the DOM, i e some additions. I guess the trouble might be related to this, but I have no idea what to do.
Any suggestions?
EDIT: Thanks everyone for the comments. In this particular case it would be good to get rid of jQuery (but otherwise it is no problem using jQuery of course).
I should have said that some DOM elements are added long after the page is loaded so window.onload etc is not useful here.
I should maybe also have said that I am testing this in the latest version of Chrome and for this I am not interested in backward compatibility (it is too complicated anyway in this case so I have just dropped that... ;-) ).
UPDATE: Someone asked for code. Here is an example I just tested:
document.addEventListener("keydown.test", function(e){
console.log("doc.addEL test keydown, e=", e)
});
Looking in Chrome Dev Tools at the properties of the HTML element I can see the event listener there (with the code above). It is just not fired. Seems like it is just time to write yet another bug report then. ;-)

My bad. I misread the news that event handlers now can be removed using standard syntax. They can, but the syntax is that you give the event+handler function to removeEventListener.
The syntax I used above for the event, "keydown.test", is not a valid syntax (if you are not using jQuery).
Sorry for wasting your time. Hope someone can use the answer.

How to Click on link which has Javascript using Watir

I am new to Watir and have a scenario which is a blocker for me. I have to click on the below link. It is shown as a link. It is any normal forgot passord?? click here .... option which is there in the application which I am testing. Please advice how to click on this link. I have tried the below mentioned x paths as well but no luck.
<a href="javascript:forgot_password()">
x paths used with no luck :
1> ie.link(:xpath, "//img[#onclick='javascript:forgot_password()']").click
2> ie.link(:xpath,"//a[#href='javascript:forgot_password()']/").text # => "Click Here) "
3> ie.element_by_xpath("//link[contains(#href , 'javascript:forgot_password()')]/").click

Did you try this?
browser.link(:href => "javascript:forgot_password()").click

First check if xpath works on your system: appart form watir gem you have to have installed REXML with version greater than 3.1.6.
And i don't know what could be wrong with your code because I don't know which page you are accessing, if you can, please give us the link. Personally I would do something like this, but there may be lots of alternatives.
ie.link(:xpath, "//a[contains(#href='javascript:forgot_password')]/").click

Your xpath selectors look quite confused looking at them.
Line one
ie.link(:xpath, "//img[#onclick='javascript:forgot_password()']").click
intends to find a link, but looks for an image. Would that ever work?
Try using
ie.link(:xpath, "//a[#onclick='javascript:forgot_password()']").click
or
ie.link(:xpath, "//a[#onclick='javascript:forgot_password()']").fire_event('onclick')
It's potentially just not triggering the onClick event when using .click on an element. I can't remember whether it does or not.
Without seeing the page, I can't really be certain, but you might not need to be using xpath to find this element at all.
If the text is "Click here" you could use that as the locator instead.
ie.link(:text => "Click here").click
... or the equivalent .fire_event('onclick')
It's incredibly tough to diagnose the problem without seeing the html in question, and accurate Watir being run against it (i.e. copied and pasted directly from your file), so these suggestions are pretty much shots in the dark.

nicEdit does not detect the 'space' character

i'm having a problem with the nicEdit script. nicEdit is a javascript libray to set the html textareas of a webpage into Rich Text Format fields.
It works fine except that does not detect when i type the 'space' character. I google'd this and I didn't find any clue. I do exactly what is suposed to do to call the js function:
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas({maxHeight:75}) });
</script>
Is someone having the same or similar problem, or know how to fix this?
edit: I tested it in Google-Chrome and Internet Explorer and the error persists in both.
Thank you very much for your time! :)

I had this same problem, and solved it as follows:
Problem: 'space' wasn't registering in nicEdit fields
Track-down: The actual problem was that a jquery ui feature (accordion in this case) had registered the 'keydown' event for the editors parent. This prevents the 'keypress' event from propagating to the editors registered 'keypress' event handler. I didn't dig deep enough to know why it was only the 'space' key that was failing to propagate.
Solution: I removed the 'keydown' event from the editors parent. in my case that required the following snippet:
$(".accBar,.accContent").unbind('keydown');
I hope this is helpful to someone.

Not solved but guessed the cause of the problem:
I made a simple html document only with a textarea and the javascript invocation of the question and worked fine.
So obviously was not a configuration problem, was some kind of conflict with other javascript libraries i'm using (JQuery and jstree). That is the reason i found nothing on google about it >_<.
My solution was change the nicEdit to jWYSIWYG, a jquery based RTF, and all works fine now.

Are you using a CSS reset? That was my problem - baseline.reset sets some things, particularly revolving around "white-space: normal" that messed up rich text editors. Primarily on windows only, even - so Firefox on mac will work fine, but Firefox on Windows will not be able to make space characters.

The issue was most likely the jsTree hotkey plugin was intercepting spaces and calling "preventDefault". See the issue here:
https://github.com/vakata/jstree/issues/363
Removing the hotkey plugin or commenting out the space hotkey from jsTree should solve the problem.

firefox plugin inorder to get the data from textbox

my problem is that, i what to develop a firefox plugin that extract data from the textbox and it has to be stored in some temporary memory.
i didn't have any idea about plugin's So please give the solution in a detailed manner
thank u.......!

Try reading the extension documentation, and then asking specific questions about things you still don't understand. It sounds like you are asking someone to write the whole extension for you, which isn't really the purpose of SO.
You could also look for open-source extensions that interact with text fields (like one of the ones that allows editing a text field in an external editor) and see how they work.

Have you seen the "It's all text" plugin? It allows you to edit a textarea in your editor of choice. After saving, the textarea is updated. I'm sure there's some code in that plugin that you could use.
Also, what you're describing sounds really simple. Are you sure a plugin is the right solution? Maybe a Greasemonkey script would be easier.