Insert text in RichTextEditor on cursor position - actionscript-3

I'd to insert date on a richtexteditor when the user click on a button.
This part is easy, more difficult, how to insert this on cursor position. Cursor position may be on the beginning, middle or end of the text.
Thanks for helping


Simple as that:
protected function richText_keyDownHandler(event:KeyboardEvent):void
{
if (event.keyCode == 66) //or remove if statement
richText.insertText("Really?");
}
<s:RichEditableText id="richText" text="Lorem ipsum dolor sit amet"
keyDown="richText_keyDownHandler(event)"/>
EDIT: for mx RichTextEditor
protected function richText_keyDownHandler(event:KeyboardEvent):void
{
var ind:int = richEdit.selection.beginIndex;
richEdit.text = richEdit.text.substring(0, ind) +
"Your text variable here" +
richEdit.text.substring(ind, richEdit.text.length);
}
and mx rich text editor:
<mx:RichTextEditor id="richEdit" text="Lorem ipsum dolor sit amet"
keyDown="richText_keyDownHandler(event)"/>
Maybe there is more effective method, but this is the only I could think of.

Related

How do you embed italics in a paragraph with React

Question
As mentioned in the title, how do you embed an <em> or <b> tag in a paragraph in React?
Example Output
I'd like to start with a default paragraph like so:
<p>Lorem ipsum</p>
then end up with something like:
<p>Lorem i<i>p</i>sum
My Current Workaround
I'm currently splitting the paragraph into a list of spans all containing a single character. This seems clunky and uncool... Would appreciate any help; I'm a React newcomer!

