Embedding TinyMCE editor

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

Embedding TinyMCE editor

Post by spidernet »

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

Re: Embedding TinyMCE editor

Post by Peter »

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: 72
Joined: Tue Feb 02, 2016 3:50 pm

Re: Embedding TinyMCE editor

Post by spidernet »

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

Re: Embedding TinyMCE editor

Post by ehbarba »

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

Re: Embedding TinyMCE editor

Post by Peter »

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

Re: Embedding TinyMCE editor

Post by ehbarba »

Works great Peter. Thank you.

Ezequiel
Post Reply