Document Editor in Angular CLI

[Sourabh Sharma]

Hello Team , 
what are the steps to install Document Editor in angular CLI?
 We found one link over that one systemJS file is required to map some min.js which won't be possible through Angular CLI, So is there is any alternative way to run doc Editor on Ang CLI.
also is there any YouTube video available for installation ?
Please provide solution ASAP.

Thanks,
Sourabh

[Dhanush Sekar]

Hi Sourabh,

The System.config.js file will be downloaded automatically when you clone the quickstart setup. Please see the documentation below.

Code :

git clone https://github.com/angular/quickstart.git quickstart

documentation link :https://ej2.syncfusion.com/angular/documentation/document-editor/getting-started#setup-your-development-environment

After cloning the template, you can configure the min.js files.

documentation link :https://ej2.syncfusion.com/angular/documentation/document-editor/getting-started#configuring-system-js

##also is there any YouTube video available for installation ?

No, we have not published a YouTube video for angular. Please refer to the following documentation for more information.

documentation link :https://ej2.syncfusion.com/angular/documentation/document-editor/getting-started

Regards,

Dhanush Sekar

[Sourabh Sharma]

Hello Dhanush Sekar,
Having Some queries about Document Editor Functionality.

Queries:
1. How to add simple chart component inside document editor e.g. ChartComponent (read-only mode would be fine)?
2. How to create custom property like Tag while saving document editor in sdft format? Here we want to add Tag property while saving ChartComponent or Image in sdft file.
3. How to append or change -> "name", "alternativeText" & "title" property for image or picture while adding in document editor.
Further those properties will saved in sdft file. Loading images from server using server url.
4. In ToolBar can we disable or Remove Some Option Like Open , New etc. 


Please reply ASAP,
Thanks ,
Sourabh

[Dhanush Sekar]

Hi Sourabh,

##How to add simple chart component inside document editor e.g. ChartComponent (readonly mode would be fine)?

At present, the Document Editor has preservation support for the chart but doesn't provide support for inserting the chart.

 

We have already logged this as feature request. We don’t have any immediate plans to implement this feature now.

 

We usually have an interval of at least three months between the releases. At the planning stage for every release cycle, we review all open features once again and finalize features for implementation based on specific parameters, including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented.            

      

You can track the status of feature from the below link:            

https://www.syncfusion.com/feedback/24735/support-for-inserting-and-editing-charts

##How to create custom property like Tag while saving document editor in sdft format? Here we want to add Tag property while saving ChartComponent or Image in sdft file.

It’s not possible to add tags in SFDT format. You can add a bookmark with a unique name to identify the image. We have created a sample for your reference. In the below sample, we have added a bookmark with a unique name on the button click.

Stackblitz sample: https://stackblitz.com/edit/angular-zcnhay?file=src%2Fapp.component.ts,src%2Fapp.component.html

Sample explanation:

• Select image that you want add bookmark

• Click the "insert bookmark" button, and it will insert a bookmark with a unique name for the selected image.

Documentation link : https://ej2.syncfusion.com/angular/documentation/document-editor/bookmark#add-bookmark

How to append or change -> "name", "alternativeText" & "title" property for image or picture while adding in document editor.  Further those properties will saved in sdft file. Loading images from server using server url.

Currently, the document editor doesn’t provide support for title and alternative text for images.

 

We have already logged this as a feature request. We don’t have any immediate plans to implement this feature now.

 

We usually have an interval of at least three months between the releases. At the planning stage for every release cycle, we review all open features once again and finalize features for implementation based on specific parameters, including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented.            

      

You can track the status of feature from the below link:            

https://www.syncfusion.com/feedback/37063/support-for-the-title-and-alternative-text-for-shape-and-image 

##In ToolBar can we disable or Remove Some Option Like Open , New etc.  

Yes, you can remove existing toolbar items using the toolbarItems collection. Just remove the toolbar item string value from toolbarItems during component initialization. 

Also, you can enable or disable the existing toolbar items.

Code:

this.container.toolbar.enableItems(4, false);

Please refer the below documentation to know more details

https://ej2.syncfusion.com/angular/documentation/document-editor/how-to/customize-tool-bar#how-to-customize-existing-toolbar-in-documenteditorcontainer

Regards,

Dhanush Sekar

[Sourabh Sharma]

Hello Dhanush Sekar,

Query :
In Document Editor image/Object can be drag to any position in Document like Word application?, and also any image can be drag or drop in Document Editor from File explorer ?

Whether this functionality is supported in document editor ? i have searched for any property for drag and drop but not found for object drag or drop .


and Also add on to this can we insertImage as such path  "http://localhost/chart.png" .
Like this , 
let fileURL = "http://localhost:8081/xyz/abc/1_1_chart.png" 
and pass it in 

  @ViewChild('documenteditor_default')

  public container: DocumentEditorContainerComponent;

 this.container.documentEditor.editor.insertImage(fileUrl,400, 400);

Please Reply ASAP,
Thanks ,
Sourabh

[Dhanush Sekar]

Hi Sourabh,

In Document Editor image/Object can be drag to any position in Document like Word application?, and also any image can be drag or drop in Document Editor from File explorer ?

Drag and drop of images from the File Explorer is not supported by the Document Editor. Therefore, dragging and dropping an image into the Document Editor from the File Explorer is not possible.

and Also add on to this can we insertImage as such path  "http://localhost/chart.png" .

Yes, you can insert the image using the local host URL only if the image is accessible.

Regards,

Dhanush Sekar

[Sourabh Sharma]

Hello  Dhanush Sekar , 

in Document Editor can we place this type of layout in which we can drop an image in it like powerPoint .

2. We want to do some CSS modification for Document Editor like we have to change css as per our product UI so weather any support is there to change CSS for Document Editor.


Please provide any Solution for both queries ASAP.

Thank You .

[Sourabh Sharma]

Any Update Team ?

[Dhanush Sekar]

Hi Sourabh,

We apologize for the delay.

##in Document Editor can we place this type of layout in which we can drop an image in it like powerPoint .

Are you expecting the default image to be loaded when you click the insert image toolbar button?

If not, could you please share more details about this requirement? It will be helpful to proceed further.

##We want to do some CSS modification for Document Editor like we have to change css as per our product UI so weather any support is there to change CSS for Document Editor.

Please refer to the below documentation to learn more about themes and how to change the theme and color to match your application UI.

Documentation link : https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio

Regards,

Dhanush Sekar

[Sourabh Sharma]

Hello  Dhanush Sekar,

We are trying to add Layout as given in PowerPoint Application , So Can we use it in documentEditor?



thanks 

[Dhanush Sekar]

Hi Sourabh,

Document Editor is used to create, edit, and view Word documents like the MS Word desktop application. So, it's not possible to add a PowerPoint layout in Document Editor. 

If you want to change the layout of the whole document, you can use the multicolumn layout option. 

You can also load a template document, such as MS Word. Create a template document as SFDT and load it into Document Editor.

Regards,

Dhanush Sekar