0 
<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' />");

私はdivを使用して中型エディタと中型エディタのマークダウンを持っています

ユーザーが の中に入力すると.editable、textarea同期されます。

ボタンをクリックすると、画像が追加されます.editable

私の問題はマークダウンのみの更新です.editable keypress

そのため、テキストを追加すると、内部のキーをもう一度textarea押さない限り、同期しません.editable

画像を追加した後に更新するようマークダウンに指示する方法を知っている人

4

2 に答える 2

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>

于 2016-11-30T05:42:57.143 に答える
0

エディターのsetContent()方法 (ドキュメントはこちら) を使用すると、コンテンツを追加できるようになり、エディターは変更を検出して適切なイベントをすべて発生させます。これには、コンテンツが変更され、マークダウンを更新する必要があることをマークダウン拡張機能に通知することを含める必要があります。

したがって、これの代わりに：

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

これを試して：

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

これもgetContent()メソッドを活用します (ドキュメントはこちら)。

注: これらの例では、MediumEditor に 1 つのエディター要素のみを使用していることを前提としています。複数の要素を MediumEditor の 1 つのインスタンスに渡す場合、indexパラメーターの値を両方setContent()に指定する必要がある場合があります。getContent()

于 2017-02-10T08:25:12.463 に答える