0

In my custom component form I have a text field that I want users to have the ability to add very simple styling to. I'm thinking bold, italic and link buttons. Is it possible to create and configure or load a TinyMCE profile that would be used by my component and fall back to a blank text editor if TinyMCE isn't active?

  • What's up? Have you created any editor (textarea) for your component, or you were just shocked from the simplicity of my answer and you need a more complex solution? Communication can also help. – Zollie Jan 28 at 15:49
  • I appreciate your answer and have explored it a little. I don't want to rely on an external site, so I have created a clone of the tinymce Joomla! plugin and I'm playing with it, serving a pared down version where needed. Time constraints are forcing me to forge ahead with simply a text area for the moment, but I will revisit this soon. – Rob Jan 28 at 17:13
  • Thanks for the feedback, I understand your point. My first thought was also a clone obviously, but I think it can get a bit painful. I did not want to suggest that. I wish you good luck anyway on your project. – Zollie Jan 28 at 18:22
  • I forgot to mention in my answer that you can of course download the tinymce.js file, save it to and you can load it locally from your component assets folder. So, you do not have to use external file with is. Thus the point of my suggestion was not using an external file. That’s just an example in my answer about how you can try that editor the fastest way on your layout. I usually do not know on which level people are when I’m answering a question and whether they know how to save and load a javascript file from local folder. Anyway, I just wanted to help you with this info a bit... – Zollie Jan 30 at 10:22
0

You can configure a customized editor in your component (we could write a long tale about that), however what I would do is just creating a simple textarea in your Joomla Form like:

<field name="mytextarea1" type="textarea" default="default" class="mytextarea1" label="Enter some text" description="" rows="10" cols="5" />

Then you should add a short script in the head of the page (you can load this in your layout of the component).

<head>

    <script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
    <script>
        tinymce.init({
            selector: '.mytextarea1'
        });
    </script>

</head>

And it's actually done. You will have a nice tiny light editor field.

You can set a lot of things in tinymce.init({}); after this. It's better to have an API key at tinymce. Also the submit button has to be fine tuned for your component.

Much more information about configurations and use of this here: https://www.tiny.cloud/docs/quick-start/

and here: https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/

You can try this with creating a simple html page:

<!DOCTYPE html>
<html lang="en">
<head>

    <script src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
    <script>
        tinymce.init({
            selector: '#mytextarea1'
        });
    </script>

</head>
<body>

<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
    <textarea id="mytextarea1">Hello, World!</textarea>
    <input type="submit" name="submit" value="submit" >
</form>

</body>
</html>
0

You can edit a custom set in Plugins -> TinyMCE, cleaning out most of the buttons, and assign to the target user group.

But that will make the same minimal set be used all over the site if the user is in the targeted user group.

If you change your editor to JCE, you can assign a profile (set) to either/both frontend and backend, assign by device (desktop, tablet and smartphone), as well as assign it for an individual component or user group. You can even assign to specific users, if you prefer.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.