javascript - Creating Rainbow Text in Google Docs - Stack Overflow

admin管理员组

文章数量:1391975

var selectedElements = selection.getSelectedElements();
for (var i = 0; i < selectedElements.length; ++i) {
var selectedElement = selectedElements[i];

// Only modify elements that can be edited as text; skip images and other
// non-text elements.
var text = selectedElement.getElement().editAsText();

// Change the background color of the selected part of the element, or the
// full element if it's pletely selected.
if (selectedElement.isPartial()) {
  text.setColor(selectedElement.getStartOffset(),
      selectedElement.getEndOffsetInclusive(), '#69359c');
    }
  }
}

The above text takes a selection inside of a Google Doc and changes it to the hex code #69359c (a dark purple). I have searched many websites, many gits, and asked many friends for help with my project.

My end project is this:

1. Create a menu for Google Docs with my selector (DONE)
2. Be able to highlight a certain amount of text and change it to an array of colors (ROY G. BIV / the rainbow).
3. Have the format be only for Google Documents.

If anyone can help me it would be highly appreciated.

var selectedElements = selection.getSelectedElements();
for (var i = 0; i < selectedElements.length; ++i) {
var selectedElement = selectedElements[i];

// Only modify elements that can be edited as text; skip images and other
// non-text elements.
var text = selectedElement.getElement().editAsText();

// Change the background color of the selected part of the element, or the
// full element if it's pletely selected.
if (selectedElement.isPartial()) {
  text.setColor(selectedElement.getStartOffset(),
      selectedElement.getEndOffsetInclusive(), '#69359c');
    }
  }
}

The above text takes a selection inside of a Google Doc and changes it to the hex code #69359c (a dark purple). I have searched many websites, many gits, and asked many friends for help with my project.

My end project is this:

1. Create a menu for Google Docs with my selector (DONE)
2. Be able to highlight a certain amount of text and change it to an array of colors (ROY G. BIV / the rainbow).
3. Have the format be only for Google Documents.

If anyone can help me it would be highly appreciated.

• javascript
• google-apps-script
• google-docs
• google-document-viewer
• rainbow-js

Share Improve this question Follow edited Dec 8, 2014 at 22:11 KRR 4,92222 gold badges1616 silver badges1414 bronze badges asked Dec 8, 2014 at 19:27 Rose StoryRose Story 1111 gold badge11 silver badge77 bronze badges 3

• Do you have to change the color for each letter, or for each word? – Rivero Commented Dec 8, 2014 at 21:32
• Each letter & symbol. – Rose Story Commented Dec 9, 2014 at 13:20
• @RoseStory did you ever make this into a script? – ian5v Commented Oct 2, 2015 at 20:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

I just found this question and am happy to provide some working code from my Rainbow Font Google Docs add-on (Magic Rainbow Unicorns).

The first problem is that you need to set the foreground color on the text, and the second is that the code above only allows for partial paragraph selections.

For whole selections use this code:

var elementText = element.editAsText();
if (elementText) {
  var paragraph = elementText.getText();
  for (var j = 0; j < paragraph.length; j++) {
    elementText.setForegroundColor(j, j, getNextRainbowColour(...));
  }
}

For partial selections, I used this:

var elementText = element.asText();
var startIndex = element.getStartOffset();
var endIndex = elements.getEndOffsetInclusive();
for (var j = startIndex; j < endIndex+1; j++) {
  elementText.setForegroundColor(j, j, getNextRainbowColour(...));
}

You are pretty close to the answer already. Try iterating over the elements within your 'text' variable, so you can change the background on each one.

You could use something like this to iterate over each letter:

var letters =  elementText.getText();
for(var j = 0 ; j< letters.length-1; j++)
{
     elementText.setBackgroundColor(j, j+1, getRandomColor())
}

Here is a sample of a function to use different colors:

function getRandomColor() {
   var letters = '0123456789ABCDEF'.split('');
   var color = '#';
   for (var i = 0; i < 6; i++ ) 
   {
       color += letters[Math.floor(Math.random() * 16)];
   }
   return color;
}

For your last question, since the Text class is not part of Javascript, but from app-script library, this will not work outside Google environment.

本文标签： javascriptCreating Rainbow Text in Google DocsStack Overflow