Set toolbar to float on uniDBHTMLMemo

[Point]

is it possible to make the toolbar in uniDBHTMLMemo to be floated

[Sherzod]

17 hours ago, Popo said:

is it possible to make the toolbar in uniDBHTMLMemo to be floated

Hello,

Something like this?

[Sherzod]

 

[Point]

hi sherzod,

like this : 

[Sherzod]

Do you want it to be vertical?

[Point]

5 hours ago, Sherzod said:

Do you want it to be vertical?

doesn't matter, with horizontally or vertically

[Point]

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

[Sherzod]

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.

[Point]

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 :

[Sherzod]

It seems that the task is non-standard in my opinion, what if there are several UniHTMLMemo on the container...

[Sherzod]

OK, I'll try to analyze.

[Point]

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.

[Sherzod]

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:

 

[Point]

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;

 

[Point]