You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Jun 15, 2021. It is now read-only.
functionscribePluginUploadImageCommand(commands){functionopenSystemFileSelectDialog(callback){constinput=document.createElement('input');input.type='file';input.accept='image/*';input.onchange=callback;input.click();}returnfunction(scribe){constuploadImageCommand=newscribe.api.Command('insertHTML');uploadImageCommand.execute=functionexecute(){constselection=newscribe.api.Selection();// open system file select dialogopenSystemFileSelectDialog((e)=>{// read image file as data urlconstreader=newFileReader();reader.onload=(event)=>{// show image previewconstdialogElement=document.createElement('div');constimageElement=document.createElement('img');constbuttonElement=document.createElement('a');constinputElement=document.createElement('input');imageElement.src=event.target.result;imageElement.width=200;imageElement.height=200;inputElement.type='text';inputElement.placeholder='image title'buttonElement.href='javascript:void(0);';buttonElement.innerHTML='add';buttonElement.onclick=()=>{// focus to editor// scribe.el.focus();// restore selectionselection.selectMarkers();// confirm to add to editorscribe.api.SimpleCommand.prototype.execute.call(this,`<img title="${buttonElement.value}" src="http://idolosol.com/images/fd-1.jpg">`);};dialogElement.appendChild(imageElement);dialogElement.appendChild(inputElement);dialogElement.appendChild(buttonElement);dialogElement.style.cssText='position: absolute;top: 10%;left: 15%;width: 200px;height: 300px;';// save selection before show dialogselection.placeMarkers();document.body.appendChild(dialogElement);};reader.readAsDataURL(e.target.files[0]);});};scribe.commands.uploadImage=uploadImageCommand;};}
use my upload plugin
add a button to toolbar(use toolbarPlugin), data-command-name="uploadImage"
then i click focus to input, type "my title", and click "add", nothing can be insert to editor.
debug and found: when i call placeMarkers, after will trigger observeDomChanges, selection remove by:
/** * Apply the formatters when there is a DOM mutation. */varapplyFormatters=function(){if(!scribe._skipFormatters){varselection=newscribe.api.Selection();varisEditorActive=selection.range;varrunFormatters=function(){if(isEditorActive){selection.placeMarkers();}scribe.setHTML(scribe._htmlFormatterFactory.format(scribe.getHTML()));selection.selectMarkers();}.bind(scribe);// We only want to wrap the formatting in a transaction if the editor is// active. If the DOM is mutated when the editor isn't active (e.g.// `scribe.setContent`), we do not want to push to the history. (This// happens on the first `focus` event).// The previous check is no longer needed, and the above comments are no longer valid.// Now `scribe.setContent` updates the content manually, and `scribe.pushHistory`// will not detect any changes, and nothing will be push into the history.// Any mutations made without `scribe.getContent` will be pushed into the history normally.// Pass content through formatters, place caret backscribe.transactionManager.run(runFormatters);}deletescribe._skipFormatters;}.bind(scribe);observeDomChanges(scribe.el,applyFormatters);
how can i fix?
The text was updated successfully, but these errors were encountered:
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.
I add a command to upload image by this:
then i click focus to input, type "my title", and click "add", nothing can be insert to editor.
debug and found: when i call
placeMarkers
, after will triggerobserveDomChanges
, selection remove by:how can i fix?
The text was updated successfully, but these errors were encountered: