I have a code to wrap elements around text it works fine until i try the following format in my editor:
<u><strong>T</strong>es<strong>t</strong></u>
It automatic adds two empty strong elements before the underlined element and after like this:
<strong></strong>
<u><strong>T</strong>es<strong>t</strong></u>
<strong></strong>
Here's the code that i use and i have buttons that have actions like wrap('strong'):
function wrap(tagName)
{
var selection;
var elements = [];
var ranges = [];
var rangeCount = 0;
if (window.getSelection)
{
selection = window.getSelection();
if (selection.rangeCount)
{
rangeCount = selection.rangeCount;
for (var i=0; i<rangeCount; i++)
{
ranges[i] = selection.getRangeAt(i).cloneRange();
elements[i] = document.createElement(tagName);
elements[i].appendChild(ranges[i].extractContents());
ranges[i].insertNode(elements[i]);
ranges[i].selectNode(elements[i]);
}
selection.removeAllRanges();
for (var i=0; i<ranges.length; i++)
{
selection.addRange(ranges[i]);
}
}
}
}
WYSIWYG is hard. Especially with HTML, which is nothing what it looks like.
I'm just guessing here, but if you start with
<u>Test</u>
ant you select T in WYSIWYG then the actual selected code will probably be <u>T. Since you can't wrap that in strong (because <strong><u>T</strong> is not valid markup then the editor will wrap everything before the tag in strong and everything after tag in strong, which results in
<strong></strong>
<u><strong>T</strong>es<strong>t</strong></u>
<strong></strong>
that you are getting.
I to avoid that you could check if the text that you are wrapping has the lenght of 0, end then if so - not wrap it with anything.
I'd suggest using DOM manipulation to wrap text nodes within the selection individually. My Rangy library can help a little with this, providing splitBoundaries() and getNodes() extension methods to its Range objects.
Live demo: http://jsfiddle.net/5cdMn/
Code:
function isNodeInsideElementWithTagName(node, tagName) {
tagName = tagName.toLowerCase();
while (node) {
if (node.nodeType == 1 && node.tagName.toLowerCase() == tagName) {
return true;
}
node = node.parentNode;
}
return false;
}
function wrapSelection(tagName) {
var range, textNode, i, len, j, jLen, el;
var ranges = rangy.getSelection().getAllRanges();
for (i = 0, len = ranges.length; i < len; ++i) {
range = ranges[i];
range.splitBoundaries();
textNodes = range.getNodes([3]/* Array of node types to retrieve */);
for (j = 0, jLen = textNodes.length; j < jLen; ++j) {
textNode = textNodes[j];
if (!isNodeInsideElementWithTagName(textNode, tagName)) {
el = document.createElement(tagName);
textNode.parentNode.insertBefore(el, textNode);
el.appendChild(textNode);
}
}
}
}
Related
I am trying to write a script that will convert all characters to lowercase if a particular nested style is applied. I can't seem to figure out the correct syntax to get the text.
I originally tried the following, which worked to an extend, but lowercased the entire paragraph rather than only the text that has the character style applied:
function lowerCaseNest(myPStyle, myCStyle){
var myDocument = app.documents.item(0);
//Clear the find/change preferences.
app.findTextPreferences = NothingEnum.nothing;
app.changeTextPreferences = NothingEnum.nothing;
//Set the find options.
app.findChangeTextOptions.caseSensitive = false;
app.findChangeTextOptions.includeFootnotes = false;
app.findChangeTextOptions.includeHiddenLayers = false;
app.findChangeTextOptions.includeLockedLayersForFind = false;
app.findChangeTextOptions.includeLockedStoriesForFind = false;
app.findChangeTextOptions.includeMasterPages = false;
app.findChangeTextOptions.wholeWord = false;
app.findTextPreferences.appliedParagraphStyle = myPStyle;
var missingFind = app.activeDocument.findText();
var myDoc = app.documents[0];
for ( var listIndex = 0 ; listIndex < missingFind.length; listIndex++ ) {
for (i = missingFind[listIndex].nestedStyles.length-1;i>=0; i--) {
for (j = missingFind[listIndex].nestedStyles[i].parent.characters.length-1;j>=0; j--) {
if (missingFind[listIndex].nestedStyles[i].parent.characters[j].contents.appliedCharacterStyle(myCStyle)) {
var myString = missingFind[listIndex].nestedStyles[i].parent.characters[j].contents;
if (typeof(myString) == "string"){
var myNewString = myString.toLowerCase();
missingFind[listIndex].nestedStyles[i].parent.characters[j].contents = myNewString;
}
}
}
}
app.findTextPreferences = NothingEnum.nothing;
app.changeTextPreferences = NothingEnum.nothing;
}
I then tried playing around with appliedNestedStyles, but can't seem to figure out how to retrieve the text that the nested style is applied to.
Could anyone help with this?
Thanks!
John
Unless I am wrong the appliedNestedStyle can be looked after in the F/C dialog by targeting the applied characterStyle:
GREP
Find : .+
Format : character style => myCharStyle
then
var found = doc.findGrep();
…
I actually took a different tack, and figured out something that works:
function lowerCaseNest(myPStyle, myCStyle){
for (var i = 0; i < app.activeDocument.stories.length; i++){
for (var j = 0; j < app.activeDocument.stories[i].paragraphs.length; j++){
var myP = app.activeDocument.stories[i].paragraphs[j];
if (myP.appliedParagraphStyle.name==myPStyle) {
for (k=0; k<myP.characters.length; k++) {
if(typeof(myP.characters[k].appliedNestedStyles[0]) != 'undefined'){
if(myP.characters[k].appliedNestedStyles[0].name == myCStyle) {
var myC = myP.characters[k].contents;
if (typeof(myC)=='string'){
var myNewString = myC.toLowerCase();
myP.characters[k].contents = myNewString;
}
}
}
}
}
}
}
}
Still would be interested in knowing if there's an easier way to handle this, as I'm afraid this may take longer to run on long documents, since it's dealing with every paragraph individually.
How to get a HTML element by searching the content of innerHTML?
For example, Search
I want to get the "a" tag by searching word "Search" using javascript.
Thank you
var aTags = document.querySelectorAll('a');
var searchaTag = '';
for(i = 0; i<aTags.length; i++ ) {
if(aTags[i].text == 'Search') {
searchaTag = aTags[i];
break;
}
}
If you have no idea where the element can be, iterate over each element:
var all = document.querySelectorAll('*'); //OR document.getElementsByTagName("*")
for(var i = 0; i < all.length; i++ ) {
if(all[i].innerHTML === "search") {
console.log(all[i].tagName);
}
}
If you have some clue you can narrow your search by looking inside that area:
var all = document.querySelector('#my-Container').getElementsByTagName('*');
So I was able to find an specific table and I need to get no the text that's into the <b></b> of this table. Can't figure out how.
I'm using the following to test if I'm seeing my table correct:
var a = document.getElementsByTagName('table').length;
for (var i=0; i < a; i++)
{
b = document.getElementsByTagName("table")[i];
if (b.getAttribute("background") != null && b.getAttribute("background") == 'common/imgs/tabfade1.gif' ) { console.log(b.getAttribute("background")); }
}
result = true;
Any leads into how set my result as the text I need? Thanks in advance.
EDIT:
Image of the table.
Table Sample
document.querySelectorAll("table b")
Should give you a list of all <b> elements in all of the table elements.
Then you can peform your regular operations on them.
Well, in case someone else needs what I needed, here's what I've found as the solution:
var tables = document.getElementsByTagName('table');
var container = -1;
for (var i = 0; i < tables.length-1; i++) {
if (tables[i].background == "tabfade1.gif") {
container = i;
}
}
if (container > -1) {
result = tables[container].rows[0].cells[0].innerText.trim();
} else {
result = "";
}
I have a script to wrap html tags around the selection.
function wrap(tagName)
{
var selection;
var elements = [];
var ranges = [];
var rangeCount = 0;
if (window.getSelection)
{
selection = window.getSelection();
if (selection.rangeCount)
{
rangeCount = selection.rangeCount;
for (var i=0; i<rangeCount; i++)
{
ranges[i] = selection.getRangeAt(i).cloneRange();
elements[i] = document.createElement(tagName);
elements[i].appendChild(ranges[i].cloneContents());
ranges[i].deleteContents();
ranges[i].insertNode(elements[i]);
ranges[i].selectNode(elements[i]);
}
selection.removeAllRanges();
for (var i=0; i<ranges.length; i++)
{
selection.addRange(ranges[i]);
}
}
}
}
It works fine, but when I try to select the following text and wrap tags around the following code
<strong>W</strong>elcom<strong>e</strong>
The code changes to
<strong></strong><u><strong>W</strong>elcom<strong>e</strong></u><strong></strong>
instead of
<u><strong>W</strong>elcom<strong>e</strong></u>
I have inspected the code with firebug and it goes wrong at the function deleteContents(). The function deleteContents() leaves two empty nodes <strong></strong> so it doesn't delete the whole content. How does this happen?
I have this function which removes selected (cursor) highlighted elements:
function deleteSelection() {
if (window.getSelection) {
// Mozilla
var selection = window.getSelection();
if (selection.rangeCount > 0) {
window.getSelection().deleteFromDocument();
window.getSelection().removeAllRanges();
}
} else if (document.selection) {
// Internet Explorer
var ranges = document.selection.createRangeCollection();
for (var i = 0; i < ranges.length; i++) {
ranges[i].text = "";
}
}
}
What I actually want to do is remove all the cursor- highlighted elements, except for the input#cursor element.
edit:
so lets say if I highlighted these elements with my cursor:
<span>a</span>
<span>b</span>
<input type='text' id = 'cursor' />
<span>c</span>
<span>d</span>
on a keyup, this function should not remove the <input> ...only the <span>
Phew, that was a little harder than expected!
Here's the code, I've tested it in IE8 and Chrome 16/FF5. The JSFiddle I used to test is available here. AFAIK, this is probably the best performance-wise you'll get.
The docs I used for Moz: Selection, Range, DocumentFragment. IE: TextRange
function deleteSelection() {
// get cursor element
var cursor = document.getElementById('cursor');
// mozilla
if(window.getSelection) {
var selection = window.getSelection();
var containsCursor = selection.containsNode(cursor, true);
if(containsCursor) {
var cursorFound = false;
for(var i=0; i < selection.rangeCount; i++) {
var range = selection.getRangeAt(i);
if(!cursorFound) {
// extracts tree from DOM and gives back a fragment
var contents = range.extractContents();
// check if tree fragment contains our cursor
cursorFound = containsChildById(contents, 'cursor');
if(cursorFound) range.insertNode(cursor); // put back in DOM
}
else {
// deletes everything in range
range.deleteContents();
}
}
}
else {
selection.deleteFromDocument();
}
// removes highlight
selection.removeAllRanges();
}
// ie
else if(document.selection) {
var ranges = document.selection.createRangeCollection();
var cursorFound = false;
for(var i=0; i < ranges.length; i++) {
if(!cursorFound) {
// hacky but it will work
cursorFound = (ranges[i].htmlText.indexOf('id=cursor') != -1);
if(cursorFound)
ranges[i].pasteHTML(cursor.outerHTML); // replaces html with parameter
else
ranges[i].text = '';
}
else {
ranges[i].text = '';
}
}
}
}
// simple BFS to find an id in a tree, not sure if you have a
// library function that does this or not
function containsChildById(source, id) {
q = [];
q.push(source);
while(q.length > 0) {
var current = q.shift();
if(current.id == id)
return true;
for(var i=0; i < current.childNodes.length; i++) {
q.push(current.childNodes[i]);
}
}
return false;
}
I would suggest removing the element you want keep, extracting the contents of the selection using Range's extractContents() method and then reinserting the element you want to keep using the range's insertNode() method.
For IE < 9, which doesn't support DOM Range, the code is trickier, so for simplicity you could use my Rangy library, which also adds convenience methods such as the containsNode() method of Range.
Live demo: http://jsfiddle.net/DFxH8/1/
Code:
function deleteSelectedExcept(node) {
var sel = rangy.getSelection();
if (!sel.isCollapsed) {
for (var i = 0, len = sel.rangeCount, range, nodeInRange; i < len; ++i) {
range = sel.getRangeAt(i);
nodeInRange = range.containsNode(node);
range.extractContents();
if (nodeInRange) {
range.insertNode(node);
}
}
}
}
deleteSelectedExcept(document.getElementById("cursor"));