Just starting out? Need help? Post your questions and find answers here.
spidernet
 
Posts: 67
Joined: Tue Feb 02, 2016 3:50 pm

Embedding TinyMCE editor

by spidernet Fri Apr 29, 2016 8:52 am

Hello

I try to embed TinyMCE to SB application, but there is something what I missed as I'm not JavaScript specialist.

Here is example code which almost works (opens TinyMCE in the Debug window!).

Could anybody fix and extend this code? I need to open TinyMCE in specific window and load/save HTML content from SB code.

Thank you.

Code: Select all
Procedure LoadScriptTinyMCE(Script.s, *OnLoadFunction)
  !$.getScript(v_script,p_onloadfunction);
EndProcedure


Procedure ScriptLoaded(script.s, status.s, jqxhr)
  If status<>"success" : ProcedureReturn : EndIf
  !tinymce.init({selector:'textarea',plugins:["textcolor colorpicker print"],toolbar:'forecolor backcolor print'});
 ; content.s
 ; !v_content = tinyMCE.activeEditor.getContent();
  ;Debug content
  ;!tinyMCE.activeEditor.setContent('<span>some</span> html');
EndProcedure

;!$('textarea').appendTo('body');


win = OpenWindow(0, 100, 100, 320, 200, "test", #PB_Window_SizeGadget)
!$('textarea').appendTo('spiderbody');


LoadScriptTinyMCE("https://cdn.tinymce.com/4/tinymce.min.js",@ScriptLoaded())
User avatar
Peter
 
Posts: 486
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Re: Embedding TinyMCE editor

by Peter Fri Apr 29, 2016 10:21 am

Code: Select all
#myWindow = 0
#myEditorGadget = 0

Procedure GadgetElement(Gadget, UseJquery.b = #True)
  Protected gadgetObject = GadgetID(Gadget)
  ! if (v_gadgetobject && v_gadgetobject.div) { return v_usejquery ? $(v_gadgetobject.div) : v_gadgetobject.div; }
EndProcedure

Procedure LoadScriptTinyMCE(Script.s, *OnLoadFunction)
  !$.getScript(v_script,p_onloadfunction);
EndProcedure

Procedure ScriptLoaded(script.s, status.s, jqxhr)
 
  If status<>"success" : ProcedureReturn : EndIf
 
  Protected EditorGadgetDiv = GadgetElement(#myEditorGadget)
 
  ! var EditorGadgetTextArea = $(v_editorgadgetdiv).find("textarea");
 
  ! tinymce.init({
  !   selector: "#" + $(EditorGadgetTextArea).attr("id"),
  !   plugins: ["textcolor colorpicker print"],
  !   toolbar:'forecolor backcolor print',
  !   width: 800,
  !   height: 490 // depends on menu, toolbar and statusbar...
  ! });
 
EndProcedure

OpenWindow(#myWindow, 100, 100, 800, 600, "TinyMCE")

EditorGadget(#myEditorGadget, 0, 0, WindowWidth(#myWindow), WindowHeight(#myWindow))

LoadScriptTinyMCE("https://cdn.tinymce.com/4/tinymce.min.js", @ScriptLoaded())


Greetings ... Peter
spidernet
 
Posts: 67
Joined: Tue Feb 02, 2016 3:50 pm

Re: Embedding TinyMCE editor

by spidernet Fri Apr 29, 2016 12:50 pm

Amazing, thank you so much Peter! :)
ehbarba
 
Posts: 24
Joined: Thu Mar 29, 2018 2:20 am

Re: Embedding TinyMCE editor

by ehbarba Mon Apr 30, 2018 3:23 am

Great contribution Peter. But I can not change the languaje. I downloaded the language file and included the following in the Init()

Code: Select all
  !     tinymce.init({
  !   selector: "#" + $(EditorGadgetTextArea).attr("id"),
* * *
  !       language: 'es_Mx',
  !       language_url: '/tinymce/langs/es_Mx.js',
* * *
  !     }); 


The languaje js file loads ok, I checked, but it does not works. What am I messing here???
User avatar
Peter
 
Posts: 486
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1

Re: Embedding TinyMCE editor

by Peter Mon Apr 30, 2018 12:38 pm

ehbarba wrote:The languaje js file loads ok, I checked, but it does not works. What am I messing here???


difficult to say. I tried this on my machine and it works if you just specify only the 'language_url' (not 'language' in addition).

Code: Select all
  ! tinymce.init({
  !   [...]
  !   language_url : '/resources/es.js'
  !   [...]
  ! });


Greetings ... Peter
ehbarba
 
Posts: 24
Joined: Thu Mar 29, 2018 2:20 am

Re: Embedding TinyMCE editor

by ehbarba Mon Apr 30, 2018 3:32 pm

Works great Peter. Thank you.

Ezequiel
Return to Coding Questions

Who is online

Users browsing this forum: No registered users and 2 guests