Simple bold highlighted text

[derekej...@gmail.com]

Hi,

In text area I want to hightligh a piece of text then then bold , underline or italic the text by catching the event ctrl b, ctrl u and ctrl i in keypress event

I am catching the event ok

 <textarea data-bind="value: Post, event:{keypress: viewModelTrackerViewModelForm.test}"  rows="2"  maxlength="${MaxValue}" cols="10" id="text_${AssetId}"  />   


but inside my function I am calling the following to get the highlighted text

function getSelectedText() {
    if (window.getSelection) {      
        return window.getSelection();
    }
    else if (document.selection) {       
        return document.selection.createRange().text;
    } else if (document.getSelection) {
        return document.getSelection();
    }
    return '';
}

is there a better way to do this

regards

Derek

[rpn]

I was researching this a little bit when writing this post and came up with the same logic that you did:

            //get the selected text

            var selectedText = '';

            if (window.getSelection) {

                selectedText = window.getSelection();

            } else if (document.getSelection) {

                selectedText = document.getSelection();

            } else if (document.selection) {

                selectedText = document.selection.createRange().text;

            }

It looks like there may be some alternatives if you are limiting it to an input/textarea, but it looks like it would be a lot more code.

[derekej...@gmail.com]

Hi Ryan,

I have been using your website already and it is of great help.

I am creating a sports tracjer so users can comment on a sporting event as it happens my view template code is:

<div class="TrackerLinkList" >         
              Time: <input type="text"  data-bind="value: Time" id="time_${AssetId}"/> 
              <a href="#" data-bind="click: function() { viewModelTrackerViewModelForm.editPost($data) }"> <img src="<%= ResolveUrl("~") %>/Content/Images/ext/default/dd/save.png"  alt="Save"  /></a>   
              <a href="#"  data-bind="click: function() { viewModelTrackerViewModelForm.deletePost($data) }"> <img src="<%= ResolveUrl("~") %>/Content/Images/ext/default/dd/delete.gif"  alt="Delete"  /></a>
               On Hold: <input type="checkbox" id="onhold_${AssetId}" data-bind="checked: IsOnHold" />  
              Icon: <select id="icon_${AssetId}" data-bind="options: viewModelTrackerViewModelForm.icons, value: Icon"></select>
              <div class="EditorContainer">              
                <div class="EditorInnerContainer story">                                                                                                  
                    <textarea data-bind="value: Post, event:{keypress: viewModelTrackerViewModelForm.test}"  rows="2"  maxlength="${MaxValue}" cols="10" id="text_${AssetId}"  />   
                                                                        
                </div>                   
              </div>            
         </div>

I want the user to have the ability to highlight a word in the text and make it bold, italic or underline - is there any neat way to do this with native knockout

[Mark Bradley]

You might be better off finding some rich text editing widget such as
TinyMCE [1] that handles this functionality than trying to make
something that may or may not work reliably. (I don't believe i've
ever seen bolding/italics text inside a plain textarea).

[1]: http://tinymce.moxiecode.com/

--
-barkmadley
sent from an internet enabled device
http://barkmadley.com

[derekej...@gmail.com]

Hi

I got this working with only one outstanding hurdle the the default action does not work - I eventually want to catch ctrl b, ctrl i key presses but ignore normal text - any Ideas?

 <textarea  data-bind="value: Post, event:{keypress: function(event) {viewModelTrackerViewModelForm.test(event,$data)} }"  rows="2"  maxlength="${MaxValue}" cols="10" id="text_${AssetId}"  />                                                                         
       

 test: function (event, item) {           
            if (event.ctrlKey) {
                wrap_selection("text_" + ko.toJS(item).AssetId, '<b>', '</b>', 0, 0);
            } else {
                return true;
            }
        }

[rpn]

You have the right idea by return true, but your anonymous function is not passing that value on to the framework.

Try: event:{keypress: function(event) {return viewModelTrackerViewModelForm.test(event,$data)} }

[derek johnston]

Thanks Ryan,

great blog btw

d

On Jul 19, 3:21 pm, rpn <rnieme...@gmail.com> wrote:
> You have the right idea by return true, but your anonymous function is not
> passing that value on to the framework.
>

> Try: event:{keypress: function(event) {*return *
> viewModelTrackerViewModelForm.test(event,$data)} }