Check out the documentation provided here: https://github.com/scaleflex/filerobot-image-editor
I have integrated Filerobot Image Editor into my project successfully. However, I encountered an issue where the cropping functionality works fine when triggered by a tab click, but features like contrast, brightness, and other editing functionalities do not work within the dashboard UI.
Working editor (top) vs. non-working editor (bottom): https://i.sstatic.net/CUao6i7r.png
You can find the Bootstrap component for the tabs at this link: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
Below is the code snippet of 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>
And here's the content of my JavaScript 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)
}
});
}