Page 1 of 1

summernote WYSIWYG editor can be used with sb?

Posted: Mon Apr 30, 2018 2:45 am
by ehbarba
I have been trying to use summernote WYSIWYG editor with SpiderBasic without success. Can it be done?

Code: Select all

DeclareModule Summernote
	
	Global IsInitialized
	
	Declare Init(Callback)
	Declare BindGadget(element_id.s, lang.s="es-ES",placeholder.s="",tabsize.i=2,width.i=500,height.i=150)
	
EndDeclareModule

Module Summernote
  
  Procedure.i PageInclude(FileName.s, FileType.s="")
    ; by eddy (http://forums.spiderbasic.com/viewtopic.php?f=9&t=153)
    If FileType = "" : FileType = GetExtensionPart(FileName) : EndIf
    Select LCase(FileType)
      Case "less"
        !$('<link rel="stylesheet/less" type="text/css">').attr('href',v_filename).appendTo('head');
      Case "css"
        !$('<link rel="stylesheet" type="text/css">').attr('href',v_filename).appendTo('head');
      Case "js"
        !$('<script type="text/javascript"></script>').attr('src',v_filename).appendTo('head');
    EndSelect
  EndProcedure
  
  
	Procedure Init(Callback)
	  
	  If IsInitialized: ProcedureReturn: EndIf
	  
    PageInclude("https://code.jquery.com/jquery-3.2.1.slim.min.js")
    PageInclude("https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css")
    PageInclude("https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js")
    ;PageInclude("lang/summernote-es-ES.js")   ; is not included or found
		
		IsInitialized = #True
		
		!     v_callback();
		
	EndProcedure  
	
	Procedure BindGadget(element_id.s, lang.s="es-ES",placeholder.s="",tabsize.i=2,width.i=500,height.i=150)
    !  $(v_element_id).summernote({
;    !    lang: v_lang,
    !    placeholder: v_placeholder,
    !    tabsize: v_tabsize,
    !    width: v_width,
    !    height: v_height
    !  });
  EndProcedure
EndModule

Code: Select all

XIncludeFile "summernote.sbi"

Procedure Main()
  Protected Element_Id.s
  
  OpenWindow(0,0,0,700,500,"Summernote test",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  EditorGadget(0,10,10,100,100)
  Element_Id = "#dijit_form_SimpleTextarea_"+"0"

  Summernote::BindGadget(Element_Id)
EndProcedure

Summernote::Init(@Main())

Re: summernote WYSIWYG editor can be used with sb?

Posted: Mon Apr 30, 2018 8:28 am
by Peter

Code: Select all

DeclareModule Summernote
  
  Global IsInitialized
  
  Declare Init(Callback)
  
  Declare BindGadget(Gadget, Language.s)
  
EndDeclareModule

Module Summernote
  
  Procedure Init(Callback)
    
    If IsInitialized : ProcedureReturn : EndIf
    
    ! $('<link rel="stylesheet" type="text/css">').attr('href','https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/summernote-lite.css').appendTo('head');    
    
    ! require(["https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/summernote-lite.min.js"], function() {
    !   require(["https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/lang/summernote-es-ES.min.js"], function() {
    IsInitialized = #True
    !       v_callback();
    !   });
    ! });
    
  EndProcedure  
  
  Procedure BindGadget(Gadget, Language.s)
    
    ! var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
    
    ! selector.summernote({
    !   height: selector.height(),
    !   lang: v_language
    ! });
    
  EndProcedure
  
EndModule

Procedure Main()
  
  OpenWindow(0, 0, 0, 500, 500, "Summernote test", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  ContainerGadget(0, 10, 10, 480, 380) : CloseGadgetList()
  
  Summernote::BindGadget(0, "es-ES")
  
EndProcedure

Summernote::Init(@Main())
Greetings ... Peter

Re: summernote WYSIWYG editor can be used with sb?

Posted: Mon Apr 30, 2018 3:40 pm
by ehbarba
This is great Peter. Thank you again.

Greetings

Ezequiel

Re: summernote WYSIWYG editor can be used with sb?

Posted: Wed Oct 24, 2018 1:03 pm
by Dirk Geppert
:o Wow! That looks like a great html editor. Does anyone use it? I would like to know how it is possible to add text to the editor and how to read the text?

Ciao Dirk

Re: summernote WYSIWYG editor can be used with sb?

Posted: Wed Oct 24, 2018 1:38 pm
by Peter
Dirk Geppert wrote:I would like to know how it is possible to add text to the editor and how to read the text?

Code: Select all

DeclareModule Summernote
  
  Global IsInitialized
  
  Declare Init(Callback)
  
  Declare BindGadget(Gadget, Language.s)
  
  Declare.s GetHtml(Gadget)
  Declare   SetHtml(Gadget, Html.s)
  
EndDeclareModule

Module Summernote
  
  Procedure Init(Callback)
    
    If IsInitialized : ProcedureReturn : EndIf
    
    ! $('<link rel="stylesheet" type="text/css">').attr('href','https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/summernote-lite.css').appendTo('head');    
    
    ! require(["https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/summernote-lite.min.js"], function() {
    !   require(["https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/lang/summernote-de-DE.min.js"], function() {
    IsInitialized = #True
    !       v_callback();
    !   });
    ! });
    
  EndProcedure  
  
  Procedure BindGadget(Gadget, Language.s)
    
    ! var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
    
    ! selector.summernote({
    !   height: selector.height(),
    !   lang: v_language
    ! });
    
  EndProcedure
  
  Procedure.s GetHtml(Gadget)
    
    Protected ReturnValue.s
    
    ! var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
    ! v_returnvalue = selector.summernote('code');
    
    ProcedureReturn ReturnValue
    
  EndProcedure
  
  Procedure SetHtml(Gadget, Html.s)
    ! var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
    ! selector.summernote('code', v_html);
  EndProcedure
  
  
EndModule

Procedure Main()
  
  OpenWindow(0, 0, 0, 500, 500, "Summernote test", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  ContainerGadget(0, 10, 10, 480, 380) : CloseGadgetList()
  
  Summernote::BindGadget(0, "de-DE")
  
  
  Summernote::SetHtml(0, "Hello <span style='color:red'>World!</span>")
  
  Debug Summernote::GetHtml(0)
  
  
EndProcedure

Summernote::Init(@Main())
Greetings ... Peter

Re: summernote WYSIWYG editor can be used with sb?

Posted: Thu Oct 25, 2018 7:30 am
by Dirk Geppert
Peter: you're great! :D