Here's the solution I used to get a satisfactory result:
const DummyComponent = ({highlightIndex}) {
let aStringVariable = "some dummy text";
const eachLetter = aStringVariable.split("");
return (
<p>
{eachLetter.map((letter, index) => {
if (index === highlightIndex){
return <em key={index}>letter</em>;
} else {
return <React.Fragment key={index}>{letter}</React.Fragment>;
}
</p>
}

how to Highlight read only Text Area based on deletes from another of same text area?

I have two text area with same content.One is read only text area and other is editable text area. When a user deletes any text using 'delete' or 'backspace' or 'ctrl+x'then that data need to be highlighted in read only text area. The highlight should always show up the difference between read only text area and editable text area. Any idea how to achieve this goal. Have tried few options nothing is working as expected. Experts help is greatly appreciated.
All this happening in one component.
HTML code:
<label class="edit-title">Topic Description (System, Read-Only)</label>
<textarea rows="14" cols="60" class="description edit-text-area" [(ngModel)]="data.topicDescLong" readonly></textarea>
</div>
<div class="topic-section topic-divider">
<label class="edit-title">Topic Description for Presentation</label>
<textarea rows="14" cols="60" class="description edit-text-area" [(ngModel)]="data.editedTopicDescLong" (ngModelChange)="onEditLongTopicDescChange()"></textarea>
</div>
Component Code:
onEditLongTopicDescChange(){
if(this.data.editedTopicDescLong.trim().length === 0 )
{
this.isSaveDisabled = true;
this.isSubmitDisabled = true;
}else{
if(this.orginalEditTopicLongDesc != this.data.editedTopicDescLong)
{
this.isSaveDisabled = false;
this.isSubmitDisabled = false;
}
else{
this.isSaveDisabled = true;
this.isSubmitDisabled = true;
}
}
}
When user Delete any text using 'delete' or 'backspace' or 'ctrl+x'
Then the selected text should be removed from the editable section
and highlight the deleted part on read only section. Sample Image Attached
Left is readonly text area and right is editable area.

CSS background for text only & not parent span/div/body?

I'm not sure this is possible, but i was wondering if it is possible to set a background color for text only, & not the span/div/P tags that contain the text.
EG
This text here...
each character of "this" will be a black background with white text, the 'space' will have the blue background the word "text" will be a black background with white text etc....
Something like what deaf people see on some TV shows - captions...
But I don't want to contain each / every word with a div or span - as that will make the total HTML coding huge...
From what i have gathered / googled, I can set a background for an entire 'container' but not just for "text" in the container.
example: How do I set background color of text only in CSS?
The above sets the whole h1 tag as a green background.
PS - i'm only using 'green' as an example - but i've got other colours in mind, or even pictures as the background. but i want the text content to be visible..
PS, if the above can be done, is it also possible to 'opaque' the text-background ? so the actual / main background is partially visible, but keep the text "solid".
Ive used opaque, but it makes the foreground text opaque (not kept as solid).

This is the solution I found using JavaScript. It is definitely not only CSS, but it's as far as I could get it with minimal code:
Note: check the updated JSFiddles below! http://jsfiddle.net/fq4ez69t/1/
It finds all spaces in your "p" tags (i.e. change this to whatever you need) and substitutes them with a span with class .space so that you can style it in your CSS.
Here's the JS:
var str = document.getElementsByTagName("p")[0].innerHTML;
var newstring = str.replace(/ /g, '<span class="space"> </span>');
document.getElementsByTagName("p")[0].innerHTML = newstring;
Update #1
Just thought of this. Maybe change the getElementsByTagName("p")[0].innerHTML; to something like document.getElementsByClassName('shaded')[i]; and use this class on whatever text you want to look like that. This is done using a for loop like so:
http://jsfiddle.net/fq4ez69t/2/
Just add the class shaded to the text element you want to look like the image above and voila!
var shadedtextblocks = document.getElementsByClassName("shaded");
for(var i = 0; i < shadedtextblocks.length; i++)
{
var str = shadedtextblocks[i].innerHTML;
var newstring = str.replace(/ /g, '<span class="space"> </span>');
shadedtextblocks[i].innerHTML = newstring;
}
Update #2 - Works with background images now.
http://jsfiddle.net/37s7ex2j/
Here's an updated version that works for p and h1 tags and uses jQuery. It won't print backgrounds on top of your background image. It looks much better, but the script is a bit slower. Here's the result:
$('.shadedtext').each(function(){
//FOR P ELEMENTS
var text = $.trim($('p').text()),
word = text.split(' '),
str = "";
$.each( word, function( key, value ) {
if(key != 0) { str += " "; }
str += "<span class='shade'>" + value + "</span>";
});
$('p').html(str);
});

Choosing text in a container
In short: No you can not set the background of only the text in a div, or spesialy choose each color for each word.
What you can do is set the text of each container ofc:
<div class="class"></div>
.class {
//background, can also use rgba(0,0,0,0.5) <- semi transparent black.
background-color: white;
}
But I don't want to contain each / every word with a div or span - as that will make the total HTML coding huge...
Keeping your text inside inline-block elements will keep the selection to some what text only.
Example:
p {
background-color: rgba(5, 5, 5, 0.5);
color: white;
}
p.inline {
display: inline-block;
}
Inline
<p>Lorem ipsum dolar si amet</p>
Inline-block
<br>
<p class="inline">Lorem ipsum dolar si amet</p>

If you want something like subtitles on TV, you can add a text-shadow on your text:
.myTextClassSelector{
text-shadow: green 1px 1px, green -1px 1px, green -1px -1px, green 1px -1px;
}
<div>
<p class="myTextClassSelector">This text here</p>
And this other text here.
</div>

img tag is not working properly in actionscript3 TextField

I have a TextField.
Here is a snippet:
this.textField = new TextField();
this.textField.defaultTextFormat = font.format;
this.textField.selectable = true;
this.textField.border = true;
this.textField.wordWrap = true;
this.textField.multiline = true;
And here is the method to add new line to the textField box:
this.textField.htmlText = 'some text <IMG SRC="http://gravitatestudio.com/wp-content/themes/gravitate/images/facebook.png">';
The issue is that an image is always placed UNDER text instead of the END OF THE TEXT.
Here is the trace(this.textField.htmlText) after html text has been added:
<P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="12" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">some text <FONT SIZE="2"><IMG SRC="http://gravitatestudio.com/wp-content/themes/gravitate/images/facebook.png"> </FONT></FONT></P>
Also I need to add an image to any side of the text like a chat message using smiles (left, middle, right side of the text).
Any suggestions?

TextField html text is very limited and thats why Adobe released TLFTextFields which will give you much more control over the layout of elements in the field. I have personally used it and have made entire chats out of one textfield with images, links etc.
resource:
adobe: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/text/TLFTextField.html
tutorial:
http://flashsimulations.com/2010/09/10/handling-image-loading-in-tlf-textflow-and-textfield/

Adding text character by character using .animate() jQuery

I am using jQuery and AJAX on my website. My AJAX respond is a text representing the continuance of an article. I've read that there's a STEP function in jQuery's animate but I don't know how to use that to append text character by character to a DIV element.
Please Help me.
Thanks in advance. :D

Try this.
var someajaxtext = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sem sit amet magna convallis sed ullamcorper mi commodo.';
$('button').click(function () {
var dv = $('#mydiv');
dv.text("");
jQuery({
count: 0
}).animate({
count: someajaxtext.length
}, {
duration: 1500,
step: function () {
dv.text(someajaxtext.substring(0, Math.round(this.count)));
}
});
});
Demo here: http://jsfiddle.net/naveen/evVMw/
P.S: Change the duration as you wish.