7
\$\begingroup\$

I use TinyMCE with responsivefilemanager and I wanted to know that is my code well-written maintainable and readable, Sorry If this sounds like a stupid and basic question because this is such a basic thing to do, and I have also been in web dev for a long time but I am new at WYSIWYG editors and TinyMCE.

Here is my file structure

Website's main parent folder/public_html
    myapp folder for the whole app
      my HTML & some PHP files which use TinyMCE and responsivefilemanager
      my tinyMCE's init.js file
      plugins folder for all my 3rd party plugins
        TinyMCE folder which contains TinyMCE itself
          other folders you find inside TinyMCE
          a plugins folder inside TinyMCE used for plugins related to it
            filemanager folder for the responsivefilemanager plugin

Here is my necessary code of config.php file which is inside the filemanager's config folder

<?php

    /*
        |--------------------------------------------------------------------------
        | DON'T TOUCH (base url (only domain) of site).
        |--------------------------------------------------------------------------
        |
        | without final / (DON'T TOUCH)
        |
        */
        'base_url' => ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http"). "://". @$_SERVER['HTTP_HOST'],
        /*
        |--------------------------------------------------------------------------
        | path from base_url to base of upload folder
        |--------------------------------------------------------------------------
        |
        | with start and final /
        |
        */
        'upload_dir' => '/myapp/uploads/',
        /*
        |--------------------------------------------------------------------------
        | relative path from filemanager folder to upload folder
        |--------------------------------------------------------------------------
        |
        | with final /
        |
        */
        'current_path' => '../../uploads/',

        /*
        |--------------------------------------------------------------------------
        | relative path from filemanager folder to thumbs folder
        |--------------------------------------------------------------------------
        |
        | with final /
        | DO NOT put inside upload folder
        |
        */
        'thumbs_base_path' => '../../thumb/',
?>

My init.js file so I can initialize TinyMCE for my textarea

         tinymce.init({
            selector: "textarea",
            plugins: [
                "advlist autolink link image lists charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
                "table contextmenu directionality emoticons paste textcolor responsivefilemanager code codesample"
            ],
            toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",
            toolbar2: "| responsivefilemanager | link unlink anchor | image media | codesample | forecolor backcolor  | print preview code ",
            image_advtab: true,
            branding: false,

            external_filemanager_path: "plugins/filemanager/",
            filemanager_title: "Scintilla Filemanager for Lessons",
            external_plugins: {
                "filemanager": "plugins/filemanager/plugin.min.js"
            }
        });

        tinymce.init(demoBaseConfig);
\$\endgroup\$
7
\$\begingroup\$

How you want to arrange your JS files depends also on your build processes too, and whether you want to utilise the cloud version of TinyMCE, or a self-hosted one.

If you're sticking with self-hosted, I find it easier to move external plugins out of the TinyMCE folder - this just makes updating the TinyMCE core easier. You can replace an entire TinyMCE folder with a new version, and know that the Responsive File Manager is not lost.

I would recommend splitting any external plugins (like Responsive File Manager, or anything else you write yourself too) to a separate folder outside of the TinyMCE folder - in the long run, just makes it easier to maintain.

Alternatively, you could use the TinyMCE cloud version - which means you don't need to host it yourself, and you would get the minor point updates as they come out (which for the 5 version have had some really nice features added). To do this, you can visit tiny.cloud and sign up for an API key, which is free. They offer premium plugins at a cost if there are features that you want to use.

For the config.php file, that all looks fine - it's about tweaking it to suit your folder structure.

In your init.js file, I'm assuming you have two different TinyMCE configs? If that is not the case, and you only have one configuration, then you don't need your second init call - the one that references "demoBaseConfig" could be removed.

The first call is initialising TinyMCE on any textarea, using the plugins and toolbar as stated, and hooking in to the Responsive File Manager.

If you wanted to clean it up, you could slim down your plugins array to only include those that you're actually using. There are some plugins here that you don't have in your toolbar, so could slim down the configuration further.

One thing I have done when using TinyMCE is have a number of JS objects that store different configurations, with a selector of "textarea.simple" or "textarea.full" (for two editor types).

The two configurations here are a simple editor (such as maybe basic text choices, adding links, etc) where as the full is a more feature-rich experience too. There are times when you may want to give your users a HTML editor but without too many options (such as for a bio or small snippet) and others where they need a full suite of options (like an article editor). This is more about UX, but just something to be aware of - not every TinyMCE instance needs to look the same.

If you were to go down this path, you would have one init call per configuration option, such as:

tinymce.init({
    selector: "textarea.simple",
    ... 
    [whatever simple config options you need]
});

tinymce.init({
    selector: "textarea.full",
    ... 
    [whatever full suite config options you need]
});

Just remember to add the appropriate class to your textarea and you'll be good to go.

\$\endgroup\$
5
  • \$\begingroup\$ Thank you Marty for such a helpful answer and I see that you are a new contributor so good luck buddy. \$\endgroup\$
    – LIL LOFIE
    Jun 20 '20 at 2:37
  • \$\begingroup\$ You're welcome! First time contributor, but long time TinyMCE user (I also write some blog posts for the Tiny team too) \$\endgroup\$
    – MartyF
    Jun 20 '20 at 3:26
  • \$\begingroup\$ aam as you said you are a long time tinymce user can I have some help from you. \$\endgroup\$
    – LIL LOFIE
    Jul 2 '20 at 20:05
  • \$\begingroup\$ Sure thing - perhaps create a new question here just to keep on topic - or send me an email (contact form is on my website, and link is in my profile). Happy to help where I can. \$\endgroup\$
    – MartyF
    Jul 3 '20 at 23:48
  • \$\begingroup\$ I replied to you on the contact form of your website, my email was graphicson28@gmail.com \$\endgroup\$
    – LIL LOFIE
    Jul 5 '20 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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