Implement Dropdown in RichTextEditor toolbar
Hi,
I want to implement custom dropdown in RichTextEditor Toolbar and on selecting it the existing placeholder of the richtextbody should not be displayed and selected value of the dropdown should come there.
For reference sharing screen shot in which richtexteditor is having custom dropdown "select placeholder value". but this is in jqx I want in syncfusion using angular.
Thanks in advance
SIGN IN To post a reply.
10 Replies
Hi,
Thanks for the response. I have shared the snippet and code of my implementation.
In the below snippet, I am having dropdown of Workflow/MasterData , on change of which I want to update the fields of dropdown in rich text editor in right hand side.
I used this line of code
this.dropDownListObject.dataSource = this.placeHolderdata;
on the onChange event of workflow dropdown in which I am getting id, and on that Id basis I make a call to database and get the fields which I want to append into the rich text dropdown which already contains some hardcoded value. The very first time when I used any dropdown element of the workflow it gets appened into the custom dropdown(Rich text editor dropdown). Also when I continously two item one after the other, then the fields from both the selected item get appended (i.e when I open the Rich text editor collapse button). Next time it is already openened and when I select again from the workflow dropdown and checked in the already opened toolbar of rich text it doesn't get updated. while in console I am getting all the appended values but it is not showing in the dropdown.
I think there is some problem with the collapsible open/close. I also try to use this line of code on beforeopen event of the custom dropdown but still it is not working.
method I called on the change event of the workflow dropdown:
getEntities() {
this._stepcolservice.getAllEntities(this.EntityId)
.subscribe(result => {
for (var i = 0; i < result.length; i++) {
this.placeHolderdata.push({ Value: result[i].Value, FieldName: result[i].FieldName }) //pushing into the datasource variable to append
}
this.dropDownListObject.dataSource = this.placeHolderdata;//updating the datasource of the custom dropdown
this.dropDownListObject.refresh();//trying to refresh the dropdown object variable
});
}
//declaring the dropdown into the toolbar
documentEditorToolbarSettings = {
enableFloating: true,
items: [
{
tooltipText: 'Select placeholder value',
template: '<input type="text" id="dropdown" />'
}
]
};
//HTML code of my rich text editor
<ejs-richtexteditor id="customRTE" #customRTE formControlName="EmailBody" placeholder="" (open)="OnOpen()"
[toolbarSettings]="this.documentEditorToolbarSettings" height="250"
(created)="oncreated()">
</ejs-richtexteditor>
//Hardcoded values for the custom dropdown which will be always visible with other dynamic fields
placeHolderdata: { [key: string]: Object }[] = [
{ Value: 'url', FieldName: 'url' },
{ Value: 'userid', FieldName: 'userid' },
{ Value: 'username.loginemail', FieldName: 'username.loginemail' },
{ Value: 'emailotp', FieldName: 'emailotp' },
{ Value: 'emailotpvalidaity', FieldName: 'emailotpvalidaity' },
{ Value: 'password', FieldName: 'password' }
];
//defining the Created event of the rich text editor
public dropDownListObject: DropDownList
oncreated(): void {
// initialize DropDownList component
this.dropDownListObject = new DropDownList({
placeholder: "Select PlaceHolder Value",
width: "300px",
fields: { text: 'FieldName' },
beforeOpen: this.OnChanged.bind(this),
//set the data to dataSource property
dataSource: this.placeHolderdata
});
// render initialized DropDownList
this.dropDownListObject.appendTo('#dropdown');
}
Now I think you are getting my issue clearly. Please response for the same Thank you in advance
SIGN IN To post a reply.
