How to add all features in HTML Editor TinyMCE

In this board you can talk about general questions about phpMyFAQ

Moderator: Thorsten

Post Reply
iconic
Posts: 45
Joined: Sat Jul 23, 2016 4:25 am

How to add all features in HTML Editor TinyMCE

Post by iconic » Tue Apr 07, 2020 11:33 pm

Hi, is there a way to have all the Full Featured: Non-Premium Plugins working on the TinyMCE editor. At the moment the menu options are basic and I would prefer to be able to use quite a lot of the Full Featured: Non-Premium Plugins for TineyMCE.

How do I add this to the current setup similar to https://www.tiny.cloud/docs/demo/full-f ... iumplugins

Thorsten
Posts: 15025
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: How to add all features in HTML Editor TinyMCE

Post by Thorsten » Wed Apr 08, 2020 5:25 am

Hi,

which ones are missing?

https://github.com/thorsten/phpMyFAQ/bl ... hp#L91-L96

Please note, that we use TinyMCE v4 currently, the update to TinyMCE v5 is planned for phpMyFAQ v3.1

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist

iconicperformances
Posts: 37
Joined: Fri Sep 15, 2017 8:49 am

Re: How to add all features in HTML Editor TinyMCE

Post by iconicperformances » Wed Apr 08, 2020 5:32 am

All of them. If you click on the link I gave you, it shows other features like the font name, font size, paragraphs. The link I put up shows the whole toolbar and features. Compared to the limited buttons and features that show up on the HTML editor.

Thorsten
Posts: 15025
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: How to add all features in HTML Editor TinyMCE

Post by Thorsten » Wed Apr 08, 2020 5:41 am

Hi,

I'll check the missing ones.

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist

iconicperformances
Posts: 37
Joined: Fri Sep 15, 2017 8:49 am

Re: How to add all features in HTML Editor TinyMCE

Post by iconicperformances » Wed Apr 08, 2020 5:48 am

Okay.

Thorsten
Posts: 15025
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: How to add all features in HTML Editor TinyMCE

Post by Thorsten » Fri Apr 10, 2020 8:58 am

Hi,

phpMyFAQ 3.0.2 will include all possible option for v4: https://www.tiny.cloud/docs-4x/demo/full-featured/

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist

iconic
Posts: 45
Joined: Sat Jul 23, 2016 4:25 am

Re: How to add all features in HTML Editor TinyMCE

Post by iconic » Tue Apr 28, 2020 1:49 am

Hi thank you for updating me. When we updated to v3.0.2 it didn't have all the features that the WSYIWYG Editor of tinymce offers.
I think it makes your software more user and editor friendly when you allow all of the toolbars items of the editor available.

I had one of my programmers amend the phpyMyFAQ to show you what I mean.

I did not include the File Menu you normal use. You can add this to.

Hope you can add this to your next minor update.
You do not have the required permissions to view the files attached to this post.

Thorsten
Posts: 15025
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: How to add all features in HTML Editor TinyMCE

Post by Thorsten » Tue Apr 28, 2020 9:25 am

Hi,

for 3.0.3 it will look like this:
Bildschirmfoto 2020-04-28 um 10.24.25.png
If that's not enough, please provide a patch via pull request. I added all plugins from the standard TinyMCE v4 package

bye
Thorsten
You do not have the required permissions to view the files attached to this post.
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist

iconic
Posts: 45
Joined: Sat Jul 23, 2016 4:25 am

Re: How to add all features in HTML Editor TinyMCE

Post by iconic » Tue Apr 28, 2020 10:49 am

I do not know how to do that pull request however this is what was done to use all the available configurations.

Code: Select all

 at ...admin\footer.php, where the JS to enable tinymce editor was written.

