Remove From My Forums

TinyMce control has problem after it load in page

Question
0

Sign in to vote

User-1350042179 posted

Hi

I have tinymce in a web page..

It shows information...

But the pages has problems after it finished to load..

I causes that each time that change to partial view of the same web page, tinymce controls in different pages can not load...

For instance..

Saturday, April 13, 2019 4:33 AM

Answers

User-1350042179 posted

I found the solution...

Before to go another route in knockout, I remove all the editors which where loaded in the last partial view.

I applied the code.

 if (typeof tinyMCE !== 'undefined') {
                tinyMCE.remove();
            }

This is the redirection code:

  this.get('#TerminosYCondiciones', function () {
                self.GoToModule({ viewName: 'TerminosYCondiciones/TerminosYCondicionesRegistro', viewModelName: 'TerminosYCondicionesRegistro', replaceLast: true, promptExit: false });
            });

   self.GoToModule = function (moduleInfo) {
            
            if (typeof tinyMCE !== 'undefined') {
                tinyMCE.remove();
            }

            var focusTab = function (tabId) {
                ko.utils.arrayForEach(self.ApplicationTabs(), function (val) {
                    val.Activo(val.TabId === tabId);
                });
            };

I see that in a spa app, js files of the current and previous partial view are in the current view so the tiny fails.

And don't forget that essential tiny js files are loaded in each partialview which cases that the controls can not load

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Saturday, April 27, 2019 12:19 AM

All replies

0

Sign in to vote

User475983607 posted

Most likely you created an absolute or hard-coded .css file reference. Always use a relative reference.

Absolute and relative file reference doc.

https://www.w3schools.com/html/html_filepaths.asp

Also it appears you are using synchronous AJAX which is not recommended as it runs the risk of locking up the UI.

Saturday, April 13, 2019 1:03 PM

User-1350042179 posted

The problem is when I visit a page with tiny and after visited others I return to the first page and I see that the tiny control doesn't load.

I have a SPA app which works with Knockout and Summy to the routes.

The function timymce.init of the first partial view is:

  setTimeout(function () {
                    debugger;
                    tinymce.init({
                        menubar: false,
                        language: 'es_MX', 
                        selector: '#idCaracteristicas',
                        height: 200,
                        theme: 'modern',
                        plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools colorpicker textpattern',
                        toolbar1: 'bold italic strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
                        image_advtab: true,
                        templates: [
                            { title: 'Test template 1', content: 'Test 1' },
                            { title: 'Test template 2', content: 'Test 2' }
                        ],
                        content_css: [
                            
                        ]
                    });
                }, 1000);

The function timymce.init of the second partial view is:

 setTimeout(function () {
                    debugger;
                    tinymce.init({
                        menubar: false,
                        language: 'es_MX', 
                        selector: '#idtest',
                        height: 200,
                        theme: 'modern',
                        plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools colorpicker textpattern',
                        toolbar1: 'bold italic strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
                        image_advtab: true,
                        templates: [
                            { title: 'Test template 1', content: 'Test 1' },
                            { title: 'Test template 2', content: 'Test 2' }
                        ],
                        content_css: [
                            
                        ]
                    });
                }, 1000);

I identify that the error is in init fx,

Sunday, April 14, 2019 4:52 AM

User839733648 posted

Hi neoaguil17,

According to your description, it seems that there are two kinds of error messages you have.

Two are about the CSS file you've added to your page. The files are failed to load.

As mgebhard has suggested, have you tried to add the CSS files as relative reference?

Or you could try to comment the code which added the CSS file to your page to check if it is the reason.

About the Uncaught TypeError, I'd like to ask that do you use the requestAnimationFrame?

Besides,I've added two tinymce in one page and you may refer to.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.3/tinymce.min.js"></script>
    <script src="Reference/es_MX.js"></script>
    <script>
        setTimeout(function () {
            tinymce.init({
                menubar: false,
                language: 'es_MX',
                selector: '#idCaracteristicas',
                height: 200,
                plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools colorpicker textpattern',
                toolbar1: 'bold italic strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
                image_advtab: true,
                templates: [
                    { title: 'Test template 1', content: 'Test 1' },
                    { title: 'Test template 2', content: 'Test 2' }
                ],
                content_css: [

                ]
            });
        }, 1000);
        setTimeout(function () {
            tinymce.init({
                menubar: false,
                language: 'es_MX',
                selector: '#idtest',
                height: 200,
                plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools colorpicker textpattern',
                toolbar1: 'bold italic strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
                image_advtab: true,
                templates: [
                    { title: 'Test template 1', content: 'Test 1' },
                    { title: 'Test template 2', content: 'Test 2' }
                ],
                content_css: [

                ]
            });
        }, 1000);
    </script>
</head>
<body>
    <textarea id="idCaracteristicas">
    </textarea>
    <textarea id="idtest">
    </textarea>
</body>
</html>

result:

Best Regards,

Jenifer

Monday, April 15, 2019 6:22 AM

0

Sign in to vote

User-1350042179 posted

HI

I fixed the problem about requestanimation,,

I published the app (the controls are in different partials: the menu loaded once but partials of the tinymce controls load when I call the links) in:

http://www.webcentenario.somee.com/#Autenticacion

The credentials: user:admin, password: 1234

When I enter in: http://www.webcentenario.somee.com/#ProyectoRegistro, I can see the tinymce

But when I go to : http://www.webcentenario.somee.com/#TerminosYCondiciones,

the tinymce of the another partial view dissapeard the 50 % percent..

Saturday, April 20, 2019 3:57 AM
0

Sign in to vote

User839733648 posted

Hi neoaguil17,

I've checked the link on my side and the second tinymce is the same size as the first one.

I'd like to ask that which browser you're using. Maybe this is the reason that affects this.

Best Regards,

Jenifer

Thursday, April 25, 2019 8:26 AM
0

Sign in to vote

User-1350042179 posted

Hi

I use Google Chrome...

Friday, April 26, 2019 4:23 AM
0

Sign in to vote

User839733648 posted

Hi neoaguil17,

I've tested on my Chrome. And I've also tested on other PC's Chrome. They all work well on my side.

In my opinion, this may be not related to the issue of ASP.NET.

I guess that it may be because of the compatibility of the editor.

I suggest you could go https://github.com/tinymce/tinymce/issues to ask for help.

Best Regards,

Jenifer

Friday, April 26, 2019 6:05 AM

User-1350042179 posted

I found the solution...

Before to go another route in knockout, I remove all the editors which where loaded in the last partial view.

I applied the code.

 if (typeof tinyMCE !== 'undefined') {
                tinyMCE.remove();
            }

This is the redirection code:

  this.get('#TerminosYCondiciones', function () {
                self.GoToModule({ viewName: 'TerminosYCondiciones/TerminosYCondicionesRegistro', viewModelName: 'TerminosYCondicionesRegistro', replaceLast: true, promptExit: false });
            });

   self.GoToModule = function (moduleInfo) {
            
            if (typeof tinyMCE !== 'undefined') {
                tinyMCE.remove();
            }

            var focusTab = function (tabId) {
                ko.utils.arrayForEach(self.ApplicationTabs(), function (val) {
                    val.Activo(val.TabId === tabId);
                });
            };

I see that in a spa app, js files of the current and previous partial view are in the current view so the tiny fails.

And don't forget that essential tiny js files are loaded in each partialview which cases that the controls can not load

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Saturday, April 27, 2019 12:19 AM

Answered by:

TinyMce control has problem after it load in page

Question

Answers

All replies