locked
How to Copy highlighted text to richtext box editor by adding Quote Tags using Javascript? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-424509365 posted

    I am developing website using asp.net and inside of it there is a feature like "Quote" in this website. So user have the ability to highlight the text that he want to quote and press the quote button exactl like happening in this website

    But I am not a expert in javascript. So far I achieved was this

    <script>
    function handlePaste(e) {
        var clipboardData, pastedData;

        // Stop data actually being pasted into div
        e.stopPropagation();
        e.preventDefault();

        // Get pasted data via clipboard API
        clipboardData = e.clipboardData || window.clipboardData;
        pastedData = clipboardData.getData('Text');

        // Do whatever with pasteddata
        alert(pastedData);
    }

    document.getElementById('reference-post-content').addEventListener('paste', handlePaste);
</script>

    In there if highlighted a text and press CTRL+C and then again if i press CTRL+V then it will give a popup message by displaying that highlighted text. But this is not what i wanted. What I want is that text should go to richtextbox below if user click quote btn. Also it should go to rich textbox like this.

    

message is in a thread in which the user is a THREAD_PARTICIPANT.

I'm afraid I can never state these

    I also have this impmentation. I have a tinymce rich textbox to post something.

    I found this javascript function when I inspect the elements of this website

    <script>
    $("#quote-action") != null && $("#quote-action").bind("click", function () {
        var n = null, t = $("#quote-createdby").val();
        if (window.getSelection && (window.getSelection() || window.getSelection().extentNode != null) && window.getSelection().rangeCount > 0) {
            var i = window.getSelection(), u = i.getRangeAt(0).cloneContents(), r = document.createElement("div"); r.appendChild(u); n = r.innerHTML; i.removeAllRanges()
        }
        else document.selection && (n = document.selection.createRange().htmlText, document.selection.empty()); (n == null || n == "") && (n = $("#reference-post-content").html());
        $.ajax({ type: "POST", url: "/soa/post/body/removeprettyprinttags", data: { body: n }, success: function (i) { i != null && i.result != "" && (n = i.result); tinyMCE.activeEditor.focus(); tinyMCE.activeEditor.selection.moveToBookmark(tinyMCE.activeEditor.updatedSelectionBookmark); tinyMCE.execCommand("mceInsertContent", !1, '
    ' + n + "
    "); UpdateBookmark(tinyMCE.activeEditor) }, error: function (i, r, u) { isProd || alert("Error: " + r + " " + u); tinyMCE.activeEditor.focus(); tinyMCE.activeEditor.selection.moveToBookmark(tinyMCE.activeEditor.updatedSelectionBookmark); tinyMCE.execCommand("mceInsertContent", !1, '
    ' + n + "
    "); UpdateBookmark(tinyMCE.activeEditor) } })
    });
</script>

    But still its not working

    So how to do this? Can somebody provide the code that working on this website?

    Tuesday, November 1, 2016 5:05 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User347430248 posted

    Hi Klprageeth,

    use the code mentioned below.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm9.aspx.cs" Inherits="WebApplication37.WebForm9" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    #output{
        background-color:burlywood;
    }
            </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <textarea id="quote" cols="50" rows="5">
Some text here
</textarea>
 <br/>
        
<div id="output"></div>
 
<script>
 
var quotearea = document.getElementById('quote')
var output = document.getElementById('output')
quotearea.addEventListener('mouseup', function(){
    if (this.selectionStart != this.selectionEnd){ // check the user has selected some text inside field
        var selectedtext = this.value.substring(this.selectionStart, this.selectionEnd)
        output.innerHTML = selectedtext
    }
}, false)
 
</script>
    </div>
    </form>
</body>
</html>

    output:

    Regards

    Deepak

    Wednesday, November 2, 2016 4:45 AM