Code for each item is relatively simple. For example list type selector consists of two classes, first for drop down panel:
THtEditContextList = class(THtEditContextItem)
public
function Render: string; override;
end;
function THtEditContextList.Render: string;
procedure Add(const ListType, ListTag: string);
begin
Result := Result + Format('<div class="eclistbox fade" listtype="%s"><%s style="list-style-type: %s"><li>———</li><li>———</li><li>———</li></ol></div>',
[ListType, ListTag, ListType]);
end;
begin
Result := '';
Add('none', 'ul');
Add('circle', 'ul');
Add('disc', 'ul');
Add('square', 'ul');
Add('decimal', 'ol');
Add('lower-alpha', 'ol');
Add('lower-roman', 'ol');
Add('upper-alpha', 'ol');
Add('upper-roman', 'ol');
end;
And second for the button:
THtEditContextListStyle = class(THtEditContextLiveItem)
public
function Render: string; override;
procedure OnSubmenuElementEnter(Sender: TElement); override;
procedure OnSubmenuClick(const Sender: TElement; Button: TMouseButton; Shift: TShiftState); override;
end;
procedure THtEditContextListStyle.OnSubmenuClick(const Sender: TElement;
Button: TMouseButton; Shift: TShiftState);
begin
OnSubmenuElementEnter(Sender);
end;
procedure THtEditContextListStyle.OnSubmenuElementEnter(Sender: TElement);
begin
if Sender['listtype'] <> '' then
begin
if Sender.NodebyName('ol') <> nil then
Editor.SetListStyle('ol', Sender['listtype'])
else
Editor.SetListStyle('ul', Sender['listtype']);
Editor.Repaint;
end;
end;
function THtEditContextListStyle.Render: string;
begin
id := 'list';
Result := '<div id="list" class="ecbutton down fade"><div class="faicon"></div> </div>';
FSubmenuClass := THtEditContextList;
FDefaultSubmenuWidth := 300;
end;
Code for building menu:
ContextPanel.Add(THtEditContexBold).Add(THtEditContextItalic).Add(THtEditContextUnderline).
Add(THtEditContexStrike).Add(THtEditContexSpace).Add(THtEditContextTextColor).Add(THtEditContextBGColor).
Add(THtEditContextFontSize).Add(THtEditContextFont).
Add(THtEditContexLineBreak).Add(THtEditContexAlignLeft).Add(THtEditContexAlignCenter).Add(THtEditContexAlignRight).Add(THtEditContexAlignFull)...