How to select text using cypress [cypress] - javascript

I'm looking to test a text editor like https://github.com/brijeshb42/medium-draft using Cypress. But I can't find a way to select text using it. Does anyone have a clue on how to do that?
I'd have to select a specific text range in order for the test to be effective.

The commented answer above was the clue I needed, but it needs a couple tweaks (at least as of the version I'm using: v3.1.5). The link has all the info, but the answer should be as follows
cy.type('{selectall}')
Note that it's ".type()" instead of ".text()" and the escape sequence is quoted...

Related

How to create an input field where you can type naturally, and then it translates it into HTML?

I'm trying to have a textarea input field just like when you post a new StackOverflow question. You can have line spaces, you can bold text, you can insert link etc.
However, when you push some kind of button, all of that gets translated into a long HTML string (e.g., spaces become <p> or <br>, bold becomes <strong>, link becomes <a>). Is there a way to do this with some kind of JS plug in?
What you describe is a What You See Is What You Get (WYSIWYG) editor.
Google "WYSIWYG editor library"
Examples:
https://prosemirror.net/
https://www.tinymce.com/
This question has been answered here Rendering HTML inside textarea
What you need is WYSIWYG (What you see is what you get) editor.
There are a lot of them.
You can check out these:
Ckeditor The best web editor for everyone
TinyMCE Full featured web editing
They are very easy to use.
If I have understood what you are asking, you will need to learn regular expressions. Everything is the context is based on text replacement.
Example: because textarea does not display hyperlinks, buttons, i can do somethings like in stackoverflow.
For hyperlink, i can write something link [# http://facebook.com] or [link]http://facebook.com [link];
later, I extract the http://facebook.com and wrap it between <a></a> elements.
What everybody above said is true, you want to be looking at a WISYWG editor.
If by chance you are using Bootstrap, you may want to look at Summernote.
I have no affiliation with them, but I used it for one of my projects and was very pleased.

Dynamic spell-checker for HTML text box?

I have a text box, created in HTML. The user may type input into this text box. I would like to validate their input dynamically, as they type, and search for spelling mistakes in their text. If there is a spelling mistake, underline the word.
This is a common functionality I assume, but I cannot find a plugin or API call that will accomplish this for me. Can anyone please point me in the right direction? Preferably something that will work in Spanish rather than English :).
Thanks you.
There are tree options for spellchecking :
Using a jQuery plugin
Using the build-in spell checker of your browser with the spellcheckattribute
Using a spell checker in a WYSIWYG editor

Fancy jQuery Tags Selector

I am looking to add a jQuery/Javascript based selector type of element in my application. The idea is that a user is presented with say 50 tags inside a textarea, but instead of just selecting a tag word and removing it, there is an X alongside that removes the tag from the list and there is a textbox where a new word can be added. Hope this makes sense.
I would like to ask, is there a ready made open source solution for this ?
Actually found one which seems to do the trick :
http://loopj.com/jquery-tokeninput/
I've been working on a project recently and this plugin worked very nicely for me:
http://xoxco.com/projects/code/tagsinput/
It does "x" to delete, backspace to delete, callback on adding and removing tags, autocomplete and other nice features.

Replace selected text with jquery/javascript

I am trying to build a specialized WYSIWYG text editor in the browser, and have a very limited set of functionality, but the biggest part of that is wrapping certain text in span tags.
I can find many resources explaining standard stuff (execCommand and whatnot), but have looked and looked and can't find anything to do what I need.
Basically, it's as simple as it sounds: user selects some text, clicks a button or whatever, and the text gets replaced with some other text (the initial case is that same text wrapped in some HTML tags).
I can find ways to do this in a textarea, but I'm just in regular HTML land, with the content in question inside a div with contentEditable marked as true.
I have also found ways to replace all occurences of text, or the first occurence, but not a specific one. Most solutions I find fail when trying to replace anything but the first occurence.
I'm hoping jQuery can do this in some way.
Have you tried the jQuery wrapSelection plugin?
This is pretty similar to this question. It might help.

Search and replace

I'm working on a new project and i want to do something similar (somehow) to intellitext ads (without popup though). In fact, i want to add links on certain words. The problem is that i don't know how to handle this.
I mean, ok, i get document.innerHTML then what? I can find any word, but some may be inside of tags. I don't want to replace words from textarea or text inside of a link. Same for input, select, and so on.
Also, the way i've managed things, i replace even the html tags (if the word is select for example, the script will replace <select> tag. And i really don't want this :P
So, any idea? Where to start ? What to do? Anything?
I wish a solution that works without any library, or, if is mandatory, to work with jquery (this is what i know).
I think that some regexp may help. The problem is... I never understand them :s
Any help will be appreciated. Thanks a lot!
jQuery does this already!
Just use .text() to get all the text underneath. Documentation and examples are here.

Categories

Resources