We Keep Coding

Text to Speech - highlight the read word when it is being Spoken and track speak progress

1]: https://i.stack.imgur.com/USZOJ.png
My Requirement is i want to copy paste data to this textbox. after copying text its formatting should not change,
one should be able to change the font size , font etc.
If data contains paragraph and table then it can be pasted in
its own format.
Text color and table border color in the textbox should be changed to
white irrespective of original format color.
Table layout should not get disturbed in textbox.
**
i have found solution on this and i have achieved it in web based
TinyMCE editor and JavaScript, i am using window speech synthesis to
read the copied data in to the editor , when i click on read button
it reads the data but i need to highlight the read word when it is
being Spoken
**

There are two main ways to get the job done:
Using the HTMLBody property of Outlook items which returns or sets a string representing the HTML body of the specified item. The HTMLBody property should be an HTML syntax string.
Using the Word editor. The WordEditor property of the Inspector class returns an instance of the Word Document which represents the message body.
See Chapter 17: Working with Item Bodies for more information.

OfficeJs/WordJs select text range by index and bind click event

First, Using OfficeJS/WordJS how can I select text in a paragraph by index and length. For example, my paragraph has 100 characters and I need to select all from index 2 till index 16.
Second, When I found this range - how I can add an event handler for this range? I mean, when user click at 2-16 chars in my paragraph - I will show some useful information in my Add-in.
I'm using Word 2016 Add-in.
Thanks!

I recommend you to explore the Range functionalities we added as part of the 1.3 update who is in preview right now. Please follow the instructions here on how to try the preview. please explore the added Range object functionalities (all whose Req set are 1.3 in the last column)
Please explore the "split" functionality who enables you to split a paragraph into chunks of ranges when a set of delimiters is provided. For instance you can specify a space (" ") delimiter and get all the words in that paragraph. Check this example (exercise 7 on the lab) that splits a paragraph into words.
In conjunction with the split functionality, you can use getRange and expandTo methods to expand a range. (so you get from index 'x' to 'y'
on your second question. Once you have the range, you can wrap it with a titled content control (range.insertContentControl and then specify a title for it), so that you can use the Office.context.bindings.addToNamedItemAsync API to create a Textbinding and subscribe to the BindingSelected event, as shown on this example.
Hope this guides you in the right direction.

How to resolve unicode issue with javascript length?

I have angular tooltip for character counter but here i am facing some issues when user copy paste text and add some ascii characters that are not aligned with the java and orcale length when we post the data to the backend, Lets say if user have # in the text it will count lenght as 1 but backend side it will count as 4 because of the way oracle and java works with bytes.
So i am trying to resolve two issues.
1- when i paste text it character counter should count same unicode as java ?
2- It should not remove characters from the text ?
main.html
<textarea rows="2" class="form-control"
ng-model="processDTO.processStatementText"
name="processStatement" id="processStatement"
placeholder="Process Statement" maxlength="4000" required
data-tooltip-html-unsafe="<div>{{4000 - processDTO.processStatementText.length}} characters left</div>"
tooltip-trigger="{{{true: 'focus', false: 'never'}[processDTO.processStatementText.length >= 0 || processDTO.processStatementText.length == null ]}}"
tooltip-placement="top" tooltip-class="bluefill">
</textarea>
main.txt
2. Upload Template Header – Risk Causal and Impact comments are color coded as mandatory but they are optional. Similary the Originating Source System Process/Risk/control ID
3. In the upload template, for any of the multi value fields, I use an invalid delimiter ‘:’, Eg: 13:7 , for some reason this changes the cell format to time format and thereafter I am not able to give any single values, its always converted to time format. Not sure if this is a training issue, but want to put it on the table to see if it requires any fix at all
4. In Upload, for the grid field length validations, the filter doesn’t works on Row Number and Max Allowed columns. ~!##$%^&*()_+|}{:"?><,./';[]\=-0987654321`
5. ERH All levels added in the View End to End ERH screen – Sort and Filter doesn’t works, After clicking on this field, none of the other filter/sort works on the page. Also the sort indicator(black triangle) is not visible, I believe the column width needs to be adjusted.
6. The Risk/Control reference id is seen on the Process Search grids, but when I search by Risk/Control, I don’t see the corresponding control/risk grid having the ref id column however tool tip has it
7. The label change “Originating Source System Process/Risk/Control ID”"

Trying to replace a textarea with better option

Can't seem to figure out the best way to do this.
I am passing through some text to a textarea, but the text is formatted in a mimic of a column format as such:
Text Value Comments
Text2 Value Comments
Longtext Value Comments
etc...
My users take the text from this area and copy/paste it into word. As you can imagine, the attempt at column formatting becomes distorted.
Is there a better way to create this column type of text data set, instead of within a textarea?

Auto Complete Fields in Rails that Display Something Different Than What They Select

I'm trying to create an auto complete field (using the script.aculo.us plugin) in a form for a category select, but I want the auto complete list to display a number next to each category (the number of other things in the same category). This is similar to the Tags field on stack overflow.
Right now I can display the number I want, but when I select any field the extra number gets dumped into the text field with the category. Currently I'm simply appending the number to each item on the array before I display it. How can I make it so when you select something from the list the number (enclosed in parentheses) does not get put into the text field. Thank you.

I finally solved my problem, I just needed to figure out what some of the plugin's options were. It turns out there is an option for the auto_complete_field helper called :select. The value you provide to this tells the JavaScript which part of the <li> element (the HTML tags the results are displayed in) to return to the text box.
The solution was a simple matter of enclosing the name of the category in a span with a special class and leaving the number part I didn't want outside of this class. This was easy since I was already using my own partial to display the results.