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

summernote WYSIWYG editor can be used with sb?

by ehbarba Mon Apr 30, 2018 2:45 am

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: 553
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Re: summernote WYSIWYG editor can be used with sb?

by Peter Mon Apr 30, 2018 8:28 am

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: 24
Joined: Thu Mar 29, 2018 2:20 am

Re: summernote WYSIWYG editor can be used with sb?

by ehbarba Mon Apr 30, 2018 3:40 pm

This is great Peter. Thank you again.

Greetings

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

Re: summernote WYSIWYG editor can be used with sb?

by Dirk Geppert Wed Oct 24, 2018 1:03 pm

: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: 553
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Re: summernote WYSIWYG editor can be used with sb?

by Peter Wed Oct 24, 2018 1:38 pm

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: 88
Joined: Fri Sep 22, 2017 7:02 am

Re: summernote WYSIWYG editor can be used with sb?

by Dirk Geppert Thu Oct 25, 2018 7:30 am

Peter: you're great! :D
Return to Javascript

Who is online

Users browsing this forum: No registered users and 2 guests