Formatting buttons for contentEditable reflect selection formatting - javascript

We have a contenteditable="true" div which we use as a wysiwyg text editor. We added a basic formatting toolbar similar to the one that uses Medium.com
Using execCommand(), we're able to make the selected text bold if, for instance, the user presses the bold button. This works great.
However, something we haven't managed to do yet is to make the bold button highlighted if the user selects a part of the text which is in bold, like illustrated in the picture above. This could be easily done by passing a is-active class on the button of course, but how do we know that the selected text is, in this case, bold?
We think it could perhaps be done using the Selection API but this use case seems undocumented.

since the execCommand() use html tag wrappers like B tag for bold .
So when you are selecting the word i am sure you are using some sort of js to show that formating tollbar just add some more code in that function like this.
if(selectedElement.nodeName == "B"){
toolbarBoldButton.classlist.add("is-active");
}
Note: i am using js function "nodeName" to get the tag name which was wrapped around the execCommand() in this case bold/B then matching if it matches the tag and if true i am adding the is-active class to the toolbars Bold style element.

Related

How to select text and then perform a cypress test on it?

I have a small application to test on cypress. It has a editor for user to add description and stuff. The user can make the text bold, italic etc. The user can also remove the formatting added so far on the text. But to remove the formatting the text should be selected like we normally do in any word editor.
My question is how can I test this feature while keeping the text selected.
A simple code example would be as follows:
<p>This is the description text</p>
So far I have got this but this does not keep the text selected of course, any idea how to cater this?
cy.get('p').contains('This is the description text');
cy.get('.remove-formats').click();
cy.get('.tools')
.within(() => cy.get('button').should('not.have.class', 'is-active'));
What change should I make in the first line that the text stays selected when the second line executes as I want the remove formats to be performed on the text only. Any help would be appreciated.
Edit:
The text editor is very simple just like the one we have for stackoverflow.
Similar to how we need to select the text first and then click bold to get the text bold, otherwise it does not imply to the text. How would I structure cypress tests for this?
I have selected the text through dblclick() but as soon as I click on any option to test that feature the text does not stay selected in cypress tests.
You can use double click to select the text.
cy.contains('This is the description text').dblclick()
You can also use a combination of ctrl+A
cy.contains('This is the description text').click().type('{ctrl+a}')
Try to use
.type("{selectall}{leftarrow}")
from cypress docs {selectall} - Selects all text by creating a selection range

HTML input text in 2 colors

I want to show some text in red color and the remaining in black inside one html textbox after the on change event or mouse leave event.
Is this possible? if yes how?
I don't think you can achieve specifically what you're asking for. You can apply CSS to the default value of a text box, but to change the colour of only some of the words within it would require you to use a <span>, which you can't within a text box value (i.e. you can type <span>, of course, but not apply CSS to it).
If you're happy to have the text within some other element as you imply in a later comment, then that's perfectly doable with very simple CSS using spans within <p> or <div> elements, as evidenced in the below jsFiddle:
http://jsfiddle.net/2DpSX/
Finally I could do this by creating a editable <div>
http://jsfiddle.net/EP2dc/
Thanx everyone for the guidance.

dynamic highlighting using javascript/uiwebview ios

I have some text content displayed on a UIWebView which is plain html. The current paragraph is highlighted in yellow and the user has selected the word 'If the'. (link to image: http://i.stack.imgur.com/GKp9h.png)
1) When the user selects some text on the uiwebiew, how do I perform dynamic highlighting? i.e. as the user is selecting text, what ever text is selected gets highlighted in purple?
For instance, I like the words 'If the' to be highlighted in purple (maybe using window.getSelection() ? ) and that this behaviour is dynamic such that as the user selects subsequent words, these words under selection gets highlighted in purple.
What I am struggling with at the moment is:
1) What event handler (JavaScript or iOS) should I listen to, when the user is selecting some text on the uiwebview? This is before the uimenucontroller opens up.
2) Once, I get the selected text (using window.getSelection(), how do I modify the DOM in a clean efficient way such that the selected text gets highlighted?
I suppose for 2) I cannot directly use style.backgroundColor=<hex code of purple>
There's a very similar question here: How to get selection text from UIWebView?
From the accepted answer there, looks like this might answer your question: http://zaldzbugz.posterous.com/how-to-mark-or-get-the-highlighted-string-ins/ There's a discussion about getting and styling the text selection in a web view.

Updating the state of a button in a text editor

I'm trying to develop an app for ipad and I'm using the contenteditable feature. I have created 3 buttons (bold, italic, underline) and when someone taps them they perform the functionality using execCommand. However when the user selects a word that is bold I want to change the state of the Bold icon image so that it lets the user know that the selected text is in bold. This feature is available in programs like ckeditor and tinymce but I want to know how it's done. I know that some people use a timer that checks all the states every second but I don't think that's the right way. Could someone help me with the code or explain how this could be done.
look up the document.queryCommandState() method to find your answer
I believe you pass a flag which returns true or false, such as...
if(document.queryCommandState("Bold")){ highlightBoldBtn(); }
EDIT
To clarify, if I understand you correctly this will work. This is how I did it with my editors. Just add a 'onclick' and 'onkeyup' event to your contenteditable div or textarea like the following
// this array is for every button you implement on your editor
var buttonarr = ["Bold", "Italic", "Underline"]
// here is the onclick/keyup function for your element
function updateButtons(){
for(var i=0; i<buttonarr.length; i++){
var buttontype = buttonarr[i];
if(document.queryCommandState(buttontype)){
// call function to turn this button "on" or use jQuery
$('#btn_'+buttontype).addClass('button_on');
}
}
}
If you noticed, what I did was gave each of my buttons the ID of "btn_" with the button flag appended to it. Using CSS I then made a button_on class that styles it accordingly. You may want to simply remove the 'button_on' class from all buttons on each call to updateButtons(), and then add the class back on as it returns true.

how to change the text color using jquery or javascript

I have a two items(rows) in the list box
I love to work with jquery
i love to work with javascript
I have textbox and button when I enter love in the text box when I click button i need to loopthrow this list box to find the text love and change that love text color? to yellow.
thanks
first of all, jQuery is javascript, it's a library written in javascript.
So, If I understand your problem, you have 3 interactive elements on your page:
a list box containing a list of words
a text field for the user to enter a word
a button for the user to click when he has written the text.
And you want the option to change color when the user clicks the button.
the code for thsi would be something like this:
$("#mybutton").click(function(){
var text = document.getElementById("mytextinput").value
$("#lstCodelist option").each(function (){
if(this.text()===text)
this.css('color':'yellow');
});
});
this is what happens:
line 1: I define a click handler when the button gets clicked.
line 2: I get the text from inside the textbox, I use getElementById to avoid the overhead of using jQuery for something that simple
line 3: I loop over each of the items in the list.
line 4: if the string in the textbox equals the text inside the option:
line 5, change the css property of the list option.
So no, this is not affecting the text, it only edits the css.
for changing text box color, you can add class to the element
addClass("myClass yourClass");
http://api.jquery.com/addClass/

Categories