<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
我的问题是markdown仅在.editable keypress
时更新
因此,如果我附加文本,textarea
将不会同步,除非我再次按 .editable
内的任意键
有人知道如何告诉 Markdown 在附加图像后更新
最佳答案
试试这个
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"><p>Textarea is now supported</p></textarea>
<input type="button" id="addImage" value="Add Image">
<input type="button" value="Alert textarea content" onclick="alert(document.getElementById('markdown').value)">
</div>
关于Javascript中编辑器Markdown附加图像并更新内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40880556/