I don't know why I added the src attribute to the select-image tag, but it doesn't appear in the 'canvas' section of GrapesJs

[Hunganh3012]

I have 2 components
+1 component using the library grapesjS

• The remaining component is used to attach the image path. You can see the code

I live in VietNam so English is not perfect. i really need help

This is component 1: use grapes.
fie html:

<div class="panel__top">
  <div class="panel__basic-actions"></div>
  <div class="panel__devices">
    <div class="btn-save-grapejs">
        <button class="btn-primary btn-sm" (click)="Save()">Lưu trang</button>
    </div>
</div>
<div class="panel__switcher"></div>
</div>
<div class="editor-row">
    <div class="editor-canvas">
        <div id="gjs">

        </div>
    </div>
</div>
<div id="blocks"></div>

file ts:

import {
    AfterViewInit,
    Component,
    ElementRef,
    OnChanges,
    OnInit,
    SimpleChanges,
    ViewChild,
    ViewEncapsulation,
} from '@angular/core';
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-preset-webpage';
import 'grapesjs-blocks-basic';
import 'grapesjs-preset-newsletter';
import 'grapesjs-lory-slider';
import customCodePlugin from 'grapesjs-custom-code';
import { NzModalService } from 'ng-zorro-antd/modal';
import { MenuFormComponent } from '@htw-nx/features/cms/setting/ui';
/* eslint-disable */
// eslint-disable-next-line quotes
import { saveAs } from "file-saver";

@Component({
    selector: 'grapes',
    templateUrl: './grapes.component.html',
    styleUrls: ['./grapes.component.css'],
    // ChangeDetectionStrategy.OnPush
})
export class GrapesComponent implements OnInit, AfterViewInit, OnChanges {
    @ViewChild('idmenus') el: ElementRef;
    @ViewChild('myFrame') myFrame: ElementRef;
    constructor(private modal: NzModalService,) { }
    editor: any;
    assetManager:any;
    video: any;
    attributeType: string = '';
    contentMenu: any;
    setContentMenu: any;
    regex: any;
    ngOnChanges(changes: SimpleChanges) {
        console.log(changes);

    }
    ngOnInit(): void {
        this.regex = /Menus/i;

     }

