CODEWITHSUNDEEP
javascriptjquerytinymce
Ali Sheikhpour
Ali Sheikhpour

Reputation: 11096

inline tinymce editor does not trigger input event

Using tinyMCE I am using an inline editor. I have set oninput to copy the updated texts into a textarea.

When I update texts manually, the changes are being copied to the textarea. But when I use editing options like BOLD, UNDERLINE etc, those formatting codes are not being copied to the target textarea unless I modify something manually after that changes.

I guess using those formatting options are not triggering input event. Please advise.

$(window).on("load",function(){
    tinymce.init({
        selector:'.editable',
        menubar: false,
        statusbar: false,
        plugins: "lists",
        inline: true,
        toolbar: [
            'bold italic underline | numlist bullist'
        ],
        valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li'
    })
})


function updateTextarea(id){
    var newText = $('#editable'+id).html();
    $('#textarea'+id).html(newText);
}
.editable{
  border:1px dashed #aaaaaa;
  padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js"></script>

<div class="editable" id="editable1" oninput="updateTextarea('1')">
Edit this text. It will update the textarea. Make it bold, Target wont update
</div>

<br><br>

<strong>Target Textarea:</strong>

<textarea id="textarea1" style="width:100%;height:40px;"></textarea>

Upvotes: 0

Views: 113

Answers (1)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11096

I added setup option to the textarea which can translate the change event into the update logic:

setup: function (editor) {
    editor.on('change', function (e) {
    //Get the id of editor and extract the desired ID:
    updateTextarea(editor.id.replace("editable",""))
    });
}

try the snippet and check the output:

$(window).on("load",function(){
    tinymce.init({
        selector:'.editable',
        menubar: false,
        statusbar: false,
        plugins: "lists",
        inline: true,
        toolbar: [
            'bold italic underline | numlist bullist'
        ],
        valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
        
        setup: function (editor) {
          editor.on('change', function (e) { 
             //Get the id of editor and extract the desired ID:  
              updateTextarea(editor.id.replace("editable",""))
          });
        }
    
    })
})


function updateTextarea(id){
    var newText = $('#editable'+id).html();
    $('#textarea'+id).html(newText);
}
.editable{
  border:1px dashed #aaaaaa;
  padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js"></script>

<div class="editable" id="editable1" oninput="updateTextarea('1')">
Edit this text. It will update the textarea. Make it bold, Target wont update
</div>

<br><br>

<strong>Target Textarea:</strong>

<textarea id="textarea1" style="width:100%;height:40px;"></textarea>

Upvotes: 0

Related Questions