summernote WYSIWYG editor can be used with sb?

Using Javascript from SpiderBasic
ehbarba
Posts: 31
Joined: Thu Mar 29, 2018 2:20 am

summernote WYSIWYG editor can be used with sb?

Post 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())
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: summernote WYSIWYG editor can be used with sb?

Post 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
ehbarba
Posts: 31
Joined: Thu Mar 29, 2018 2:20 am

Re: summernote WYSIWYG editor can be used with sb?

Post by ehbarba »

This is great Peter. Thank you again.

Greetings

Ezequiel
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: summernote WYSIWYG editor can be used with sb?

Post 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
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: summernote WYSIWYG editor can be used with sb?

Post 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
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: summernote WYSIWYG editor can be used with sb?

Post by Dirk Geppert »

Peter: you're great! :D
Post Reply