Point Posted November 1, 2021 Share Posted November 1, 2021 is it possible to make the toolbar in uniDBHTMLMemo to be floated Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 2, 2021 Share Posted November 2, 2021 17 hours ago, Popo said: is it possible to make the toolbar in uniDBHTMLMemo to be floated Hello, Something like this? 1 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 2, 2021 Share Posted November 2, 2021 Quote Link to comment Share on other sites More sharing options...
Point Posted November 2, 2021 Author Share Posted November 2, 2021 hi sherzod, like this : floating_edit_x264.mp4 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 2, 2021 Share Posted November 2, 2021 Do you want it to be vertical? Quote Link to comment Share on other sites More sharing options...
Point Posted November 2, 2021 Author Share Posted November 2, 2021 5 hours ago, Sherzod said: Do you want it to be vertical? doesn't matter, with horizontally or vertically Quote Link to comment Share on other sites More sharing options...
Point Posted November 2, 2021 Author Share Posted November 2, 2021 almost ten years I joined this forum, but no progress in mastering javascript/extjs. I decided to make this application, trying to record all topics. I didn't think, why wasn't it done earlier Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 2, 2021 Share Posted November 2, 2021 19 hours ago, Popo said: is it possible to make the toolbar in uniDBHTMLMemo to be floated Seems didn't really understand your case, and how it will look for UniHTMLMemo in general. Quote Link to comment Share on other sites More sharing options...
Point Posted November 2, 2021 Author Share Posted November 2, 2021 For example I will insert a sentence on the end paragraph. I will change the style of this text. I have to scroll up first because the toolbar is covered. if the toolbar is sticky or floating. I don't need to scroll up. like the record navigator's panel that I made beside this uniDBHTMLmemo. see this video : floating toolbar_x264.mp4 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 2, 2021 Share Posted November 2, 2021 It seems that the task is non-standard in my opinion, what if there are several UniHTMLMemo on the container... Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 2, 2021 Share Posted November 2, 2021 OK, I'll try to analyze. Quote Link to comment Share on other sites More sharing options...
Point Posted November 3, 2021 Author Share Posted November 3, 2021 Hi Sherzod, Previously I had an idea to create a panel containing tools instead of toolbar on unidbHtmlMemo (show toolbar = false), but I don't know what functions for each tool in extjs. and i dont how to execute that function. For example, in Delphi I usually make something like this: case TButton(sender).tag of //change font to bold 0 : ChangeFontBold; //-> call procedure to bold memo text; //change font to italic 1 : ChangeFontItalic; //-> call procedure to italicmemo text //change font to underline 2 : ChangeFontUnderline; //-> call procedure to underlinememo text; . . . //and so on end; best regard. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 3, 2021 Share Posted November 3, 2021 34 minutes ago, Popo said: Previously I had an idea to create a panel containing tools instead of toolbar on unidbHtmlMemo (show toolbar = false), but I don't know what functions for each tool in extjs. and i dont how to execute that function. Hi, To start, this post may help you: Quote Link to comment Share on other sites More sharing options...
Point Posted November 4, 2021 Author Share Posted November 4, 2021 Base this link: https://docs.sencha.com/extjs/7.4.0/classic/src/HtmlEditor.js-1.html hope usefull for other. @Sherzod, please correct this code if wrong. uniDBHTMLMemo -> extEvent -> uniEvent -> beforeInit : function beforeInit(sender, config) { this.changeFont = function(fontName) { this.win.focus(); this.relayCmd('fontName', fontName); this.deferFocus(); }; this.setColor = function(color) { this.execCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#' + color : color); this.deferFocus(); }; this.setBGColor = function(color) { if (Ext.isGecko) { this.execCmd('useCSS', false); this.execCmd('hilitecolor', color); this.execCmd('useCSS', true); this.deferFocus(); } else { this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE ? '#' + color : color); this.deferFocus(); } }; this.adjustFont = function(adjust) { var size = this.getDoc().queryCommandValue('FontSize') || '2', isPxSize = Ext.isString(size) && size.indexOf('px') !== -1, isSafari; size = parseInt(size, 10); if (isPxSize) { if (size <= 10) { size = 1 + adjust; } else if (size <= 13) { size = 2 + adjust; } else if (size <= 16) { size = 3 + adjust; } else if (size <= 18) { size = 4 + adjust; } else if (size <= 24) { size = 5 + adjust; } else { size = 6 + adjust; } size = Ext.Number.constrain(size, 1, 6); } else { isSafari = Ext.isSafari; if (isSafari) { adjust *= 2; } size = Math.max(1, size + adjust) + (isSafari ? 'px' : 0); } this.relayCmd('FontSize', size); }; this.createLink = function() { var url = prompt(this.createLinkText, this.defaultLinkValue); if (url && url !== 'http:/' + '/') { this.relayCmd('createlink', url); } }; this.toggleSourceEdit = function(sourceEditMode) { var me = this, iframe = me.iframeEl, textarea = me.textareaEl, hiddenCls = Ext.baseCSSPrefix + 'hidden', btn = me.getToolbar().getComponent('sourceedit'); if (!Ext.isBoolean(sourceEditMode)) { sourceEditMode = !me.sourceEditMode; } me.sourceEditMode = sourceEditMode; if (btn.pressed !== sourceEditMode) { btn.toggle(sourceEditMode); } if (sourceEditMode) { me.disableItems(true); me.syncValue(); iframe.addCls(hiddenCls); textarea.removeCls(hiddenCls); textarea.dom.removeAttribute('tabIndex'); textarea.focus(); me.inputEl = textarea; } else { if (me.initialized) { me.disableItems(me.readOnly); } me.pushValue(); iframe.removeCls(hiddenCls); textarea.addCls(hiddenCls); textarea.dom.setAttribute('tabIndex', -1); me.deferFocus(); me.inputEl = iframe; } me.fireEvent('editmodechange', me, sourceEditMode); me.updateLayout(); }; } ToolBar Button Click : procedure TMainForm.MemoToolBarClick(Sender: TObject); begin with edtCodeContent, JSInterface do begin case TUniButton(Sender).Tag of 0 : JSCall('execCmd', ['bold']); 1 : JSCall('execCmd', ['italic']); 2 : JSCall('execCmd', ['underline']); 3 : JSCall('adjustFont', [1]); 4 : JSCall('adjustFont', [-1]); 5 : JSCall('execCmd', ['justifyleft']); 6 : JSCall('execCmd', ['justifycenter']); 7 : JSCall('execCmd', ['justifyright']); 8 : JSCall('createLink', []); 9 : JSCall('execCmd', ['insertorderedlist']); 10 : JSCall('execCmd', ['insertunorderedlist']); 11 : JSCall('toggleSourceEdit', [spdSourceMode.Down]); end; end; end; Fore color, Background color and Change Font : procedure TMainForm.btcBgColorSelect(Sender: TObject; Color: TColor); var Aclr : string; begin Aclr := ReplaceText(uniColor2Web(Color),'#',''); with edtCodeContent, JSInterface do begin JSCall('setBGColor', [Aclr]); end; end; procedure TMainForm.btcFontColorSelect(Sender: TObject; Color: TColor); var Aclr : string; begin Aclr := ReplaceText(uniColor2Web(Color),'#',''); with edtCodeContent, JSInterface do begin JSCall('setColor', [Aclr]); end; end; procedure TMainForm.cbFontNameSelect(Sender: TObject); begin with edtCodeContent, JSInterface do begin JSCall('changeFont', [LowerCase(cbFontName.Text)]); end; end; Quote Link to comment Share on other sites More sharing options...
Point Posted November 4, 2021 Author Share Posted November 4, 2021 custom toolbar_x264.mp4 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.