I'm doing a text expander functionality. Basically if I insert something like "HW" the code will detect "Hello World" and insert that into the editor.
How do I set the caret after my text? I only found methods to set selection that take a node, but this doesn't quite apply. In other editors like Redactor there is a unicode character that can be added to the string so the editor knows where the caret should be.
How to do this with Froala?
Thanks
You could easily do that in Froala Editor by using markers. If you would like to place cursor between Hello and World when you insert the HTML, you could do it like this:
$(selector).froalaEditor('html.insert', 'Hello ' + $.FroalaEditor.MARKERS + 'World');
Related
This one is a strange one and I simply cannot get my head around it. We are trying to append space to a textarea content using the following jquery,
var checkThis ='help';
$('#msg').val(checkThis+' ');
$('#msg').focus();
But when we focus on the text area we can see that the space is not added. Also, the cursor doesn't focus automatically.
I am not able to figure out if there is any other script in the code doing this. This code is actually a large piece of maintenance code, is there anyway I can find what function may be trimming the text?
Try this:
$('#msg').append(checkThis+' ').focus();
I use wysihtml5 editor on my site and I would like to have the following functionality - if user inserts text with special characters they are transformed to html entities.
For example, user inserts:
"Sample text, sample text, sample text ©"
I need to transform it to:
"Sample text, sample text, sample text ©"
I didn't find any information related to special symbols in editor docs. One of the method I think about is to create listener for paste event and process special characters at this step.
Could you advice what is the best way to add this functionality to the editor?
you can use a RegExp character range to replace() them using a dynamic function:
strNew=strOld.replace(
/([\u00A0-\u00FF])/g,
function(j,a){
return "&#" + parseInt(a.charCodeAt(0), 16) + ";" ;
}
);
live demo : http://pagedemos.com/27w7n4n58qpk
this could be applied from the string you get back from your editor, or i guess, on the innerHTML of the editor's contenteditable tag.
For example I have a textarea and I'm typing this:
<b>Bolded</b> and <i>italic</i> and <b><i>bold+italic</i></b>
as I am typing this to my textarea, the text will become bolded or italic like this:
Bolded and italic and bold+italic
Note that it does not have to be <b> or <i>, it could be **text** and it becomes text, I have no problem on creating the custom syntax, I just need to know if it is possible to update it live in js or jquery?
I was thinking of using (this is in CoffeeScript):
$('div#mdEditor').on 'change', ->
# but no idea how to continue?
UPDATE
It does not have to be textarea though, I am using a contenteditable div so I can parse it on live if needed, again, I have no idea how.
Source: http://jakiestfu.github.io/Medium.js/docs/
Goal: When we paste content in editor allow only <p>, <b>, <a>, and <i> tags only
I am looking to create a javascript/jquery function to wrap a piece of highlighted text from a textarea in strong tags - similar to the WYSIWYG editor here.
Is this possible and if so can you point me in the right direction.
EDIT:
OK so here's a hopefully clearer description of what I want...
I have a textbox on my page which I can type in.
I then want to be able to highlight a part of this text and wrap the highlighted part in <strong> tags
So if the text box had the words one two three and I highlighted the word "two", I want to be able to wrap that word in the strong tags - so becoming one <strong>two</strong> three
Hope this is clearer... I know there are plugins out there but I don't need the full WYSIWYG functionality.
My Rangy inputs (terrible name, I know) jQuery plug-in does this.
Example code:
$("#foo").surroundSelectedText("<strong>", "</strong>");
jsFiddle: http://jsfiddle.net/aGJDa/
I love Rangy! Use it often! But I didn't want to include the whole thing just for this little application, so I did it using document.execCommand to wrap the selected text, then used the href (third parameter of the CreateLink execCommand) to find the element, wrap it with what I wanted, and then remove the link:
document.execCommand('CreateLink', false, 'uniqueid');
var sel = $('a[href="uniqueid"]');
sel.wrap('<strong />')
sel.contents().unwrap();
document.execCommand is supported by all major browsers so you should be safe hacking it this way. In the browsers I've tested, the browser itself will close and open tags for you, so if you're selecting from the middle of one html tag to the middle of another, it should nest the tags correctly.
I am working on a customized rich text editor and I am wondering if it is possible to place my cursor somewhere and discover what commands (i.e. bold, italic, justifyCenter, etc.) are currently active/toggled. Obviously, the browser, while in designMode, is keeping track of this. For example, if I have text inside of the iframe like this:
hello world!
and then i place my cursor inside of the word "world", is there any way to figure out that 'bold' is currently toggled without parsing the string and discovering that I am between tags?
The reason I want something like this is so that I can detect a selectionchange event on the editor and then highlight the appropriate button(s) corresponding to what is currently toggled at that position
The queryCommandState() method of document does this:
var isBold = document.queryCommandState("bold");
See MDC, MSDN and Dottoro.