How to output text from a Contenteditable div to another div with jQuery

Question

I am trying to make it so that when a user presses a button after inputing text inside a content editable area it will paste it to another div based on what the user inputed in the contenteditable field. The function will paste based on each individual line the user inputs.

Below is the code provided and a picture of an example of how I want the outcome. Currently when the button is pressed it gives an output of [object Object]. Any help would be great. Thanks!

    <html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title> VERO Filter Program</title>
</head>

<body>
    <div id="pbf-container">
        <div class="pbf-header">
            <h1> VERO Filter Program </h1>
            <h3> Input Links Here </h3>
        </div>
            <div class="pbf-link-container" contenteditable="true">
            </div>
                <div class="pbf-button-control">
                    <button id="pbf-filter"> Filter </button>
                </div>
                    <div class="pbf-link-output">
                    </div>
    </div>
    <script>
        var $pbfOutput = $('.pbf-link-container[contenteditable]');
        $('#pbf-filter').click(function(){
            $('.pbf-link-output').text($pbfOutput);
        });
    </script>
</body>

</html>

Here is the css

/* DIV class and ID's */

#pbf-container {
    display: block;
    width: 1080px;
    margin: 0 auto;
    background-color: #333;
    padding: 3%;
}

.pbf-header {
    text-align: center;
}

.pbf-link-container {
    width: 1080px;
    min-height: 300px;
    background-color: #f8f8f8;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
}

.pbf-button-control {
    text-align: center;
    padding: 2%;
}

.pbf-link-output {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    color: #fff;
}

example image

`var $pbfOutput = $('.pbf-link-container[contenteditable]').text();` — Mohamed-Yousef, Jun 10 '17 at 00:39
Did you want the output as text that represents the code? Or do you want real DOM objects? — zer00ne, Jun 10 '17 at 00:43

Mohamed-Yousef · Accepted Answer · 2017-06-10T00:51:57.823

You need to use var $pbfOutput = $('.pbf-link-container[contenteditable]').text(); and wrap it in the button click function .

Note: This code if you need the .text() but if you need .html() use .html() instead of .text() for both .. you can take a look at What is the difference between jQuery: text() and html() ?

code with .text()

$('#pbf-filter').click(function(){
    var $pbfOutput = $('.pbf-link-container[contenteditable]').text();
    $('.pbf-link-output').text($pbfOutput);
});

#pbf-container {
    display: block;
    width: 1080px;
    margin: 0 auto;
    background-color: #333;
    padding: 3%;
}

.pbf-header {
    text-align: center;
}

.pbf-link-container {
    width: 1080px;
    min-height: 300px;
    background-color: #f8f8f8;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
}

.pbf-button-control {
    text-align: center;
    padding: 2%;
}

.pbf-link-output {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbf-container">
<div class="pbf-header">
    <h1> VERO Filter Program </h1>
    <h3> Input Links Here </h3>
</div>
    <div class="pbf-link-container" contenteditable="true">
    </div>
        <div class="pbf-button-control">
            <button id="pbf-filter"> Filter </button>
        </div>
            <div class="pbf-link-output">
            </div>
</div>

code with .html()

$('#pbf-filter').click(function(){
    var $pbfOutput = $('.pbf-link-container[contenteditable]').html();
    $('.pbf-link-output').html($pbfOutput);
});

#pbf-container {
    display: block;
    width: 1080px;
    margin: 0 auto;
    background-color: #333;
    padding: 3%;
}

.pbf-header {
    text-align: center;
}

.pbf-link-container {
    width: 1080px;
    min-height: 300px;
    background-color: #f8f8f8;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
}

.pbf-button-control {
    text-align: center;
    padding: 2%;
}

.pbf-link-output {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbf-container">
<div class="pbf-header">
    <h1> VERO Filter Program </h1>
    <h3> Input Links Here </h3>
</div>
    <div class="pbf-link-container" contenteditable="true">
    </div>
        <div class="pbf-button-control">
            <button id="pbf-filter"> Filter </button>
        </div>
            <div class="pbf-link-output">
            </div>
</div>

Hello, Thank you very much. The code you provided is working! I have upvoted your answer. Very much appreciated. — Andrew Lee, Jun 10 '17 at 00:52
@Publifiedlabs You're welcome but please read the full answer to know the difference between `.text()` and `.html()` .. Have a great day :-) — Mohamed-Yousef, Jun 10 '17 at 00:54
I did :), i am using html for my purpose because the link you provided says it loads faster. Thanks again and have a great day as well. — Andrew Lee, Jun 10 '17 at 00:56

How to output text from a Contenteditable div to another div with jQuery

1 Answers1