Comments (5)
Image uploading is a tight integration process between the back-end and a front-end. This library (as well as TipTap) are front-end only libraries. They do not know how to upload to a server and that process can be as diverse as it gets.
Best that can be done by a front-end library is image insertion from a URL and then styling that with different styles and crops.
Keep in mind that Gutenberg is a library that has super-tight-integration with WordPress and the image upload process is very well known in comparison to this library, which doesn't assume what server architecture you have.
You can enable <img>
elements by adding the Image extension and then have it in the :extensions="[Image]"
prop. Then you need to create a block/inline tool to suit your back-end needs that can upload to your server and finally you can use the resulting url to insert the image into the editor:
editor
.chain()
.focus()
.setImage({
src: url,
alt: alt || undefined,
title: title || undefined,
})
.run();
Having said all that - my latest project's server is on Directus, and my front-end is on Nuxt, so I can add a file upload input that is scoped to certain file types, then handle the upload when the user picks a file and the server gives me a file object:
<script setup lang="ts">
const props = defineProps<{
editor: Editor;
}>();
const input = ref<HTMLInputElement | null>(null);
const assetsBase = "https://api.myserver/assets";
const handleFiles = async () => {
const { files } = input.value || {};
const [first] = files || [];
if (first) {
const data = new FormData();
data.append("file", first, first.name);
const result = await useDirectus<DirectusFiles>(uploadFiles(data));
const { id, title } = result;
const url = `${assetsBase}/${id}`;
props.editor.chain().focus().setImage({ src: url, alt: title || undefined, title: title || undefined }).run();
}
};
</script>
<template>
<!-- other stuff like show preview of previous upload and wrap the input below, since it is visually hidden -->
<input
ref="input"
accept=".jpg,.jpeg"
type="file"
class="absolute inset-0 z-[2] w-full cursor-pointer appearance-none border-none opacity-0 focus:outline-none"
@change="handleFiles"
/>
<!-- other stuff like upload button, upload progress, errors, deletion -->
</template>
As you can see - my process is most probably super specific to my needs and cannot be applied for everyone.
from gutentap.
Agree with both of you! Like @avioli says it is project specific, but we should show a couple of examples in the demo – perhaps the tiptap extension linked to plus a custom solution using a Vue component that uses something like FilePond as I think this will demonstrate how easy it is to do something custom.
from gutentap.
@johnpuddephatt - I wonder if the demo can show use of an Image by simply asking for a URL.
from gutentap.
@fasthold Alternatively you can use an upload image extension like this one: https://github.com/carlosvaldesweb/tiptap-extension-upload-image
from gutentap.
@johnpuddephatt That's a very good idea, although I've used FilePond in a couple of projects and I'm not sure it will work great within a contenteditable
area, but I'll be happy to be proven wrong!
from gutentap.
Related Issues (8)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gutentap.