tinyMCE.init({

              // General options

              language: '<?=(Language::isASupportedTinyMCELanguage($faqLangCode) ? $faqLangCode : 'en') ?>',

              selector: 'textarea#<?= ('add-news' == $action || 'edit-news' == $action) ? 'news' : 'answer' ?>',

              menubar : false,

              theme: 'modern',

              fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt",

              font_formats:

                "Arial=arial,helvetica,sans-serif;"+

                "Arial Black=arial black,avant garde;"+

                "Calibri=calibri;"+

                "Comic Sans MS=comic sans ms,sans-serif;"+

                "Courier New=courier new,courier;"+

                "Georgia=georgia,palatino;"+

                "Helvetica=helvetica;"+

                "Impact=impact,chicago;"+

                "Symbol=symbol;"+

                "Tahoma=tahoma,arial,helvetica,sans-serif;"+

                "Terminal=terminal,monaco;"+

                "Times New Roman=times new roman,times;"+

                "Verdana=verdana,geneva;"+

                "Webdings=webdings;"+

                "Wingdings=wingdings,zapf dingbats",

              plugins: [

                "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker fullpage toc",

                "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking codesample autosave",

                "save table contextmenu directionality emoticons template paste textcolor imagetools colorpicker textpattern help phpmyfaq"

              ],

              relative_urls: false,

              convert_urls: false,

              document_base_url: '<?= $faqConfig->getDefaultUrl() ?>',

              remove_linebreaks: false,

              use_native_selects: true,

              paste_remove_spans: true,

              entities: '10',

              entity_encoding: 'raw',

              toolbar1: "newdocument | undo redo | bold italic underline subscript superscript strikethrough | styleselect | formatselect | fontselect | fontsizeselect | outdent indent | alignleft aligncenter alignright alignjustify | removeformat",

              toolbar2: "insertfile | cut copy paste pastetext codesample | bullist numlist | link unlink anchor image media | charmap | insertdatetime | table | forecolor backcolor emoticons | searchreplace | spellchecker | hr | pagebreak | code | phpmyfaq print | preview | custFontSize | fullscreen",

              height: '<?= ('add-news' == $action || 'edit-news' == $action) ? '20vh' : '50vh' ?>',

              image_advtab: true,

              image_class_list: [

                {title: 'None', value: ''},

                {title: 'Responsive', value: 'img-fluid'}

              ],

              image_dimensions: true,

 

              // Formatting

              style_formats: [

                {

                  title: 'Headers', items: [

                    {title: 'h1', block: 'h1'},

                    {title: 'h2', block: 'h2'},

                    {title: 'h3', block: 'h3'},

                    {title: 'h4', block: 'h4'},

                    {title: 'h5', block: 'h5'},

                    {title: 'h6', block: 'h6'}

                  ]

                },

 

                {

                  title: 'Blocks', items: [

                    {title: 'p', block: 'p'},

                    {title: 'div', block: 'div'},

                    {title: 'pre', block: 'pre'},

                    {title: 'code', block: 'code'}

                  ]

                },

 

                {

                  title: 'Containers', items: [

                    {title: 'blockquote', block: 'blockquote', wrapper: true},

                    {title: 'figure', block: 'figure', wrapper: true}

                  ]

                }

              ],

 

              paste_word_valid_elements: "b,strong,i,em,h1,h2,h3,h4,h5,h6",

              paste_data_images: true,

              visualblocks_default_state: true,

              end_container_on_empty_block: true,

              extended_valid_elements: "code[class],video[*],audio[*],source[*],iframe[*]",

              removeformat: [

                {selector: '*', attributes: ['style'], split: false, expand: false, deep: true}

              ],

              importcss_append: true,

 

              // Save function

              save_onsavecallback: () => {

                phpMyFAQSave();

              },

 

              // phpMyFAQ CSS

              content_css: '../KB/assets/dist/styles.css?<?= time(); ?>',

 

              // Replace values for the template plugin

              template_replace_values: {

                username: '<?= addslashes($user->userdata->get('display_name')) ?>',

                user_id: '<?= $user->userdata->get('user_id') ?>'

              },

 

              // File browser

              file_browser_callback: function (fieldName, url, type, win) {

                let fileBrowser = 'image.browser.php';

                fileBrowser += (fileBrowser.indexOf('?') < 0) ? '?type=' + type : '&type=' + type;

                tinymce.activeEditor.windowManager.open({

                  title: 'Select an image',

                  url: fileBrowser,

                  width: 640,

                  height: 480

                }, {

                  window: win,

                  input: fieldName

                });

 

                return false;

              },

 

              // without images_upload_url set, Upload tab won't show up

              images_upload_url: 'index.php?action=ajax&ajax=image&ajaxaction=upload',

 

              // override default upload handler to simulate successful upload

              images_upload_handler: (blobInfo, success, failure) => {

                let xhr, formData;

 

                xhr = new XMLHttpRequest();

                xhr.withCredentials = false;

                xhr.open('POST', 'index.php?action=ajax&ajax=image&ajaxaction=upload&csrf=<?= $user->getCsrfTokenFromSession() ?>');

 

                xhr.onload = () => {

                  let json;

 

                  if (xhr.status !== 200) {

                    failure('HTTP Error: ' + xhr.status);

                    return;

                  }

 

                  json = JSON.parse(xhr.responseText);

 

                  if (!json || typeof json.location !== 'string') {

                    failure('Invalid JSON: ' + xhr.responseText);

                    return;

                  }

 

                  success(json.location);

                };

 

                formData = new FormData();

                formData.append('file', blobInfo.blob(), blobInfo.filename());

 

                xhr.send(formData);

              },

 

              // Custom params

              csrf: $('#csrf').val()

            });
            

Thorsten
Posts: 15025
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: How to add all features in HTML Editor TinyMCE

Post by Thorsten » Tue Apr 28, 2020 10:59 am

Hi,

thanks, I'll try!

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist

Thorsten
Posts: 15025
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: How to add all features in HTML Editor TinyMCE

Post by Thorsten » Tue Apr 28, 2020 12:11 pm

Hi,

okay, added all for 3.0.3.

One question, why adding the spellchecker which won't work except if you pay for that?

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist

iconic
Posts: 45
Joined: Sat Jul 23, 2016 4:25 am

Re: How to add all features in HTML Editor TinyMCE

Post by iconic » Tue Apr 28, 2020 1:10 pm

We use that in our own developed software program. When I asked our programmers too add our toolbar in myphpfaq they added everything we use, including those we paid for. You don’t have to add it if you don’t wish.

treichelt
Posts: 5
Joined: Fri May 20, 2016 12:14 am

Re: How to add all features in HTML Editor TinyMCE

Post by treichelt » Tue Jun 30, 2020 3:28 pm

We do a lot of cut and paste which includes pictures / graphics.
is there a way we can enable that feature?
tiny seems to have that paste option disabled by default

paste_data_images
This option specifies whether data:url images (inline images) should be removed or not from the pasted contents.

Setting paste_data_images to "true" will allow the pasted images, while setting it to "false" will disallow pasted images.

Danke
Thorsten

Thorsten
Posts: 15025
Joined: Tue Sep 25, 2001 11:14 am
Location: #phpmyfaq
Contact:

Re: How to add all features in HTML Editor TinyMCE

Post by Thorsten » Wed Jul 01, 2020 11:09 am

Hi,

Code: Select all

paste_data_images: true,
is already included in the upcoming 3.0.4 release.

bye
Thorsten
phpMyFAQ Maintainer and Lead Developer
amazon.de Wishlist

Post Reply