We Keep Coding

CKEditor5 : how to add id attribute to img tag when image uploaded?

I'm using classic editor of CKEditor 5.
And the image upload adapter is using base64 upload adapter.
And my work environment is HTML + CSS + bootstrap + vanilla JS. Node.js is not used.
What I'm trying to do is as follows.
The user uploads the image
When the image is uploaded, Sets the id attribute of the image tag.
The id attribute of the img tag of the final output is output to the value set above.
Perhaps the final result is as follows.
<figure class="image">
<img src="{some image source...}" id="{some id that setted from above.}">
</figure>
First, I needed an event called when the image was uploaded.
When I looked up the official document, I found the following code sample.
const imageUploadEditing = editorRef.plugins.get('ImageUploadEditing');
imageUploadEditing.on('uploadComplete', (evt, { data, imageElement} ) => {
editorRef.model.change( writer => {
writer.setAttribute('id', '1121212', imageElement);
});
});
At first, I probably just run the above code, and the id attribute of the img tag of the final result is '11212' (just temporary data) I thought it would be set to have no.
but the id did not change at the time of editing or when the final markup data was calculated by calling the editor.getData().
So I looked up a little more and found that CKEditor5 was separated into two layers, model and view, and the code I ran earlier was like a code that modified the model, not the view (HTML markup data that the actual user sees).
Therefore, I added the downcast setting by referring to the official document as follows.
editorRef.model.schema.extend('imageBlock', { allowAttributes: ['imageID'] })
editorRef.conversion.for('downcast').attributeToAttribute({
model: {
name: 'imageBlock',
key: 'imageID'
},
view: 'id'
});
I think if i set it as above, the imageID attribute of the model is set when the image is uploaded, and when the model data is downcast and converted to View (like editor.getData() is called or whatever), the image element is found in the model and the imageID attribute is copied to the img HTML tag's id attribute
However, no changes were found in the editing point or HTML output.
Did I understand anything wrong? I just want to set an attribute when the image is uploaded, but I don't know what's so complicated Please help me.

TinyMCE image custom hash

I'm working with TinyMCE editor with some old webpage content.
All HTML content could contain "links" to images in format ".. <img src="##IMAGE:1234##"/> ..".
I need to show image in HTML preview, but in code it has to stay in format "..<img src="##IMAGE:1234##"/>.."
I know URL to download/inline all images =>
http://example.com/images/1234
Do I need to parse editor content, replace IMG src by URL + ID from original IMG src (##IMAGE:1234##).
Is there some way, how to have in HTML code mode something like this "..<img src="##IMAGE:1234##"/>..", but in preview mode have image displayed?
Thanks

TinyMCE relies on the browser to render the HTML that you give to the editor. As the current src you are providing is not valid the image won't show.
What I would suggest is to use a data-xxx to store the value you need and programmatically set the src attribute when you place the content into the editor.
For example...
You might store the image tag in your database as <img data-imgsrc="##IMAGE:1234##" />. When you get ready to load the content into the editor add the src attribute to the image tag so you end up with <img data-imgsrc="##IMAGE:1234##" src='http://example.com/images/1234' />. This allows the editor to render the images.
When you go to save the HTML content back to the database you can remove the src attribute from any image that also has the data-imgsrc attribute (assuming you need to do this for some reason).

Trying to show image HTML using database

I am trying to create an animal's database, for an animal shelter. So far, what I have is a set of tables with the animal's species and when the user chooses the species it shows all animals available. Now I want the user to click on the animal chosen and more details about that animal, such has, location, gender, size, will show. Problem is, I know very little about Javascript/ HTML and I am encountering lots of issues. One of them is showing the image in this third screen of more details. What I have so far with HTML is:
<div class="row" style="text-align: center">
<img src="foto_animal" height="180">
</div>
"foto_animal" is the column in table "Animal" that holds the Image URL. Is there anything I should change with Javascript or is it just a HTML problem? Thanks in advance.
EDIT
I manage to get the URL, this is the script.js file
var populateContact = function(data) {
$('#contact_photo').text(data.foto_animal);
This is the index.html
<h2><span id="contact_photo"></h2>
It shows the URL, but now I want it to be recognize as an image.

EDIT : To have your users download the as requested i nthe comments, try adding a tag and setting it's download property.
Here is an example.
Via html, when referencing an image in src property of the <img> tag, add the file extension of your image file
assuming your foto_animal is a jpeg file and in the same location with the html files,
<img id='myImg' src="foto_animal.jpg" height=180px>
Via javascript,
You simply call the element using document.getElementByID and set the .src property
document.getElementById("myImg").src = "foto_animal.jpg";
Via jquery,
Simply use the .attr property to set src of your tag ID
$("#myImg").attr('src', 'foto_animal.jpg');

Adding an uploaded file as an <image> element in an SVG

If someone uploads an image with a <input type="file"/>, there are a million different ways to add the image somewhere as an <img> element or onto a <canvas>. I want to instead add it as an <image> element in an SVG and I'm totally stymied.
If I add the uploaded file to a canvas and use canvas.getDataURL(), I get a valid data URL that I can use as a background image or whatever. But setting the xlink:href of an <image> element to that URL does nothing. I've also tried adding the file directly without the canvas step, e.g.:
$("#file").on("change",function(){
$("image").attr("xlink:href",this.files[0]);
});
That seems to do something but still the image won't display. I have a width and height set on it. I've also tried various Blob URL methods and those all don't do anything.
How can I take the image file from a file input and display it as an <image> element in an SVG?
Any assistance much appreciated.

The this.files[0] returns a File object. The xlink:href attribute assigment takes string. The automatic conversion of File object to string results in the attribute being assigned the string "[object File]".
You could read the file as a data URL and then assign the data URL to the href attribute. As mentioned in comment by Robert Longson, using JQuery with SVG attribute requiring namespace can sometimes cause problems. I would suggest setting attribute using plain DOM. For example...
var xlinkNS = "http://www.w3.org/1999/xlink";
$("#file").on("change",function(){
var reader = new FileReader();
reader.onload = function (e) {
$("image")[0].setAttributeNS(xlinkNS, "href", e.target.result);
};
reader.readAsDataURL(this.files[0])
});

Reference the same javascript file in SVG image and HTML Page

I have an html page with an svg image embedded on it.
The SVG image is in a separate file. The SVG image references a javascript file which performs some image positioning functions.
The HTML page references the same javascript file and has a control for zooming into the image and resetting the image zoom and position, the functionality of this is implemented in the javascript file.
What I want to do is when the image is re positioned set a flag so that the I know when to show and hide the reset image button on the html page.
Because I have referenced this javascript file twice I have 2 separate versions running and hence the flag being set by the svg reference isn't the same flag being read by the html reference. The problem is that the image positioning is initiated by the svg image and the zooming is initiated by the html page.
Any ideas how I can solve this problem?

May I suggest you do the following, let the script inside the SVG hide/show the button by calling the html page script.
The external script you access like this:
window.parent.toggleButton();
Then the button itself could be your "flag", if it is hidden or not.
I also found this code, which exist in the SVG file, where you can pass a reference to the SVG's clicked element to your html page:
function sendClickToParentDocument(evt)
{
// SVGElementInstance objects aren't normal DOM nodes,
// so fetch the corresponding 'use' element instead
var target = evt.target;
if(target.correspondingUseElement)
target = target.correspondingUseElement;
// call a method in the parent document if it exists
if (window.parent.svgElementClicked)
window.parent.svgElementClicked(target);
}
Src: https://stackoverflow.com/a/10516723/2827823