Open aayalapalacin opened 3 weeks ago
https://github.com/scaleflex/filerobot-image-editor/assets/95265085/6bbb0aee-172b-43df-8007-68d44672dce9
Image editor is working in my project, but I want it to only render when I click on a tab, but for some reason the editing functionality isn't working anymore.
here is the bootstrap component: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
here's my component:
<nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="text-editor-tab" data-toggle="tab" href="#text-editor" role="tab" aria- controls="text-editor" aria-selected="true" > Text Editor </a> <a class="nav-item nav-link" id="edit-photo-tab" data-toggle="tab" href="#edit-photo" role="tab" aria-controls="edit-photo" aria-selected="false" > Edit Photo </a> <a class="nav-item nav-link" id="advanced-info-tab" data-toggle="tab" href="#advanced-info" role="tab" aria-controls="advanced-info" aria-selected="false" > Advanced Info </a> <a class="nav-item nav-link" id="image-info-tab" data-toggle="tab" href="#image-info" role="tab" aria-controls="image-info" aria-selected="false" > Image Info </a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="text-editor" role="tabpanel" aria-labelledby="text-editor-tab"> <textarea class="ckeditor" style="width:99%;" id="editor1" name="content"></textarea> </div> <div class="tab-pane fade" id="edit-photo" role="tabpanel" aria-labelledby="edit-photo-tab"> <div id="image-editor" ></div> </div> <div class="tab-pane fade" id="advanced-info" role="tabpanel" aria-labelledby="advanced-info-tab">advanced info</div> <div class="tab-pane fade" id="image-info" role="tabpanel" aria-labelledby="image-info-tab">image info</div> </div> <script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js?func=proxy"></script> <script src="../RFAssets/js/edit-image.js" ></script> <script src="/RFassets/js/ckeditor.js"></script>
here is my js file:
window.onload = function() { const imageSrc = document.getElementById('rfzone-001').src; console.log("imageSrc",imageSrc) const container = document.getElementById("image-editor"); const config = { source: imageSrc }; const ImageEditor = new window.FilerobotImageEditor(container, config); ImageEditor.render({ // additional config provided while rendering observePluginContainerSize: true, onBeforeSave: () => { return false; }, onSave: (imageInfo, designState) => { console.log("yeah", imageInfo,designState) } }); }
https://github.com/scaleflex/filerobot-image-editor/assets/95265085/6bbb0aee-172b-43df-8007-68d44672dce9
Image editor is working in my project, but I want it to only render when I click on a tab, but for some reason the editing functionality isn't working anymore.
here is the bootstrap component: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
here's my component:
here is my js file: