How to add image from computer in Quill JS? - javascript

It is possible to add a image into quill JS editor from a url but can't find a way to add an image from computer like all the traditional rich text editors do.
Is there any way that serves this purpose?

You can do the following:
quill.getModule("toolbar").addHandler("image", () => {
this.selectLocalImage();
});
function selectLocalImage() {
var input = document.createElement("input");
input.setAttribute("type", "file");
input.click();
// Listen upload local image and save to server
input.onchange = () => {
const file = input.files[0];
// file type is only image.
if (/^image\//.test(file.type)) {
this.saveToServer(file, "image");
} else {
console.warn("Only images can be uploaded here.");
}
};
}
function saveToServer(file) {
// Upload file to server and get the uploaded file url in response then call insertToEditor(url) after getting the url from server
}
function insertToEditor(url) {
// push image url to editor.
const range = quill.getSelection();
quill.insertEmbed(range.index, "image", url);
}

This is simple. Simply add a button with a class of ql-image.
Example below:
<div id="toolbar" class="toolbar">
<span class="ql-formats">
<button class="ql-image"></button>
</span>
</div>
Finally, instantiate Quill with the toolbar container set to your toolbar element:
var quill = new Quill('#editor', {
modules: {
toolbar: {
container: '#toolbar'
}
},
theme: 'snow'
});
This will add the image to the content editable area you have as a base 64 encoded string on an img element.

Related

How can I get my image replacing javascript code to work in an external .js file

So I'm new to web development (career change) and I'm hitting a roadblock that I can't seem to get past.
I'm trying to write a script that will change the img src in my HTML. When I use inline JavaScript it does what I want and replaces the image:
<img id="book1" src="placeholder" alt="Book1">
<h5 class="title">TITLE by Author Name</h5>
<p>Book description</p>
<div class="center">
<button type="button" class="amz-btn" id="btn1" onclick="showImage()">Buy from Amazon</button>
<script type="text/javascript">
function showImage() {
let image = document.getElementById("book1");
if (image.src.match("placeholder")) {
image.src = "https://storage.googleapis.com/du-prd/books/images/9781538728529.jpg";
} else {
console.log("This is frustrating");
}
}
</script>
But when I transfer it to my external .js file I get a syntax error saying showImage is not defined.
How can I resolve this?
Here is the code as written just in the external file
document.getElementById("btn1").addEventListener("click", showImage)
function showImage() {
let image = document.getElementById("book1");
if (image.src.match("placeholder")) {
image.src = "https://storage.googleapis.com/du-prd/books/images/9781538728529.jpg";
}
else {
console.log("This is frustrating");
}
}
Someone suggested that I use addEventListener rather than onclick in the HTML so I've done that but I'm confident it's in entirely the wrong place and doing the wrong thing
I've tried running the following in the browser console and it runs perfectly but I still can't get it to work from the external file
const img = "https://storage.googleapis.com/du-prd/books/images/9781538728529.jpg";
document.getElementById("btn1").addEventListener("click", showImage);
function showImage() {
document.getElementById("book1").src = img;
}
Issue resolved!
const img = "https://storage.googleapis.com/du-prd/books/images/9781538728529.jpg";
document.getElementById("btn1").addEventListener("click", showImage);
function showImage() {
document.getElementById("book1").src = img;
}
The reason the above wasn't working was because I did something wrong with the window.addEventListener('load', (event) => { // all code here; }); but after removing that the image appears on a button click

Forge Viewer: Autodesk.BoxSelection extension bug

On the project where I work (React, TS), we use the viewer and added the Box Selection extension for it.
The first time you activate it with a button in the toolbar, the extension works, the elements are highlighted. Then you can switch to another mode, for example, the orbit mode. And after that, when you click on the button that activates the "box Selection extension", the extension no longer works. The orbit mode remains working.
At the same time, the button is clicked (console.log() is fired) and the loadExtension('Autodesk.Box Selection') method works.
What could be the problem?
I will give some code snippets
This is the extension code:
export default function RectangleSelectionExtension(
this,
viewer,
options,
) {
window.Autodesk.Viewing.Extension.call(this, viewer, options);
}
RectangleSelectionExtension.prototype = (
Object.create(window.Autodesk.Viewing.Extension.prototype)
);
RectangleSelectionExtension.prototype.constructor = RectangleSelectionExtension;
RectangleSelectionExtension.prototype.load = () => true;
RectangleSelectionExtension.prototype.unload = () => true;
RectangleSelectionExtension.prototype.onToolbarCreated = function onToolbarCreated() {
this.group = this.viewer.toolbar.getControl('allExtensionsToolbar');
if (!this.group) {
this.group = new window.Autodesk.Viewing.UI.ControlGroup('allExtensionsToolbar');
this.viewer.toolbar.addControl(this.group);
}
// Add a new button to the toolbar group
this.button = new window.Autodesk.Viewing.UI.Button('RectangleSelectionExtension');
this.button.onClick = async () => {
const boxSelectionExtension = await this.viewer.loadExtension('Autodesk.BoxSelection');
this.viewer.toolController.activateTool(boxSelectionExtension.boxSelectionTool.getName());
boxSelectionExtension.addToolbarButton(this.viewer);
};
this.button.setToolTip('Select within a rectangle area');
this.button.addClass('RectangleSelectionExtension');
this.group.addControl(this.button);
};
window.Autodesk.Viewing.theExtensionManager.registerExtension('BoxSelection', RectangleSelectionExtension);
Next, in the Viewer component, we import and register the extension:
window.Autodesk.Viewing.theExtensionManager.registerExtension('RectangleSelectionExtension', RectangleSelectionExtension);
And this is how we initialize the viewer:
window.Autodesk.Viewing.Initializer(options, () => {
const container = document.getElementById('forgeViewer');
if (container) {
viewer = new window.Autodesk.Viewing.GuiViewer3D(
container,
{
token,
extensions: [
/* ...some extensions */
'RectangleSelectionExtension',
],
},
);
const startedCode = viewer.start();
if (startedCode > 0) {
return;
}
/* ...some eventListeners */
}
I'm not sure I understand the purpose of your RectangleSelectionExtension. From the code it looks like it just adds a button in the toolbar, and clicking that button repeatedly loads another extension (Autodesk.BoxSelection), repeatedly activates the box selection tool, and repeatedly adds the box selection button to the toolbar. That doesn't seem right.
If you're simply interested in the box selection, you can load it (and include it in the toolbar) like so:
// ...
viewer = new window.Autodesk.Viewing.GuiViewer3D(
container,
{
token,
extensions: [
/* ...some extensions */
'Autodesk.BoxSelection',
]
}
);
// and later ...
const boxSelectionExt = viewer.getExtension('Autodesk.BoxSelection');
boxSelectionExt.addToolbarButton(true); // Add the button to the toolbar
boxSelectionExt.addToolbarButton(false); // Remove the button from the toolbar
// ...

EditorJS autofocus on click

I`m using EditorJS (https://editorjs.io/)
I have a hidden div with editor holder in it and a separate button (Add new for ex)
I need this div to appear when user click on the button
everything is working fine
but I can't set up autofocus so that the user doesn't click on the holder to start working with editor
i tried doing
setTimeout(function(){ $('#editor').click()}, 100);
but it doesn't work
If I understood your growth correctly
https://editorjs.io/configuration#autofocus
There a config key:
const editor = new EditorJS(
autofocus: true
})
Ok, here is the solution:
<div id="editorjs"></div>
<button id="focus">focus</button>
And initialization :
const editor = new EditorJS({
holder: 'editorjs',
onReady: function () {
const btn = document.querySelector("#focus");
btn.addEventListener("click", () => editor.focus())
}
})
And link for example : https://codepen.io/Ashley100/pen/mdEqoRY?editors=1010

How to preview pdf using react dropzone

Im having a hard time figuring out how to preview PDFs that I'm uploading using react-dropzone. PNG and JPG are working perfectly but I would also like to be able to show the user either the pdf itself or an image of the pdf.
Here's my code:
handleImageDrop = (files) => {
const currentFile = files[0]
const reader = new FileReader()
reader.addEventListener("load", () => {
this.setState({
imgSrc: reader.result
})
}, false)
reader.readAsDataURL(currentFile)
}
render() {
const { imgSrc } = this.state;
<div>
<Dropzone
onDrop={this.handleImageDrop}
multiple={false}>
{({getRootProps, getInputProps}) => {
return (
<div
{...getRootProps()}
>
<input {...getInputProps()} />
{
<p>Try dropping some files here, or click to select files to upload.</p>
}
</div>
)
}}
</Dropzone>
{ imgSrc ? <img src={imgSrc}/> : null}
</div>
</div>
)
}
}
It cannot be as simple as showing an image in a <img> tag but you could try some external library to display pdf files. Maybe have a try with react-pdf
I used PDF.js to render the PDF files. I set up a custom preview template with a canvas element and added a function in the "init" configuration that triggers when a file has been added and uses PDF.js to draw the first page of the file on the canvas.

Vue/Vuefire: Ok, I can open a modal, save a image file to firebase, but can't get it to view without a refresh

Lots of pieces, got them all working except one!
I can open a modal window, do a firebase image upload (with the correct call back to make sure the upload worked), save the image to firebase storage (using vuefire). And close the modal.
The image DOES NOT show up until I do a manual refresh, then displays fine. Also if the image has been cached, it works OK. Just can't figure out why I can't view the new image without that manual refresh.
CODE
HTML to Display image: edit.vue
<div>
<img :src="showPhoto()" id="showPhoto" name="showPhoto" />
</div>
VUE code to populate html and open modal
showModal: function() {
this.$modal.show('save')
},
showPhoto: function () {
const photoName = this.residentObj['photo']
console.log('photoName', photoName)
if (photoName) {
const gsReference = storage.refFromURL('gs://connect-the-dots-ef09c.appspot.com/images/' + this.$route.params.id +
'/' + photoName).getDownloadURL().then(function(url) {
var img = document.getElementById('showPhoto')
img.src = url
})
}
}
Save uploaded image close modal, go back the parent page. I can push a new route, but that has no effect even though the image has changed.
save.vue
methods: {
onFileChange(e) {
const file = e.target.files[0];
const storageRef = firebase.storage().ref('images/' + this.$route.params.id + '/' + file.name);
residentsRef.child(this.$route.params.id).update({photo:file.name});
storageRef.put(file).then(function(result) {
alert("OK, file uploaded!")
// this has no effect, and probably dont want to refresh the entire page this the "img src"
// this.$router.push({name: 'edit', params: { id: this.$route.params.id }});
}});
this.closeModal ()
});
Summary: I can save an image to firebase using vue/vuefire, but can't view the new image unless I do a manual refresh. A cached image works fine.
Thanks for any tips.

Categories

Resources