자바 스크립트 중간 편집기 인하의 APPEND 이미지와 업데이트 내용

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

나는 사업부 사용 매체 편집기 & 중간 편집기 인하가자바 스크립트 중간 편집기 인하의 APPEND 이미지와 업데이트 내용

.editable의 내부 사용자 유형, textarea 동기화 할 때이있다. 나는 또한 버튼 클릭을

는, 내가 내부에 키를 누릅니다 아니라면 .editable keypress

내가, 텍스트, textarea 늘 동기화를 추가하면 때 내 문제는 인하는 업데이트됩니다 .editable

에 이미지를 추가합니다 .editable의 다시

사람이

출처

2016-11-30 Benjamin W

이

을 시도 APPEND 이미지 후 업데이트하는 인하에게하는 방법을 알고

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-30 05:42:57

과 같은 많은 매개 변수에 대해 index 매개 변수의 값을 지정해야 할 수도 있습니다. 그것은 작동하지만, 나는 당신의 updateTextArea (index, editable)에 2 개의 param을 가지고있다. 어떻게 $ ('. editable')에 그것들을 전달하지 않았는가? each (updateTextArea); –

'$ (selector) .each' 호출은 인덱스와 요소 인 두 개의 매개 변수를 가진 함수입니다. jquery selector는 모든 일치하는 요소를 선택하고 요소의 각 요소에 대해 index와 요소로 지정된 함수를 호출합니다. 코드가 귀하의 필요를 충족 시키면 답변을 수락하십시오. –

다른 문제가 발생하면 내 텍스트 영역이 더 이상 동기화되지 않으므로 이미지를 추가 한 후 텍스트를 입력 할 때 더 큰 텍스트가 표시되지 않음 –

을 시도 코드 에디터 (문서 here)의 setContent() 방법을 사용하는 경우,이 콘텐츠를 추가 할 수 및 편집기가 감지 것입니다 모든 적절한 사건을 변경하고 해고하십시오. 여기에는 마크 다운 확장 프로그램에 콘텐츠가 변경되었으며 마크 다운을 업데이트해야한다는 알림이 포함되어야합니다. 대신이의 그래서

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

이 시도 :

는

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

이것은 또한 getContent() 방법 (문서 here)를 활용합니다.

참고 :이 예제는 MediumEditor에 대해 하나의 편집기 요소 만 사용한다고 가정합니다. MediumEditor의 단일 인스턴스에 여러 요소를 전달하는 경우 setContent() 및 getContent()

출처

2017-02-10 08:25:12

자바 스크립트 중간 편집기 인하의 APPEND 이미지와 업데이트 내용

답변

관련 문제