I am using CKEditor ver.3.6 in my MVC Application.
My requirement is to update the selected text with new text in the ckEditor. I could find out the method editor.getSelection().getSelectedText(); for getting selected text from the editor. I need to add some tag with the selected text when a toolbar button is pressed and update the selected content using javascript.
For Example :
Content in the ckEditor is
<span>Edit content in the editor</span>
and I have selected the word “editor” from ckEditor. I have to update the selected word “editor” with “ckEditor” using javascript code.
Please suggest a proper solution.
It looks to me from the docs as the following would work (untested):
editor.insertText("ckEditor");
Use this function in the onclick event of a button.
function Replace()
{
//after selecting the text in the editor
//get text to replace;
var repStr=$("#repTxt").val();
editor.insertHtml(repStr);
}
Cheers
Sunil Raj
Both editor.insertText() and editor.insertHtml() should work, but you have to make sure the editor is ready before you attempt to update the text:
var editor = CKEDITOR.replace('editor');
editor.on('instanceReady', function(){
editor.insertHtml('...');
});
Related
I want to let approved users edit their own Rich Text form posts. I know about TinyMCE, CKEditor, X-editable, wtf_tinymce etc. but I cannot find a single consistent example of being able to post form data from an inline editable rich text field.
This 'Flask Biography' page comes closest I believe but it looks complex; TinyCME also has an inline editing example but that requires a div element rather than a conventional form one, so I don't see how to get the data from that.
How do I use a rich text editor on a Flask form field?
The SO Python chat room has a website, https://sopython.com/ with a wiki and some other tools. We use Ace as a text field enhancement. Other text editors presumably work similarly.
Create a basic text area as normal, and mark it in some way to indicate that the editor should replace it. Use the editor's JavaScript API to create an editor, link it to the text area, and replace the text area. Submitting the form still submits the text field, which is updated by the editor.
Here's how we integrate Ace:
<textarea data-editor="markdown"></textarea>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<script type="text/javascript">
// https://gist.github.com/duncansmart/5267653
// find each text area marked to have an editor
$('textarea[data-editor]').each(function() {
var textarea = $(this);
var mode = textarea.data('editor');
// create the editor div
var div = $('<div>', {
'width': textarea.outerWidth(),
'height': textarea.outerHeight(),
'class': textarea.attr('class')
}).insertBefore(textarea);
// hide the original text area
textarea.hide();
// configure the editor
var editor = ace.edit(div[0]);
var session = editor.getSession();
editor.setTheme("ace/theme/github");
session.setValue(textarea.val());
session.setMode('ace/mode/' + mode);
session.setNewLineMode('unix');
session.setTabSize(4);
session.setUseSoftTabs(true);
session.setUseWrapMode(true);
// update the text area before submitting the form
textarea.closest('form').submit(function() {
textarea.val(editor.getSession().getValue());
});
});
</script>
Is it possible to get the selected text in an input box of a website, using either jQuery or vanilla JavaScript?
I have tried with var selectedText = window.getSelection().toString();,
but this code only gets the text in a paragraph and not in an input box.
EDIT: Maybe I was unclear, I want to get the text from a website that I didn't create. I'm building a Chrome extension and I need to get the text from an input box of a website.
Here is a solution:
function showSelectedText() {
var input = document.getElementById('text');
var selection = text.value.substring(input.selectionStart, input.selectionEnd);
alert(selection);
}
<input id="text" value="Hello, how are you?"><br>
<button onclick="showSelectedText()">Show selected text</button>
If you don't mind using jQuery plugins you can accomplish that by using this one http://madapaja.github.io/jquery.selection/
It's flexible (You can use it both for inputs and for paragraphs)
I want to highlight a text inside a text field in EXT js.
I add the text to the text field dynamically like this:
this.getCopyText().setValue('text to be added');
/|\
|
reference
I tried using the focus method but it does not provide the correct effect.
Can this be achieved by any chance?
EDIT: Setting the selectText propertie of focus function to true does not help.
I had a similar problem with highlighting text in textfield in a window on show, for me the issue of the field not getting focus and not being highlighted was solved by defering the focus call like this:
var me = this;
me.on('show', function () {
Ext.defer(function () {
me.getCopyText().focus(true);
}, 1);
}, me)
I'm trying to insert something in a text area (#note_text) from a drop down list (#note_template). User should be able to insert a number of items into the text area in between typing characters using the keyboard. Similar to selecting from a collection of emoticons to be put in the message.
When done in the followign way, the text area can receive items after typing.
function update1() {
$txt = $("#note_text").val() + $("#note_template option:selected").val() ;
$("#note_text").val($txt);
$("#note_template").val("");
}
But when done in the following way, the content of the text area wouldn't update after typing. Only before typing I can insert items from the drop down list.
function noteTempalteSelected() {
$("#note_text").append( $("#note_template option:selected").val() );
$("#note_template").val("");
}
So it seems that the use of append causes the text area to freeze. Could anyone explain why ? Thank you.
Ok I think I know whats going on here. For the append to work properly, the element should have an innerHTML property or html() in jquery. Textarea just like the input has a val() property. So for this to work properly you should try this:
$('#note_template').on('click', 'option:selected', function(e){
var txtArea = $('#note_text');
txtArea.val(txtArea.val() + $(this).val());
$(this).val('');
});
[DEMO HERE][1]
I am using CKEditor ver.3.6 in my Asp.net MVC 3 Application.
My requirement is to create Paint format option in the Google doc.I need to implement Paint format option in a ckeditor.
In Ckeditor how to copy/get all formatting such as font, font effects, centered paragraph alignment from a selected text(source) to a newly selected text (destination).
Please suggest a proper solution.
Use this function to replace the content of a selected html with the text in one field. On a button click, call this function:
function Replace()
{
var sel = editor.getSelection();
var ele=sel.getStartElement();
if(ele.hasAttributes())
{
var insertele= editor.document.createElement('span');
ele.copyAttributes(insertele,{type:1,value:1})
insertele.setHtml($("#repTxt").val());
editor.insertElement(insertele);
}
}