Javascript medium-editor markdown 追加图片和更新内容

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

我有一个 div 使用 medium-editor & medium-editor markdown

当用户在 .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 的单个实例中，您可能需要为 setContent() 和 getContent()

的 index 参数指定一个值

Javascript medium-editor markdown 追加图片和更新内容

Javascript medium-editor markdown append image and update content

javascript

jquery

markdown

medium-editor

Javascript medium-editor markdown 追加图片​​和更新内容

Javascript medium-editor markdown append image and update content

javascript

jquery

markdown

medium-editor

Javascript medium-editor markdown 追加图片和更新内容