Customize the "Link" option in the toolbar

[Amanda Iverson]

Hello! I have the ASP.NET Core document editor up and running on my product (yay!). I am wanting to "customize" what the Hyperlink onclick does when the user selects it. It is a wishlist on our app to click the hyperlink and have some documents from our db appear as a list that they can auto link to instead of presenting  blank address line.

Is this something that can be accomplished? 

[Harini Chellappa]

Hi Amanda, 

 

Thank you for contacting Syncfusion Support! 

 

Document editor provides option to customize the existing toolbar. You can hide the link option in toolbar and add custom tool item to open your custom hyperlink dialog instead of document editor dialog. 

 

Please refer the below documentation on customizing toolbar. 

 

https://ej2.syncfusion.com/documentation/document-editor/how-to/customize-tool-bar/ 

 

You can disable hyperlink dialog, by setting enableHyperlinkDialog of document editor to false.  

container.documentEditor.enableHyperlinkDialog = false; 

Kindly check the below sample with custom toolbar and disabled hyperlink dialog. 

Sample Link: https://stackblitz.com/edit/zdhudb?file=index.js 

Document editor provides insertHyperlink API of editor module to insert hyperlink in current position. 

https://ej2.syncfusion.com/documentation/api/document-editor/editor/#inserthyperlink 

Sample Code Snippet 

container.documentEditor.editor.insertHyperlink("www.google.com"); 

Document editor provides isInField property of selection module to return whether current selection is in field. 

containerInstance.documentEditor.selection.isInField 

You can check whether current selection is in field with above property in selectionChange event and show option in context menu to open your custom hyperlink dialog. 

selectionChange event will get trigger on every selection change in document editor. Please refer the below documentation. 

https://ej2.syncfusion.com/documentation/api/document-editor-container#selectionchange 

Please refer the below documentation on custom context menu. 

https://ej2.syncfusion.com/documentation/document-editor/how-to/customize-context-menu/ 

To get the selected text, please refer the below documentation. 

https://ej2.syncfusion.com/documentation/api/document-editor/selection/#text-code-classlanguage-textstringcode 

please check the above and let us know whether this helps. 

Regards, 

Harini C 

[Wojt]

Hi Amanda

I think I was trying to do something similar... this code may help...

I created a context menu, with the select handler of the menu doing the work (in my case inserting text).

I then created a custom toolbar item and added it to the DocumentContainer, and handled the toolbarClick event of the document editor to open the context menu below the icon.

@{

    List<object> toolbarItems = new List<object>();

    toolbarItems.AddRange(new List<object> { "Open", "Separator", "Table", "Image", "Separator", "PageNumber", "Break", "Separator", "Undo", "Redo", "Separator", "Find", "Separator" });

    toolbarItems.Add(new { text = "Add Field", tooltipText = "Add a data field", id = "AddField", prefixIcon = "fas fa-puzzle-piece" });

}

<ejs-documenteditorcontainer id="DocumentEditor" enableToolbar="true" toolbarItems="toolbarItems" showPropertiesPane="true" serviceUrl="../">

</ejs-documenteditorcontainer>

<ejs-contextmenu id="contextmenu" items="ViewBag.documentFields" select="insertField" animationSettings="@new Syncfusion.EJ2.Navigations.ContextMenuAnimationSettings(){ Effect= Syncfusion.EJ2.Navigations.MenuEffect.SlideDown, Duration=1200 }"></ejs-contextmenu>

@section Scripts

{

    <script>

    var container;

    var documenteditor;

    var documenteditorElement

    function resizeEditor() {

        var newHeight = 0.85 * (window.innerHeight - documenteditorElement.getBoundingClientRect().top);

        documenteditorElement.style.height = newHeight + "px";

    }

    function insertField(args) {

            documenteditor.editor.insertText(args.item.id);

    }

    $(document).ready(function () {

        documenteditorElement = document.getElementById("DocumentEditor");

        container = documenteditorElement.ej2_instances[0];

        documenteditor = container.documentEditor;

        resizeEditor();

        container.toolbarClick = function (args) {

            switch (args.item.id) {

                case 'AddField':

                    var contextMenuObj = ej.base.getInstance(document.getElementById('contextmenu'), ejs.navigations.ContextMenu)

                    var rect = document.getElementById("AddField").getBoundingClientRect();

                    contextMenuObj.open(rect.bottom, rect.left);

                    break;

                }

            };

     });

    </script>

    <ejs-scripts></ejs-scripts>

}

[Amanda Iverson]

Thank you! This worked so well! I now have a custom toolbar :)