单击文本将其附加到textarea

时间:2018-03-08 14:42:41

标签: php jquery tinymce textarea

我想在TinyMCE中添加一个文本区域,并在下面的SPAN中添加一些文本。单击后我需要在textarea里面显示这个文本。文本应附加在光标位置,而不是文本末尾。我该如何修复这个php / jquery代码?

<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
  $(function() {
    tinymce.init({
    selector:'textarea', 
    formats : {
        p : {selector : 'textarea', classes : 'full'},
    },
    content_style: "body {text-align: justify;}",
    menubar:true,
    statusbar: false,

});
  });
})(jQuery);
</script>

<textarea id='mce-content-body' name='procedury'></textarea>

<table id="procedures" class="table table-striped">
<tbody>
    <tr><td class="text-center">
        <span>some text </span>
    </td></tr>

    <tr><td class="text-center">
        <span>no treatment needed, </span>
        <span>caries profunda primaria kl., </span>
        <span>caries profunda secondaria kl., </span>
    </td></tr>
</tbody>
</table>

<script>
var tinymce = $( ".mce-content-body" );
var procedures = document.getElementById('procedures');
// add one event handler to the table
procedury.onclick = function (e) {
    // normalize event
    e = e || window.event; 
    // find out which element was clicked
    var el =  e.target || e.srcElement;
    // check if it's a procedury cell
    if (el.nodeName.toUpperCase() == "SPAN") {
        // append it's content to the tinymce
        //tinymce.value += (el.textContent || el.innerText);
        // tinymce.append(el.textContent);
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, (el.textContent));
    }
}
</script>

1 个答案:

答案 0 :(得分:0)

您需要为insertContent上调用mce-content-body的范围制作onClick事件。 https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#insertcontent