How to use/install tinymce for textareas

Post any questions you have about using the Verj.io Studio, including client and server-side programming with Javascript or FPL, and integration with databases, web services etc.

Moderators: Jon, Steve, Ian, Dave

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

How to use/install tinymce for textareas

#1

Postby fronsky » Tue Jul 17, 2018 2:45 pm

It's not clear to me how to integrate tinymce in the forms for editing textareas. Can somebody assist with more information (or url) on this?
0 x

ericb
Ebase User
Posts: 82
Joined: Fri Jan 15, 2016 2:34 pm

Re: How to use/install tinymce for textareas

#2

Postby ericb » Tue Jul 17, 2018 3:23 pm

It seems like there's both a cloud and a self-hosted option. Assuming you're doing self-hosted, here are their isntructions for getting started: https://www.tiny.cloud/docs/get-started/first-steps/

Or are are you looking for how to integrate it into Ebase specifically?
0 x

Jon
Moderator
Moderator
Posts: 1342
Joined: Wed Sep 12, 2007 12:49 pm

Re: How to use/install tinymce for textareas

#3

Postby Jon » Tue Jul 17, 2018 3:27 pm

1. Add the tinymce javascript to the page or form using the web resources property or tab
2. Add jQuery javascript to the page e.g. //code.jquery.com/jquery-3.1.1.min.js
3. Create a field with display type textarea and drag it on the page
4. Select HTML Element Properties for the field control just added, click the Editor Input tab, and configure an id - say "mytextarea"
5. Under Custom Event Handlers add a jQuery ready event to the same field control (or it could be on any parent control) containing something like this - this is the simplest possible example with no specific configuration:

Code: Select all

tinymce.init({
    selector: '#mytextarea'
  }); 
..where the selector property contains the id configured earlier. Here's a more complicated example:

Code: Select all

if (tinymce.editors && tinymce.editors.length > 0)
{
	tinymce.remove();
}
tinymce.init({
    selector: '#mytextarea',
    plugins: "autolink link lists print preview textcolor",
    toolbar: "undo redo | styleselect | forecolor backcolor | bold italic | alignleft aligncenter alignright | bullist numlist | indent outdent | link image",
    default_link_target: "_blank",
    browser_spellcheck: true,
    menubar: false,
    statusbar: true,
    elementpath: false,
    branding: false,
    auto_focus: true,
    entity_encoding: "raw",
    setup : function(editor) 
    {
    	  editor.on('blur', function(e) 
    	  {
     	tinymce.triggerSave();
       });
     }
  });
  
See the tinymce website for configuration/options details.
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: How to use/install tinymce for textareas

#4

Postby fronsky » Wed Jul 18, 2018 1:05 pm

Thank you for your quick response!

I configured this and it works, but need to play around with settings, because I get a very small editbox. Probably the related CSS. What surprised me is that the field label is also within the edit box. I will play around with it.
0 x

ericb
Ebase User
Posts: 82
Joined: Fri Jan 15, 2016 2:34 pm

Re: How to use/install tinymce for textareas

#5

Postby ericb » Wed Jul 18, 2018 1:28 pm

fronsky wrote:
Wed Jul 18, 2018 1:05 pm
What surprised me is that the field label is also within the edit box. I will play around with it.
I suspect you may have put your ID on the field control in general rather than the Editor control.
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: How to use/install tinymce for textareas

#6

Postby fronsky » Wed Jul 18, 2018 1:47 pm

I appears that the smallness is due to the fact that the edit box is in the position of the fieldlabel and using the same width as the field label. The fieldlabel is in the tinymce edit box title.
Image
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: How to use/install tinymce for textareas

#7

Postby fronsky » Wed Jul 18, 2018 1:48 pm

I'll check the controls
0 x

fronsky
Ebase User
Posts: 86
Joined: Thu Mar 08, 2018 2:52 pm

Re: How to use/install tinymce for textareas

#8

Postby fronsky » Wed Jul 18, 2018 1:53 pm

:oops:

You're right. Thats when you use a new product. Thanks
0 x

Jon
Moderator
Moderator
Posts: 1342
Joined: Wed Sep 12, 2007 12:49 pm

Re: How to use/install tinymce for textareas

#9

Postby Jon » Wed Jul 18, 2018 2:51 pm

I've updated the description above to say that the id should be added to the Editor tab.
0 x


Who is online

Users browsing this forum: No registered users and 9 guests