Inserting data into opencart editor on onclick over data

Question

I am doing an opencart project now, I need to append or insert some shotcodes into opencart editor on onclick over shotcodes given below the editor. Shotcodes are some words like 'Facebook', 'youtube', etc.. . Code is given below:

<span style=" background-color: #dedede;    border-radius: 5px;    color: #000;    margin: 0px 5px 5px 0px;    padding: 5px;        float:left;     cursor:pointer;" onclick="enterShortcode('<Facebook>')">&lt;Facebook&gt;</span>
<span style=" background-color: #dedede;    border-radius: 5px;    color: #000;    margin: 0px 5px 5px 0px;    padding: 5px;        float:left;     cursor:pointer;" onclick="enterShortcode('<Youtube>')">&lt;Youtube&gt;</span>

How can I write code in js "function enterShotcode(shot){}" to insert selected shotcode into Opencart editor. I did similar function in Froala editor as:

<section id="editor"><textarea id='edit' name="edit" style="margin-top: 30px;"></textarea></section>
<script>
function enterShortcode(id)
{
var txt=$("#edit").editable("getHTML")+" "+id;
  $("#edit").editable("setHTML",txt, false);
  $("#edit").val(txt);
}
</script>

Kindly help me to write code for inserting shotcode into opencart editor.

Answer 1

Friends I got a solution, by using this code I can able to fetch data from editor(WYSIWYG Editor). Code is given below,

<textarea name="printContent" placeholder="Receipt content" id="printContent"></textarea>
<span onclick="enterShortcode('<Facebook>')">&lt;Facebook&gt;</span>
<script>
function enterShortcode(text)
{
var sHTML = $('#printContent').code();
sHTML = $('#printContent').code();
alert(sHTML); // will alert HTML code inside editor
$('#printContent').val(sHTML+text);  // will write code into editor or append
}
</script>

Here is a helping link:http://summernote.org/#/getting-started it works for Opencart.