Module: AceEditorGadget
Posted: Mon May 22, 2017 2:33 pm
Hello,
here's an implementation of the Ace-Editor (https://ace.c9.io/).
Example:
Greetings ... Peter
here's an implementation of the Ace-Editor (https://ace.c9.io/).
AceEditorGadget.sbi:Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.
Code: Select all
DeclareModule AceEditor
EnableExplicit
Global IsInitialized
Declare Init(Callback)
Declare Gadget(Gadget, x, y, Width, Height)
Declare SetMode(Gadget, Mode.s)
Declare SetTheme(Gadget, Theme.s)
Declare.s GetValue(Gadget)
Declare SetValue(Gadget, Value.s)
Declare Focus(Gadget)
Declare Undo(Gadget)
Declare Redo(Gadget)
Declare Find(Gadget, Needle.s, SearchObject)
Declare FindAll(Gadget, String.s)
Declare FindNext(Gadget)
Declare FindPrevious(Gadget)
Declare Indent(Gadget)
Declare GotoLine(Gadget, LineNumber, ColumnNumber)
Declare Resize(Gadget)
EndDeclareModule
Module AceEditor
EnableExplicit
Macro GetSelector
! var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
EndMacro
Macro GetEditor
GetSelector
! var editor = selector.data("editor");
EndMacro
Procedure Init(Callback)
! require(["//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"],
! function() {
IsInitialized = #True
! v_callback();
! }
! );
EndProcedure
Procedure Gadget(Gadget, x, y, Width, Height)
If Gadget = #PB_Any
Gadget = ContainerGadget(Gadget, x, y, Width, Height)
Else
ContainerGadget(Gadget, x, y, Width, Height)
EndIf
CloseGadgetList()
GetSelector
! editor = ace.edit(selector[0]);
! selector.data("editor", editor);
ProcedureReturn Gadget
EndProcedure
Procedure SetMode(Gadget, Mode.s)
GetEditor
! editor.getSession().setMode("ace/mode/" + v_mode);
EndProcedure
Procedure SetTheme(Gadget, Theme.s)
GetEditor
! editor.setTheme("ace/theme/" + v_theme);
EndProcedure
Procedure.s GetValue(Gadget)
GetEditor
! return editor.getValue();
EndProcedure
Procedure SetValue(Gadget, Value.s)
GetEditor
! editor.setValue(v_value, 1);
EndProcedure
Procedure Focus(Gadget)
GetEditor
! editor.focus();
EndProcedure
Procedure Undo(Gadget)
GetEditor
! editor.undo();
EndProcedure
Procedure Redo(Gadget)
GetEditor
! editor.redo();
EndProcedure
Procedure Find(Gadget, Needle.s, SearchObject)
; find(String needle, Object options, Boolean animate)
GetEditor
! editor.find(v_needle, v_searchobject);
EndProcedure
Procedure FindAll(Gadget, String.s)
; findAll(String The, Object The, Boolean keeps) Number
GetEditor
! editor.findAll(v_string);
EndProcedure
Procedure FindNext(Gadget)
; findNext(Object options, Boolean animate)
GetEditor
! editor.findNext();
EndProcedure
Procedure FindPrevious(Gadget)
; findPrevious(Object options, Boolean animate)
GetEditor
! editor.findPrevious();
EndProcedure
Procedure Indent(Gadget)
; findPrevious(Object options, Boolean animate)
GetEditor
! editor.indent();
EndProcedure
Procedure GotoLine(Gadget, LineNumber, ColumnNumber)
; gotoLine(Number lineNumber, Number column, Boolean animate)
GetEditor
! editor.gotoLine(v_linenumber, v_columnnumber);
EndProcedure
Procedure Resize(Gadget)
; resize(Boolean force)
GetEditor
! editor.resize(true);
EndProcedure
EndModule
Code: Select all
XIncludeFile "AceEditorGadget.sbi"
EnableExplicit
Enumeration
#Window
#Toolbar
#Toolbar_New
#Toolbar_Open
#Toolbar_Save
#Toolbar_Search
#AceEditor
EndEnumeration
#dijitEditorIconNewPage = "dijitEditorIcon dijitEditorIconNewPage"
#dijitIconFolderOpen = "dijitIconFolderOpen"
#dijitIconSave = "dijitIconSave"
#dijitIconSearch = "dijitIconSearch"
Procedure.s GetTestSource()
Protected TestSource.s
TestSource = "function ValidFunction() {" + #CRLF$ + #CRLF$ +
" alert('Hello World');" + #CRLF$ + #CRLF$ +
"}" + #CRLF$ + #CRLF$ +
"function InvalidFunction( {" + #CRLF$ + #CRLF$ +
"}" + #CRLF$
ProcedureReturn TestSource
EndProcedure
Procedure ToolBarStandardButton(Button, ButtonIcon.s, Mode = #PB_ToolBar_Normal, Text.s = "")
; see: http://forums.spiderbasic.com/viewtopic.php?p=3581#p3581
ToolBarImageButton(Button, 0, Mode)
! var b = spider.toolbar.current.buttons[v_button];
! var i = $(b.domNode).find(".dijitIcon");
! i.addClass(v_buttonicon);
If Text <> ""
! var s = $(b.domNode).find(".dijitButtonText");
! s.removeClass("dijitDisplayNone");
! s.text(v_text);
EndIf
EndProcedure
Procedure ReadFileCallback(Status, Filename.s, File, Size)
Protected FileContent.s = ""
Select Status
Case #PB_Status_Loaded
While Not Eof(File)
FileContent + ReadString(File) + #CRLF$
Wend
CloseFile(File)
AceEditor::SetValue(#AceEditor, FileContent)
EndSelect
EndProcedure
Procedure OpenFileRequesterCallback()
NextSelectedFile()
ReadFile(#PB_Any, SelectedFileID(), @ReadFileCallback(), #PB_LocalFile | #PB_Ascii)
EndProcedure
Procedure MenuEvent()
Select EventMenu()
Case #Toolbar_New
AceEditor::SetValue(#AceEditor, "")
Case #Toolbar_Open
OpenFileRequester("", @OpenFileRequesterCallback())
Case #Toolbar_Save
If CreateFile(0, "Text.txt", 0) ; we create a new text file
WriteString(0, AceEditor::GetValue(#AceEditor))
ExportFile(0, "text/plain")
CloseFile(0)
EndIf
Case #Toolbar_Search
Protected SearchString.s = "World"
Protected SearchObject
! v_searchobject = {
! backwards : false, // Whether to search backwards from where cursor currently is. Defaults to false.
! wrap : false, // Whether to wrap the search back to the beginning when it hits the end. Defaults to false.
! caseSensitive : false, // Whether the search ought to be case-sensitive. Defaults to false.
! wholeWord : false, // Whether the search matches only on whole words. Defaults to false.
! range : null, // The Range to search within. Set this to null for the whole document
! regExp : false, // Whether the search is a regular expression or not. Defaults to false.
! start : 0, // The starting Range or cursor position to begin the search
! skipCurrent : false // Whether or not to include the current line in the search. Default to false.
! }
AceEditor::Find(#AceEditor, SearchString, SearchObject)
AceEditor::FindNext(#AceEditor)
AceEditor::FindPrevious(#AceEditor)
AceEditor::Focus(#AceEditor)
EndSelect
EndProcedure
Procedure SizeWindowEvent()
ResizeGadget(#AceEditor, #PB_Ignore, #PB_Ignore, WindowWidth(#Window), WindowHeight(#Window) - ToolBarHeight(#Toolbar))
AceEditor::Resize(#AceEditor)
EndProcedure
Procedure Main()
OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 800, 600, "AceEditorGadgetDemo", #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
CreateToolBar(#Toolbar, WindowID(#Window))
ToolBarStandardButton(#Toolbar_New, #dijitEditorIconNewPage)
ToolBarToolTip(#Toolbar, #Toolbar_New, "New")
ToolBarStandardButton(#Toolbar_Open, #dijitIconFolderOpen)
ToolBarToolTip(#Toolbar, #Toolbar_Open, "Open...")
ToolBarStandardButton(#Toolbar_Save, #dijitIconSave)
ToolBarToolTip(#Toolbar, #Toolbar_Save, "Save...")
ToolBarSeparator()
ToolBarStandardButton(#Toolbar_Search, #dijitIconSearch)
ToolBarToolTip(#Toolbar, #Toolbar_Search, "Search 'World'")
AceEditor::Gadget(#AceEditor, 0, 0, WindowWidth(#Window), WindowHeight(#Window) - ToolBarHeight(#Toolbar))
AceEditor::SetTheme(#AceEditor, "chrome")
AceEditor::SetMode (#AceEditor, "javascript")
; (Overview of themes and modes: https://ace.c9.io/build/kitchen-sink.html)
AceEditor::SetValue(#AceEditor, GetTestSource())
AceEditor::Focus(#AceEditor)
AceEditor::GotoLine(#AceEditor, 2, 2)
BindEvent(#PB_Event_Menu, @MenuEvent())
BindEvent(#PB_Event_SizeWindow, @SizeWindowEvent())
EndProcedure
AceEditor::Init(@Main())