Javascript среднего редактор уценки Append изображение и обновление содержимого

Question

<div class="editable" contenteditable="true"></div> 
<textarea name="markdown" class="markdown" /></textarea>//display none 

new MediumEditor('.editable', { 
    extensions: { 
     markdown: new MeMarkdown(function (md) { 
      document.querySelector(".markdown").textContent = md; 
     }), 
     img: new imgButton() 
    } 


$('.editable').append("<img src='abc' />"); 

У меня есть использование ДИВА средний редактор & среднего редактор уценка

когда тип пользователя внутри .editable, textarea будет синхронизироваться.

У меня также есть кнопка, нажмите, он будет добавлять изображения в .editable

моя проблема уценки обновление только при .editable keypress

так, если я добавить текст, textarea обыкновение синхронизации, если я не нажать любую клавишу внутри из .editable снова

кто-нибудь знает, как сказать уценки, чтобы обновить после дописывания изображения

Answer 1

попробовать этот

function updateTextArea(index,editable){ 
    var textarea = editable.parentNode.querySelector('textarea[medium-editor-textarea-id="' + editable.getAttribute('medium-editor-textarea-id') + '"]'); 
    if (textarea) { 
     textarea.value = editable.innerHTML.trim(); 
    } 
} 

$('.editable').append("<img src='abc' />"); 
$('.editable').each(updateTextArea); 

Функция updateTextArea будет обновлять текстовую область, соответствующую редактируемой области.

Вот код, который я попытался

var editor = new MediumEditor('.editable', { 
 
      buttonLabels: 'fontawesome' 
 
     }); 
 
      function updateTextArea(index,editable){ 
 
       var textarea = editable.parentNode.querySelector('textarea[medium-editor-textarea-id="' + editable.getAttribute('medium-editor-textarea-id') + '"]'); 
 
       if (textarea) { 
 
        textarea.value = editable.innerHTML.trim(); 
 
       } 
 
      } 
 
    $("#addImage").click(function(){ 
 
     $('.editable').append("<img src='abc' />"); 
 
     $('.editable').each(updateTextArea); 
 
    }); 
 
$('.editable').change(updateTextArea);

<link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/themes/tim.min.css" rel="stylesheet"/> 
 
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet"/> 
 
<link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/medium-editor.min.css" rel="stylesheet"/> 
 
<script src="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/js/medium-editor.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div id="container"> 
 
     <h1>Medium Editor</h1> 
 
     <textarea class="editable medium-editor-textarea" name="markdown" id="markdown">&lt;p&gt;Textarea is now supported&lt;/p&gt;</textarea> 
 
     <input type="button" id="addImage" value="Add Image"> 
 
     <input type="button" value="Alert textarea content" onclick="alert(document.getElementById('markdown').value)"> 
 
    </div>

Answer 2

Если вы используете setContent() метод редактора (документации here), это позволит вам добавить контент и редактор будет детектировать изменить и запустить все соответствующие события. Это должно включать уведомление о расширении разметки, которое содержимое изменило, и которое должно обновить уценку.

Таким образом, вместо этого:

$('.editable').append('<img src="abc" />'); 

Попробуйте это:

editor.setContent(editor.getContent() + '<img src="abc" />'); 

Это также использует метод getContent() (документация here).

ПРИМЕЧАНИЕ. В этих примерах предполагается, что вы используете только один элемент редактора для MediumEditor. Если вы передаете несколько элементов в один экземпляр MediumEditor, вам может потребоваться указать значение для параметра index как для setContent(), так и для getContent()