unihtmlmemo uniGUI.Express - uniHTMLMemo with custom buttons, image upload and search

[Fred Montier]

Hi folks...

Back publishing a lot of examples in next days. First this old one that I saw log time ago at the forum with fragmented solutions to uniHTMLMemo. So, you can add custom button, upload image and have a field to do search in the doc. Some solutions from uniGUi Staff and other users. I put together all in one project. Let me know if you think I should implement more stuff ...

So if you need more button, upload image and do search, here we go !

This project is free to download for uniGUI subscribers. In few days will be unavailable and incorporate at our packs.
 

 

Available in pack 04

 

[Kattes]

[Kattes]

Ok, sometimes you might need to change one of the existing menu handlers. In my case, I needed a new event handler for when the hyperlink button is clicked. If you are in a similar situation, you can do what I did:
 

function beforeInit(sender, config) {
    config.listeners = {
        render: function(editor) {
            // Add your upload button with complex tooltip
            var uploadButton = editor.getToolbar().add({
                xtype: 'button',
                iconCls: 'fa fa-paperclip',
                text: 'Upload',
                handler: function() {
                    ajaxRequest(sender, 'upload_file', []);
                }
            });
            
            // Set complex tooltip for the upload button
            var uploadTooltip = {
                title: 'File Upload',
                text: 'Upload a file and attach it to the document.',
                cls: 'x-html-editor-tip'
            };
            
            if (uploadButton.setTooltip) {
                uploadButton.setTooltip(uploadTooltip);
            }
            
            // Modify the existing hyperlink button
            var toolbar = editor.getToolbar();
            var items = toolbar.items.items;
            
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                
                // Check if this is the Hyperlink button
                if (item.iconCls === 'x-edit-createlink' || 
                    (item.tooltip && item.tooltip.title === 'Hyperlink') || 
                    item.itemId === 'createlink') {
                    
                    // Store the original handler function
                    var originalHandler = item.handler;
                    
                    // Override with a new handler that calls both functions
                    item.setHandler(function() {
                        // Call your custom function first
                        console.log('Custom hyperlink action');
                        ajaxRequest(sender, 'custom_link_action', []);
                        
                        // Then call the original handler
                        originalHandler.call(item.scope || item);
                    });
                    
                    // Update the complex tooltip
                    var newTooltip = {
                        title: 'Enhanced Hyperlink',
                        text: 'Make the selected text a hyperlink and perform custom action.',
                        cls: 'x-html-editor-tip'
                    };
                    
                    // Apply the new tooltip
                    if (item.setTooltip) {
                        item.setTooltip(newTooltip);
                    }
                    
                    break;
                }
            }
        }
    };
}