I know virtually nothing about Javascript. By a monkey-see, monkey-do approach I’ve managed to successfully use Javascript within AppleScript/Safari to fill text fields on a web-site using the following command:
do JavaScript "document.getElementById('ElementID').value ='TextToEnter';" in document 1
I’ve been able to enter text into all fields except one. The fields that work are labeled as input type="text”. The field that doesn’t work is complex in that the entered text can be formatted (bold, italics, underline, alignment, etc.) after entry. Assuming I’ve identified the correct source code for this element it looks as follows PRIOR TO any text entry:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p><br data-mce-bogus="1"></p></body>
Depending on how its viewed, sometimes the p and br tags appear on separate lines but everything is otherwise identical.
After manual entry of text (“INSERT TEXT HERE”) directly into the web page's text field the source code becomes:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p>INSERT TEXT HERE</p></body>
The following did not work (wrapped in Applescript):
document.getElementById('tinymce').value ='INSERT TEXT HERE';
It produces the error: "missing value".
As per #WhiteHat, the following with n= 0-4 inserted text at several spots on the page but not in the targeted text field; n > 4 resulted in the "missing value" error:
document.getElementsByTagName('p')[n].innerHTML ='Insert text here';
I tried targeting the br tag but to no avail. How do I target this text field with Javascript? Note: I do not need to format the entered text.
You need to access the <p> element, which is just after the body of the document, as such...
document.getElementsByTagName('P')[0].innerHTML = 'your text'
The getElementsByTagName function returns an array of all elements with the tag name you provide, P in this case. You're looking for the first one, hence the [0].
The innerHTML property will allow you to set the contents of the <p> element.
Following is a good JavaScript reference...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
The following reference is for the web page, or Document Object Model (DOM).
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
And tinymce is a 3rd party JavaScript library which allows the rich edit functionality.
http://www.tinymce.com/
Based on the comments, the specific field you are looking for is named fax_text. Here is the source, it's in a textarea tag, take note on which function to use TagName vs. Name...
document.getElementsByName('fax_text')[0].value = 'This is my text!';
document.getElementsByTagName('textarea')[0].value =
document.getElementsByName('fax_text')[0].value +
'\nThis is additional text...';
<textarea rows="5" name="fax_text" cols="36" class="mytext"></textarea>
This text field is in an iFrame.
This iFrame contains an HTML document (<html><head><body>).
To get this document, you need the_iFrame.contentDocument.
do JavaScript "var ifr = document.getElementById('fax_text_ifr'); ifr.contentDocument.getElementsByTagName('p')[0].innerHTML = 'some text';" in document 1
Related
Context
I have a website where users can write articles. After creating the article, other users should be able to go in and highlight any text within the article and make a comment on it (similar to the system on Medium). I do this by saving the user's highlight to a database and then checking the highlight against the article when it loads. However, the author of the article can bold and italicize text, which ruins the system because the <strong> and <i> tags get in the way. For example, if a user's article consisted of the following content:
<p>This is my article. <strong>Bolded text here.</strong></p>
and another user wanted to come in and highlight my article. Bolded text, that text would be saved to the database. Then, I insert the highlight into the article (which is just applying a span to the highlighted text) by using this code to replace the article's HTML with the highlight:
let $text = $("#articleContents");
let textCurrent = $text.html().trim();
let textToHighlight = text.trim();
let ifTextExists = textCurrent.indexOf(textToHighlight) > -1;
if (ifTextExists) {
textCurrent = textCurrent.replace(textToHighlight, "<span class='highlights'>" + textToHighlight + "</span>");
$text.html(textCurrent);
}
So, because I'm checking the article's HTML to see if a highlight matches, when the user wants to highlight the string my article. Bolded text, the content it is checked against is article. <strong>Bolded text</strong>, so the text is not highlighted (the class is not applied) because the tags get in the way. With Medium's system, any string can be highlighted regardless of whether it is bolded or not.
Question
How can I alter my code to disregard the non-text nodes and highlight the whole string, whether it's wrapped in tags or not?
Things I Have Tried
I have tried using .text() instead of .html(); the problem with that is that the HTML tags are removed from the article, which I need to be able to keep the structure of the article (for example, removing the div tags means
moving the text to a new line by pressing enter doesn't work).
Use $text.text() instead of $text.html() so it ignores tags.
You don't need JQuery for that.
JavaScript solution: element.innerText
const elem = document.querySelector('.elementSelector')
elem.innerText;
JQuery solution: $(elem).text();
$('.elementSelector').text();
I have a website that has a form. In the form I have a textarea field. When this is filled and displayed in the manner below
eg . this is how it was written in the textarea box
The manager,
Abc limited,
private bag,
earth.
It displayed like this
The manager, Abc limited, private bag, earth.
how can I make it stay the way it was written
The only way I was able to recreate your error was by misspelling <textarea> as <text area>. When the space is added, the error occurs. When properly spelled line breaks are preserved.
You can use the innerText attribute of the element that will hold the textarea value.
Important: At the backend side, you have to preserve the \n in the Database or whatever it's being used to store the data to get it back and render the content exactly as was saved.
var div = document.querySelector('div');
var textarea = document.querySelector('textarea');
div.innerText = textarea.value;
textarea.addEventListener('input', function() {
div.innerText = this.value;
});
<h3>Enter text and press enter</h3>
<small>The entered text will appear automatically</small>
<p>
<textarea>
The manager,
Abc limited,
private bag,
earth.</textarea>
<div></div>
You will have to use \n for line breaks inside textarea
If you are using php, then you can echo echo nl2br($textarea);
https://www.w3schools.com/php/func_string_nl2br.asp
or for jquery
jQuery convert line breaks to br (nl2br equivalent)
Well you are not really giving us a lot to go on how you print the text field. But my guess is that if you use php you should wrap your variable in a nl2br() function.
Get more information here:
http://php.net/manual/en/function.nl2br.php
HTML ignores new lines/whitespace unless you style the element with white-space:pre like in this example
i need inside my CKEditor some boilerplate verbiage that is not editable, then the rest of the my string information. I concatenate the boilerplate verbiage [which is in a p tag], to a string variable that my CKEditor displays inside a certain div. By the time the verbiage, here:
<p id='abc' contentEditable='false'>verbiage</p>
... and the string information is displayed on the page, they are deep inside a number of nested tags - within a body with multiple classes. So both the verbiage, which is now in only a p tag with no attributes[they got stripped out], is nested way inside the original body tag [the first body tag, way up in the page] with lots and lots of divs, then finally comes an iframe, then ... the verbiage and string are like this:
<body contenteditable="true" class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" spellcheck="false">
<p>boilerplate verbiage</p>
...then the rest of the information is displayed in the editor, inside various spans, etc. i need to make the boilerplate verbiage readonly, contentEditable='false'. Yet everything I try both from the console in Chrome, and in code.... nothing changes that boilerplate verbiage tag. i have tried various things, including these - perhaps you can see where I need to tweak something; and i hope this will show you things i have tried and that i am run out of options so far:
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").first().contentEditable='false';
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").attr("readonly", "1");
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders p:first-child").contentEditable='false';
jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").find( "p" ).contentEditable='false';
jQuery("iframe", ".cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").contents().find("p").contentEditable='false';
jQuery("iframe", "body .cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders").contents().find("p").contentEditable='false';
var editor= jQuery("body", ".cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders");
editor.val(editor.val().replace(/<p>/gi, "<p class='tiny_p'>"))
var editor= jQuery("body.cke_editable.cke_editable_themed.cke_contents_ltr.cke_show_borders");
editor.val(editor.val().replace(/<p>/gi, "<p class='tiny_p'>"))
yet if i hard code in the Chrome browser, contenteditable="false",
it works perfectly. So, how can i access that p tag and assign it this attribute?
It really depends on moment and how you want to access, one option to access directly from separate script.
CKEDITOR.instances[YOUR_INSTANCE].window.$.document.getElementById("your_p_tag")
Note, that it should be done after CKEDITOR initilized
UPDATE:
CKEDITOR.instances[YOUR_INSTANCE].window.$.document.body.firstChild
Basically, I want style of selected text. Suppose, I have a full text "Hello world to sample application" placed in div. Then I made a word "Hello" in bold. I want to retrieve style of word "Hello" word and not of whole div.
There is one method "getCommandValue" method available but not working with Firefox.
"getComputedStyle" method gives style of the object and not of selected text in div.
<div id='mydiv'><span id='boldword'>Hello</span> world to sample application</div>
Then f.e. with jQuery:
$('#boldword').css('font-weight');
.css(attribute) gives you the current value for an attribute, .css(attribute, value) sets a news value for the given attribute.
I hope that's what you meant.
My site has user generated content. I noticed that if the user has quotes in some text and later I displayed that text in an HTML attribute, the layout would get screwed up in IE.
Hello
However, if I had generated the same anchor with Javascript (Prototype library), the layout would not be screwed up in IE:
$$('body').first().appendChild(
new Element(
'a', {
title: 'user "description" of link',
href: 'link.html'
}
).update('Hello')
);
Why is this so? The JS and the plain HTML versions both have the same intended result, but only the JS doesn't screw up IE. What's happening behind the scenes?
BTW, I do strip_tags() and clean XSS attacks from all user input, but I don't strip all HTML entities because I use a lot of form text input boxes to display back user generated text. Form elements literally display HTML entities, which looks ugly.
You need to escape all output that is user-specified (using entities). The DOM-methods do that automatically.
I don't know how you are processing the user generated content, but you could use a replace function to clean up the input something like string.replace("\"", "")
The answer to your question: 'Why is it so' is because in your JavaScript example set the title attribute with single quotes. So the double quotes in the user generated string are already escaped.
In you A tag example, single quotes around the text you use in the title attribute may be a way to solve the rendering problem.
However, Your HTML attributes should be in double quotes, so you would be better off using entities, as suggested by #elusive in his answer.