How to get selected text from TUniHTMLMemo?

[Tokay]

Hi! Is it possible to do it? In pas code.

[Sherzod]

Hi,

 

Need to analyze...

 

Best regards,

[Sherzod]

Hi,

 

It seems it can be done by using -

htmlEditor.getDoc().getSelection()

We will try to find working example for this functionality.

 

Best regards,

[Tokay]

Hi, thank you. I'll waiting for example, I don't know where I can add this line of code.

[Sherzod]

Hi,

 

Hi, thank you. I'll waiting for example, I don't know where I can add this line of code.

 

Later I will try to post a simple example

[Sherzod]

Simple implementation, not fully tested...:

 

1. UniHTMLMemo1 -> ClientEvents -> UniEvents -> beforeInit fn:

 

 

function beforeInit(sender, config)
{
    var me = sender;
    me.selectedText = "";
    me.getSelectedText = function(clip) {
        var doc = this.getDoc(),
            selDocFrag;
        var txt = '',
            hasHTML = false,
            selNodes = [],
            ret, html = '';
        if (this.win.getSelection || doc.getSelection) {
            // FF, Chrome, Safari
            var sel = this.win.getSelection();
            if (!sel) {
                sel = doc.getSelection();
            }
            if (clip) {
                selDocFrag = sel.getRangeAt(0).extractContents();
            } else {
                selDocFrag = this.win.getSelection().getRangeAt(0).cloneContents();
            }
            Ext.each(selDocFrag.childNodes, function(n) {
                if (n.nodeType !== 3) {
                    hasHTML = true;
                }
            });
            if (hasHTML) {
                var div = document.createElement('div');
                div.appendChild(selDocFrag);
                html = div.innerHTML;
                txt = this.win.getSelection() + '';
            } else {
                html = txt = selDocFrag.textContent;
            }
            ret = {
                textContent: txt,
                hasHTML: hasHTML,
                html: html
            };
        } else if (doc.selection) {
            // IE
            this.win.focus();
            txt = doc.selection.createRange();
            if (txt.text !== txt.htmlText) {
                hasHTML = true;
            }
            ret = {
                textContent: txt.text,
                hasHTML: hasHTML,
                html: txt.htmlText
            };
        } else {
            return {
                textContent: ''
            };
        }

        return ret;
    };
}

 

 

 

2. UniHTMLMemo1 -> ClientEvents -> ExtEvents -> sync fn:

function sync(sender, html, eOpts)
{
    var me=sender;
    selText=me.getSelectedText().textContent;
    if (me.selectedText != selText) {
        me.selectedText=selText;
        ajaxRequest(me, 'getSelectedText', ["textContent="+selText]);
    };
}

3.

  public
    { Public declarations }
    HTMLTextContent: string;
  end;

4. UniHTMLMemo1 -> OnAjaxEvent:

procedure TMainForm.UniHTMLMemo1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'getSelectedText' then
  begin
    HTMLTextContent := Params.Values['textContent'];
  end;
end;

5.

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  ShowMessage(HTMLTextContent);
end;

Also you can try to send to server hasHTML (boolean), html (string):

  ret = {
      textContent: txt.text,
      hasHTML: hasHTML,
      html: txt.htmlText
  };

Try,

 

Best regards,

[Tokay]

Ok, thank you! I just added your code. It works, at least under Chrome.

[Sherzod]

Ok, very good

[Tokay]

We've made a fix on the new UniGUI version (function sync removed):