    ngAfterViewInit() {


        setTimeout(() => {
            this.editor = grapesjs.init({
                container: '#gjs',
                width: 'auto',
                storageManager: false,
                plugins: [
                    'gjs-preset-webpage',
                    'grapesjs-lory-slider',
                    'grapesjs-tui-image-editor',
                    'grapesjs-plugin-grapedrop',
                    'gjs-plugin-code-view',
                    customCodePlugin,
                    //   this.setValue,
                    this.myColumn,
                    this.selectImage,
                    this.selectSlide,
                    this.selectVideo,
                    this.selectHeader,
                    this.selectBody,
                    this.selectFooter,
                    this.myFont,
                    this.selectMenu,
                    this.myLinks,
                    // this.myNewComponentTypes,
                ],
                pluginsOpts: {}
               },
         });


         selectImage(editor: any,) {
        editor.BlockManager.add('select-image', {
            label: 'Image',
            category: 'BASIC',
            attributes: { class: 'fa fa-picture-o' },
            content: `<div><select-image data-gjs-type="select-image  " ></select-image></div>
            <style>
            .select-image{
                width: 94%!important;
            }
            </style>    
        `
        ,
        });

    }

and Component 2:

this is file html

<div class="select-image">
    <div class="link">
        <div #myLink>
            <img id="linkURL" [src]="imgURL | convertUrl" class="height-200 img-thumbnail"
                 onerror="this.onerror=null;this.src='./assets/images/upload.svg';" />
        </div>
        <a class="link-remove" (click)="onRemoveImage()">Xóa</a>
        <div class="dropify-infos">
            <div class="dropify-infos-inner">
                <label>
                    <a class="link-edit" (click)="showMediaPopup()">Cập nhật</a>
                </label>
            </div>
        </div>
    </div>
</div>

file .ts:

showMediaPopup() {
        const modal = this.modal.create({
            nzTitle          : 'managerfile',
            nzContent        : GridViewFileComponent,
            nzWrapClassName  : 'modal-fullscreen',
            nzComponentParams: {
                isMultiple: false,
                type: FileUploadTypeEnum.Image,
                fileSelecteds: this.selectedFile
            },
            nzOnOk           : () => new Promise(resolve => setTimeout(resolve, 1000)),
            nzFooter         : []
        });

        modal.afterClose.subscribe(result => {
            if (result) {
                this.files = result;
                this.imgURL = this.files.filePath;
                this.writeValue(this.imgURL);
                this.fileOuput.emit(result);
                setTimeout(() => {
                    const gjsFrame = document.querySelector('iframe.gjs-frame') as HTMLIFrameElement;
                    setTimeout(() => {
                        const  doc = gjsFrame.contentWindow?.document;
                        const selector = doc?.getElementsByClassName('gjs-selected');

                        if(selector){
                            for (let i = 0; i < selector.length; i++) {
                                const el = selector[i];
                                el.setAttribute('src',`${this.imgURL}`);
                              }
                        }
                    },100)
                },500)
            }
           
            
        });

    }

even though I inject the src attribute into the select-image tag. but in the code viewer of "view code" of GrapesJs the attribute src is not displayed. I don't know what to do

Thank you very much

[artf]

You have to update the Component model, not the DOM

[Hunganh3012]

@artf thank you so much. but Can you help me with the code please. this is my first time using advanced grapesJs. I'm an intern at a company.
.
I want codeviewer inject 'select-image'
this is my step get image:
step1: draw and drop item"image"

step2: I click "choose mage"

step 3:

[Hunganh3012]

I also have renderring angular with GrapesJs ("select-image")

[Hunganh3012]

@artf I need you help #5055 . huhu. Thank you somuch

[ngoc199]

even though I inject the src attribute into the select-image tag. but in the code viewer of "view code" of GrapesJs the attribute src is not displayed. I don't know what to do

I don't get what you mean.

I guess you want to display the image using the select-image component.

To create the select-image component, you have to define a custom component type select-image that extends the built-in image component. It makes your select-image component treated as an image, instead of a block like a div, which does not use the src attribute.

Then you can use setAttribute("src", "your_source") to set the image source.

[Hunganh3012]

@ngoc199 thanks anh Ngoc Nguyen very much, i will try it . Present i'm intern angular/.net in HCM city . ^^

[Hunganh3012]

@ngoc199
The image is stored in our company's API image repository. I have a component to manage the media. I don't know how to upload the image from that repository to the GrapesJs editor. I have tried using "DomComponent" but it's not feasible.

[ngoc199]

You can use the image URL to display the image in GrapesJS.

The img tag could be used, but not ideal. Creating custom image component is a better solution for your problem.

[Hunganh3012]

thank you so much, i will try it. Have a nice day ^.^

[Hunganh3012]

@ngoc199 "After I asked my mentor for clarification, he expressed that he wanted me to help him figure out how to embed an image link into the 'code-mirror of grapesJs'. Previously, I had assigned the image link to the tag using regular DOM methods, but on 'code-mirror', the link does not appear. I am currently facing difficulties with this task."

showMediaPopup() {
        const modal = this.modal.create({
            nzTitle          : 'Quản lý file',
            nzContent        : GridViewFileComponent,
            // nzWrapClassName  : 'modal-fullscreen',
            nzWidth: 1400,
            nzComponentParams: {
                isMultiple: false,
                type: FileUploadTypeEnum.Image,
                fileSelecteds: this.selectedFile
            },
            nzOnOk           : () => new Promise(resolve => setTimeout(resolve, 1000)),
            nzFooter         : []
        });

        modal.afterClose.subscribe(result => {
            if (result) {
                this.files = result;
                this.imgURL = this.files.filePath;
                this.writeValue(this.imgURL);
                this.fileOuput.emit(result);
                setTimeout(() => {
                    const gjsFrame = document.querySelector('iframe.gjs-frame') as HTMLIFrameElement;
                    setTimeout(() => {
                        const  doc = gjsFrame.contentWindow?.document;
                        const selector = doc?.getElementsByClassName('gjs-selected');
                        if(selector){
                            for (let i = 0; i < selector.length; i++) {
                                const el = selector[i];
                                el.setAttribute('src',`${this.imgURL}`);

                            //Chỗ này em đã gán đường link ảnh cho thằng "<select-image>"
                            // Nguyện vọng của em là muốn khi mở Code-Viewer của thằng GrapesJs thì nó sẽ có đường link ảnh

                              }
                        }
                    },100)
                },500)
            }

        });

    }

[ngoc199]

Oh, I think I have misunderstood you the whole time :)

You have displayed the image in the canvas successfully, but wonder why the attributes do not appear in the Code Viewer, right?

As @artf said,

You have to update the Component model, not the DOM

Currently, you are using document.getByClassName() to find the components. It returns the DOM Element. If you modify the DOM, GrapesJS might not update the component correctly.

You can find the components using editor.getWrapper().find("select-image"). It returns a list of select-image components. Then you can modify them using selectImageComponent.addAttributes({ src: "your_image_source"}).

[Hunganh3012]

Thank you for dedicating your time to support me so enthusiastically. I will try your method and wish you good health. ^_^

[Hunganh3012]

VietNamese: dạ cảm ơn anh nhiều ạ @ngoc199 .Sau khi em thử làm cách a nhưng vẫn rơi vào bế tắc. để e mô tả lại project ạ, em có 2 component chính để lấy image có tên: grapesComponent và selectImageComponent.
English: After trying the solution provided by you, I still couldn't get it to work. Let me describe my project again. I have two main components to get images named grapesComponent and selectImageComponent.

<div class="select-image">
    <div class="link">
        <div #myLink>
            <img [src]="imgURL | convertUrl" class="height-200 img-thumbnail"
                 onerror="this.onerror=null;this.src='./assets/images/upload.svg';" />
        </div>
        <a class="link-remove" (click)="onRemoveImage()">Xóa</a>
        <div class="dropify-infos">
            <div class="dropify-infos-inner">
                <label>
                    <a class="link-edit" (click)="showMediaPopup()">Cập nhật</a>
                </label>
            </div>
        </div>
    </div>
</div>

VietNamese:Trong Component selectImagecomponent thì dùng "nz-Zoro design" để tạo sự kiện khi click vào chữ "cập nhật " thì hiện popup Media (Quan trọng là Component này em không import thư viện GrapesJs, ). Nên mọi tác vụ liên quan đến Thư viện grapesJs e chỉ dùng bên GrapeComponent, :(.

English:In the selectImageComponent, I used "nz-Zoro design" to create an event when clicking on the word "update" to show the Media popup (importantly, this component doesn't import the GrapesJs library). So, all tasks related to the GrapesJs library, I only use them in the GrapeComponent :(.

showMediaPopup() {
        const modal = this.modal.create({
            nzTitle          : 'Quản lý file',
            nzContent        : GridViewFileComponent,
            // nzWrapClassName  : 'modal-fullscreen',
            nzWidth:1400,
            nzComponentParams: {
                isMultiple: false,
                type: FileUploadTypeEnum.Image,
                fileSelecteds: this.selectedFile
            },
            nzOnOk           : () => new Promise(resolve => setTimeout(resolve, 1000)),
            nzFooter         : []
        });

        modal.afterClose.subscribe(result => {
            if (result) {
                this.files = result;
                this.imgURL = this.files.filePath;
                this.writeValue(this.imgURL);
                this.fileOuput.emit(result);
                setTimeout(() => {
                    const gjsFrame = document.querySelector('iframe.gjs-frame') as HTMLIFrameElement;
                    setTimeout(() => {
                        const  doc = gjsFrame.contentWindow?.document;
                        const selector = doc?.getElementsByClassName('gjs-selected');
                        if(selector){   
                            for (let i = 0; i < selector.length; i++) {
                                const el = selector[i];
                                el.setAttribute('src',`${this.imgURL}`);
                              }
                        }
                    },100)
                },500)
            }

        });

    }

VietNamese: Ngoài ra em có dùng CustomElement injection của Angular , khi e dùng </select-image thì nó sẽ tự động hiểu là e đang gọi cả component của selectImageComponent.

English:Additionally, I used Angular's CustomElement injection. When I use , it will automatically understand that I am calling the selectImageComponent.

In the GrapeComponent, I created a custom BlockManager plugin:

selectImage(editor:any) {
        editor.BlockManager.add('select-image', {
            label: 'Image',
            category: 'CƠ BẢN',
            attributes: { class: 'fa fa-picture-o' },
            content: `<div><select-image ></select-image></div>
            <style>
            .select-image{
                width: 94%!important;
            }
            </style>
        `,
        });
    
    }

VietNamese: Trong phần content e có dùng customElement để khi e thả Block vào trình canvas thì nó sẽ inject đến selectImageComponent là hiện Popup( "showMediaPopup").. Hiện tại hình ảnh hiển thị như các hình em chụp phía trên nó đều nằm trong component SelectImageComponent chứ nó chưa vào trình canvas ạ( Do khi thả block vào trình canvas nó sẽ hiển thị SelectImageComponent do e inject vào ạ ). Em đang muốn khi thao tác chọn hình ảnh bên component selectImageComponent e có thể lấy được link ảnh đồng thời nó cũng được hiển thị trên "code viewer".

English: In the content section, I used a customElement to inject into the selectImageComponent so that when I drag the block into the canvas, it will display the SelectImageComponent (which I injected). Currently, the displayed images, as shown in the pictures I attached above, are all located in the SelectImageComponent component, but they haven't yet entered the canvas (when I drag the block into the canvas, it will display the SelectImageComponent because I injected it). I want to be able to get the image link when selecting an image in the selectImageComponent and also display it in the "code viewer".

[Hunganh3012]

@ngoc199 I am brainstorming many ways. Is there a way to change the default asset manager into my own custom component?. Thank you so much sir

[ngoc199]

So the select-image is the Angular component, not a GrapesJS component, right?

I think GrapesJS does not support reactive components like React, Angular, Vue in the "code viewer" yet. This needs to be confirmed by @artf.

As I see in the GrapesJS React Example from #1970, the Counter is not included in the "code viewer".

The reactive component libraries like React, and Angular use JavaScript to render the component. Since there is no JS in the "code viewer", you can see nothing but the select-image tag, which Angular uses to know where to render the component.

I could think of 2 solutions for you:

1. Convert the Angular component to GrapesJS component. You can use the custom component view to implement the feature you want. If you like to use common JS after rendering, then follow the Component & JS documentation.
2. Make the selectImageComponent adds a GrapesJS component or HTML to GrapesJS editor after the user selects an image. You might want to remove the selectImageComponent after that to clean the "code viewer". However, it will remove the ability to select the new image.

If you want to use a custom asset manager, follow the official Asset Manager documentation. It has a Vue example. You could look at that and implement your Angular version.

[Hunganh3012]

Thank you very much @ngoc199 . Thanks to you, I have many new ideas.

[Hunganh3012]

@ngoc199 I have successfully accomplished it thanks to your idea. Thank you very much. I consider you the greatest online mentor in my life during these past days.This is the achievement I have made

bandicam.2023-04-28.14-40-49-123.mp4

[Hunganh3012]

DONE.

[nguyenvoanhkhoa1]

Phải Hùng Anh Bến Tre hong?

[Hunganh3012]

đúng rồi Khoa kkk