function afterrender(sender, eOpts)
{
  sender.activated = true;     
  var me = sender;
  me.selectedText = "";
  setTimeout( function(){  
    me.getDoc().onselectionchange = function(e) {
      var doc = me.getDoc(),
        clip = "",          
        selDocFrag;
      var txt = '',
        hasHTML = false,
        selNodes = [],
        ret, html = '',
        textParse = '';
        //if (me.win.getSelection || doc.getSelection) {
        if (doc.getSelection || me.win.getSelection) {
            // FF, Chrome, Safari
            var sel = doc.getSelection();
            if (!sel) {
                sel = me.win.getSelection();
            }
            if (!sel.isCollapsed){
               if (clip) {
                   selDocFrag = sel.getRangeAt(0).extractContents();
               } else {
                   selDocFrag = sel.getRangeAt(0).cloneContents();
               }
               Ext.each(selDocFrag.childNodes, function(n) {
                 if (n.nodeType !== 3) {
                     hasHTML = true;
                  }
               });
              if (hasHTML) {
                 var div = document.createElement('div');
                 div.appendChild(selDocFrag);
                 html = div.innerHTML;
                 txt = sel + '';
                 var children = sel.getRangeAt(0).cloneContents().childNodes;
                 for (var i = 0; i < children.length; i++) {
                   var child = children[i];
                   textParse += child.textContent;
                   if (child.nodeName === 'DIV'){
                     textParse += '\r\n';
                   }
                 }
                 
              } else {
                 html = txt = selDocFrag.textContent;
              }
               
            }
            
            ret = {
                textContent: txt,
                hasHTML: hasHTML,
                html: html
            };
        } else if (doc.selection) {
            // IE
            me.win.focus();
            txt = doc.selection.createRange();
            if (txt.text !== txt.htmlText) {
                hasHTML = true;
            }
            ret = {
                textContent: txt.text,
                hasHTML: hasHTML,
                html: txt.htmlText
            };
        } else {
            ret = {
                textContent: ''
            };
        }
        
        me.selectedText = textParse || ret.textContent;
        return ret;
    }; 
  },1000);
}

[Tokay]

Also we've found a better solution for event. Selected text is nedded in the event handler of a button, therefor issue can be solved in this way (sample for two memos):

function click(sender, e, eOpts)
{
   var selText1 = Form1.UniHTMLMemo1.selectedText,
      selText2 = Form1.UniHTMLMemo2.selectedText;
   
   if (selText1 || selText2)
      ajaxRequest(sender, 'selectedTexts', [
         "UniHTMLMemo1="+selText1,
         "UniHTMLMemo2="+selText2
      ]);

}

Server side:

procedure TForm1.UniToolButton1AjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings);
var
 s: string;
begin
 if EventName = 'selectedTexts' then
 begin
  s := Params.Values['UniHTMLMemo1'].Trim;
  s := Params.Values['UniHTMLMemo2'].Trim;
 end;
end;

[dkeene]

Hello

I tried the following code

function click(sender, e, eOpts)
{
   var selText = ToolPaletteForm.uhLabelTextEditor.selectedText;
   
      
   ajaxRequest(sender, 'dougEvent',
                 [  
                    "uhHTMLLabelEditor="+selText
                 ]
               );         
}

 

but i only get an "undefined" for the result of uhHTMLabelEditor. Any ideas?

Thanks

Doug

[Sherzod]

10 hours ago, dkeene said:

I tried the following code

Hello,

Sorry, what do you want?

[dkeene]

When I execute the above code, the result of the parameter uhHTMLLabelEditor is 'undefined' so I am trying to read and eventually write a value representing the selected text of the uniHTMLMemo.

 

[Sherzod]

14 minutes ago, dkeene said:

When I execute the above code, the result of the parameter uhHTMLLabelEditor is 'undefined' so I am trying to read and eventually write a value representing the selected text of the uniHTMLMemo.

I do not know what code you are talking about.

But in any case, I will try to analyze what you want.

[Tokay]

I just try with 1528 version. Works fine here.

[dkeene]

Hello

I tried the following code

function click(sender, e, eOpts)
{
   var selText = ToolPaletteForm.uhLabelTextEditor.selectedText;
   
      
   ajaxRequest(sender, 'dougEvent',
                 [  
                    "uhHTMLLabelEditor="+selText
                 ]
               );         
}

 

but i only get an "undefined" for the result of uhHTMLabelEditor. Any ideas?

Thanks

Doug

[dkeene]

Sorry it's unclear, but i am executing the following code:

function click(sender, e, eOpts)
{
   var selText = ToolPaletteForm.uhLabelTextEditor.selectedText;
   
      
   ajaxRequest(sender, 'dougEvent',
                 [  
                    "uhHTMLLabelEditor="+selText
                 ]
               );         
}

 

but i only get an "undefined" for the result of uhHTMLabelEditor, which is a parameter to try to get the result of selText into the delphi environment, based on code from this thread. When I execute, i get "undefined" for the result of selText.

[Tokay]

Did you add the code to the afterrender function as I described above?

It must be added to each TUniHTMLMemo.