comments - add Reply doesn't work #3673

Closed
MacKP opened this Issue Dec 5, 2011 · 17 comments

Comments

Projects
None yet
6 participants
@MacKP

MacKP commented Dec 5, 2011

When you don't have klicked the checkbox before (no Reply) and you klick at the Checkbox you will get an extra TinyMCE. But it is not possible to klick in the window. You can't write an Reply. At least it will work, when you save the page with an empty Reply.

Regards

@leofeyer

This comment has been minimized.

Show comment
Hide comment
@leofeyer

leofeyer Dec 12, 2011

Member

It does work in Chrome and Safari, so I assume it is a TinyMCE bug. I will update all plugins before the final release, so if you report the issue there, they might provide a fix.

Member

leofeyer commented Dec 12, 2011

It does work in Chrome and Safari, so I assume it is a TinyMCE bug. I will update all plugins before the final release, so if you report the issue there, they might provide a fix.

@leo-unglaub

This comment has been minimized.

Show comment
Hide comment
@leo-unglaub

leo-unglaub Dec 12, 2011

@MacKP is there a javascript error in your firefox console?

@MacKP is there a javascript error in your firefox console?

@leofeyer

This comment has been minimized.

Show comment
Hide comment
@leofeyer

leofeyer Jan 6, 2012

Member

I can confirm the issue in Firefox, however there is no fix availabel. It does work fine in all other browsers (FF is becoming the new IE). Maybe you can report the issue at the TinyMCE bug tracker?

Member

leofeyer commented Jan 6, 2012

I can confirm the issue in Firefox, however there is no fix availabel. It does work fine in all other browsers (FF is becoming the new IE). Maybe you can report the issue at the TinyMCE bug tracker?

@MacKP

This comment has been minimized.

Show comment
Hide comment
@MacKP

MacKP Nov 26, 2015

Leider funktioniert das auch beim neuen TinyMCE nicht (kann man in der Demo testen). Ich finde auch nichts beim TinyMCE dazu. Ich würde denen ja ein Ticket machen. Aber ich weiß nicht, wie ich denen das begreiflich machen soll, was denn da genau zu diesem Problem führt :(

MacKP commented Nov 26, 2015

Leider funktioniert das auch beim neuen TinyMCE nicht (kann man in der Demo testen). Ich finde auch nichts beim TinyMCE dazu. Ich würde denen ja ein Ticket machen. Aber ich weiß nicht, wie ich denen das begreiflich machen soll, was denn da genau zu diesem Problem führt :(

@Aybee

This comment has been minimized.

Show comment
Hide comment
@Aybee

Aybee Nov 26, 2015

Contributor

Sieht irgendwie so aus, als müsste TinyMCE nach dem Ajax auf diese Textarea neu aufgesetzt werden. Bzw. irgendetwas beim Aufsetzen geht schief, weil der RTE-Rahmen ist ja vorhanden. Nur das HTML in dem IFRAME sieht nach dem Ajax erstmal so aus.

<html>
  <head>
  </head>
  <body>
  </body>
</html>

Es müsste aber so aussehen.

<html>
  <head>
    <style id="mceDefaultStyles" type="text/css">
      .mce-content-body div.mce-resizehandle {
        position: absolute;
        border: 1px solid black;
        background: #FFF;
        width: 5px;
        height: 5px;
        z-index: 10000
      }
      .mce-content-body .mce-resizehandle:hover {
        background: #000
      }
      .mce-content-body img[data-mce-selected], hr[data-mce-selected] {
        outline: 1px solid black;
        resize: none
      }
      .mce-content-body .mce-clonedresizable {
        position: absolute;
        opacity: .5;
        filter: alpha(opacity=50);
        z-index: 10000
      }
      .mce-content-body .mce-resize-helper {
        background: #555;
        background: rgba(0,0,0,0.75);
        border-radius: 3px;
        border: 1px;
        color: white;
        display: none;
        font-family: sans-serif;
        font-size: 12px;
        white-space: nowrap;
        line-height: 14px;
        margin: 5px 10px;
        padding: 5px;
        position: absolute;
        z-index: 10001
      }
      img:-moz-broken {
        -moz-force-broken-image-icon: 1;
        min-width: 24px;
        min-height: 24px
      }
    </style>
    <base href="http://demo.contao.org/">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link href="http://demo.contao.org/assets/tinymce4/skins/contao/content.min.css" rel="stylesheet" type="text/css">
    <link href="http://demo.contao.org/system/themes/tinymce.css" rel="stylesheet" type="text/css">
    <link href="http://demo.contao.org/files/tinymce.css" rel="stylesheet" type="text/css">
  </head>
  <body contenteditable="true" data-id="ctrl_reply" class="mce-content-body " id="tinymce">
    <p><br data-mce-bogus="1"></p>
  </body>
</html>
Contributor

Aybee commented Nov 26, 2015

Sieht irgendwie so aus, als müsste TinyMCE nach dem Ajax auf diese Textarea neu aufgesetzt werden. Bzw. irgendetwas beim Aufsetzen geht schief, weil der RTE-Rahmen ist ja vorhanden. Nur das HTML in dem IFRAME sieht nach dem Ajax erstmal so aus.

<html>
  <head>
  </head>
  <body>
  </body>
</html>

Es müsste aber so aussehen.

<html>
  <head>
    <style id="mceDefaultStyles" type="text/css">
      .mce-content-body div.mce-resizehandle {
        position: absolute;
        border: 1px solid black;
        background: #FFF;
        width: 5px;
        height: 5px;
        z-index: 10000
      }
      .mce-content-body .mce-resizehandle:hover {
        background: #000
      }
      .mce-content-body img[data-mce-selected], hr[data-mce-selected] {
        outline: 1px solid black;
        resize: none
      }
      .mce-content-body .mce-clonedresizable {
        position: absolute;
        opacity: .5;
        filter: alpha(opacity=50);
        z-index: 10000
      }
      .mce-content-body .mce-resize-helper {
        background: #555;
        background: rgba(0,0,0,0.75);
        border-radius: 3px;
        border: 1px;
        color: white;
        display: none;
        font-family: sans-serif;
        font-size: 12px;
        white-space: nowrap;
        line-height: 14px;
        margin: 5px 10px;
        padding: 5px;
        position: absolute;
        z-index: 10001
      }
      img:-moz-broken {
        -moz-force-broken-image-icon: 1;
        min-width: 24px;
        min-height: 24px
      }
    </style>
    <base href="http://demo.contao.org/">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link href="http://demo.contao.org/assets/tinymce4/skins/contao/content.min.css" rel="stylesheet" type="text/css">
    <link href="http://demo.contao.org/system/themes/tinymce.css" rel="stylesheet" type="text/css">
    <link href="http://demo.contao.org/files/tinymce.css" rel="stylesheet" type="text/css">
  </head>
  <body contenteditable="true" data-id="ctrl_reply" class="mce-content-body " id="tinymce">
    <p><br data-mce-bogus="1"></p>
  </body>
</html>

@leofeyer leofeyer modified the milestone: x.x.x Apr 15, 2016

@leofeyer

This comment has been minimized.

Show comment
Hide comment
@leofeyer

leofeyer Aug 17, 2016

Member

After a lot of debugging, I found that the following fixes the issue on Firefox:

<script>
setTimeout(function() {
    window.tinymce && tinymce.init({
        // TinyMCE initialization code
    });
}, 0);

Now AFAIR, setTimeout(fn, 0) "pauses" the JavaScript execution to let the rendering threads catch up, am I right @aschempp?

Member

leofeyer commented Aug 17, 2016

After a lot of debugging, I found that the following fixes the issue on Firefox:

<script>
setTimeout(function() {
    window.tinymce && tinymce.init({
        // TinyMCE initialization code
    });
}, 0);

Now AFAIR, setTimeout(fn, 0) "pauses" the JavaScript execution to let the rendering threads catch up, am I right @aschempp?

@aschempp

This comment has been minimized.

Show comment
Hide comment
@aschempp

aschempp Aug 17, 2016

Member

Well sort-of. There are no threads in Javascript, and it does not pause. setTimeout(fn, 0) adds the method to the end of the event queue, so everything that's in the queue before it will be executed first.

Member

aschempp commented Aug 17, 2016

Well sort-of. There are no threads in Javascript, and it does not pause. setTimeout(fn, 0) adds the method to the end of the event queue, so everything that's in the queue before it will be executed first.

@leofeyer

This comment has been minimized.

Show comment
Hide comment
@leofeyer

leofeyer Aug 17, 2016

Member

Shall I change the Tiny templates accordingly or is there a more sophisticated solution?

Member

leofeyer commented Aug 17, 2016

Shall I change the Tiny templates accordingly or is there a more sophisticated solution?

@leofeyer

This comment has been minimized.

Show comment
Hide comment
@leofeyer

leofeyer Aug 17, 2016

Member

I think I have fully understood the problem now. If TinyMCE is loaded in a sub-palette, this is the JS code in json.javascript:

window.tinymce || document.write('<script src="assets/tinymce4/tinymce.gzip.js">\x3C/script>')

window.tinymce && tinymce.init({
  skin: 'contao',
  selector: '#ctrl_reply',
  language: 'en',
  element_format: 'html',
  document_base_url: 'https://localhost/contao/core/',
  entities: '160,nbsp,60,lt,62,gt,173,shy',
  setup: function(editor) {
    editor.getElement().removeAttribute('required');
  },
  init_instance_callback: function(editor) {
    if (document.activeElement && document.activeElement.id && document.activeElement.id == editor.id) {
      editor.editorManager.get(editor.id).focus();
    }
    editor.on('focus', function() { Backend.getScrollOffset(); });
  },
  file_browser_callback: function(field_name, url, type, win) {
    Backend.openModalBrowser(field_name, url, type, win);
  },
  templates: [
    { title: "index.html", url: "files/tiny_templates/index.html" }
  ],
  plugins: 'autosave charmap code fullscreen image importcss link lists paste searchreplace tabfocus table template visualblocks',
  browser_spellcheck: true,
  tabfocus_elements: ':prev,:next',
  importcss_append: true,
  importcss_groups: [{title: 'files/tinymce.css'}],
  content_css: '/contao/core/system/themes/tinymce.css,/contao/core/files/tinymce.css',
  extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption',
  menubar: 'file edit insert view format table',
  toolbar: 'link unlink | image | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code'
});

The code gets executed immediately, whereas if TinyMCE is loaded normally, there are two <script> tags involved:

<script>window.tinymce || document.write('<script src="<?php echo TL_ASSETS_URL; ?>assets/tinymce4/tinymce.gzip.js">\x3C/script>')</script>
<script>
window.tinymce && tinymce.init({
  //
});
</script>

So using setTimeout(fn, 0) basically "re-adds" what is accomplished by using two <script> tags.

Member

leofeyer commented Aug 17, 2016

I think I have fully understood the problem now. If TinyMCE is loaded in a sub-palette, this is the JS code in json.javascript:

window.tinymce || document.write('<script src="assets/tinymce4/tinymce.gzip.js">\x3C/script>')

window.tinymce && tinymce.init({
  skin: 'contao',
  selector: '#ctrl_reply',
  language: 'en',
  element_format: 'html',
  document_base_url: 'https://localhost/contao/core/',
  entities: '160,nbsp,60,lt,62,gt,173,shy',
  setup: function(editor) {
    editor.getElement().removeAttribute('required');
  },
  init_instance_callback: function(editor) {
    if (document.activeElement && document.activeElement.id && document.activeElement.id == editor.id) {
      editor.editorManager.get(editor.id).focus();
    }
    editor.on('focus', function() { Backend.getScrollOffset(); });
  },
  file_browser_callback: function(field_name, url, type, win) {
    Backend.openModalBrowser(field_name, url, type, win);
  },
  templates: [
    { title: "index.html", url: "files/tiny_templates/index.html" }
  ],
  plugins: 'autosave charmap code fullscreen image importcss link lists paste searchreplace tabfocus table template visualblocks',
  browser_spellcheck: true,
  tabfocus_elements: ':prev,:next',
  importcss_append: true,
  importcss_groups: [{title: 'files/tinymce.css'}],
  content_css: '/contao/core/system/themes/tinymce.css,/contao/core/files/tinymce.css',
  extended_valid_elements: 'q[cite|class|title],article,section,hgroup,figure,figcaption',
  menubar: 'file edit insert view format table',
  toolbar: 'link unlink | image | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code'
});

The code gets executed immediately, whereas if TinyMCE is loaded normally, there are two <script> tags involved:

<script>window.tinymce || document.write('<script src="<?php echo TL_ASSETS_URL; ?>assets/tinymce4/tinymce.gzip.js">\x3C/script>')</script>
<script>
window.tinymce && tinymce.init({
  //
});
</script>

So using setTimeout(fn, 0) basically "re-adds" what is accomplished by using two <script> tags.

@Toflar

This comment has been minimized.

Show comment
Hide comment
@Toflar

Toflar Aug 17, 2016

Member

Just FYI: Try to submit after you loaded and check the console. You'll get the exact same error as reported multiple times by others: tinymce/tinymce#794

Member

Toflar commented Aug 17, 2016

Just FYI: Try to submit after you loaded and check the console. You'll get the exact same error as reported multiple times by others: tinymce/tinymce#794

@leofeyer

This comment has been minimized.

Show comment
Hide comment
@leofeyer

leofeyer Aug 17, 2016

Member

I was able to submit the form. Did you add the setTimeout wrapper?

Member

leofeyer commented Aug 17, 2016

I was able to submit the form. Did you add the setTimeout wrapper?

@Toflar

This comment has been minimized.

Show comment
Hide comment
@Toflar

Toflar Aug 17, 2016

Member
Member

Toflar commented Aug 17, 2016

@leofeyer

This comment has been minimized.

Show comment
Hide comment
@leofeyer

leofeyer Aug 17, 2016

Member

The demo has not yet been updated, so how do you expect it to work there?

Member

leofeyer commented Aug 17, 2016

The demo has not yet been updated, so how do you expect it to work there?

@Toflar

This comment has been minimized.

Show comment
Hide comment
@Toflar

Toflar Aug 17, 2016

Member

? I did not expect it to work? I just said you get the same error as officially reported on the tinyMCE tracker?

Member

Toflar commented Aug 17, 2016

? I did not expect it to work? I just said you get the same error as officially reported on the tinyMCE tracker?

@leofeyer

This comment has been minimized.

Show comment
Hide comment
@leofeyer

leofeyer Aug 17, 2016

Member

I don't get this error. Actually, there is no error message at all, the TinyMCE field is just not editable.

Member

leofeyer commented Aug 17, 2016

I don't get this error. Actually, there is no error message at all, the TinyMCE field is just not editable.

@leofeyer

This comment has been minimized.

Show comment
Hide comment
@leofeyer

leofeyer Aug 17, 2016

Member

Ah, now I see what you mean. However, this is not related to our issue IMO.

Member

leofeyer commented Aug 17, 2016

Ah, now I see what you mean. However, this is not related to our issue IMO.

@leofeyer leofeyer added this to the 3.5.16 milestone Aug 17, 2016

@leofeyer leofeyer self-assigned this Aug 17, 2016

@leofeyer

This comment has been minimized.

Show comment
Hide comment
@leofeyer

leofeyer Aug 17, 2016

Member

Fixed in 808b213.

Member

leofeyer commented Aug 17, 2016

Fixed in 808b213.

@leofeyer leofeyer closed this Aug 17, 2016

jsonn pushed a commit to jsonn/pkgsrc that referenced this issue Sep 8, 2016

taca
Update contao42 to 4.2.3.
### 4.2.3 (2016-09-06)

 * Do not double URL encode the content syndication links.
 * Use CSS3 transforms instead of transitions to animate the off-canvas navigation.
 * Improve the exception handling when using the resource locator (see #557).
 * Correctly reset the filter menu in parent view.
 * Support all characters but =!<> and whitespace in simple tokens (see contao/core#8436).
 * Check the user's permission when generating links in the picker (see contao/core#8407).
 * Handle forward pages without target in the navigation modules (see contao/core#8377).
 * Provide the same template variables for downloads and enclosures (see contao/core#8392).
 * Handle %n when parsing date formats (see contao/core#8411).
 * Fix the module wizard's accessibility (see contao/core#8391).
 * Correctly initialize TinyMCE in sub-palettes in Firefox (see contao/core#3673).
 * Validate form field names more accurately (see contao/core#8403).
 * Correctly show the ctime, mtime and atime of a folder (see contao/core#8408).
 * Correctly index changed pages (see contao/core#8439).

@cliffparnitzky cliffparnitzky referenced this issue in cliffparnitzky/TinyMcePluginLoader Nov 14, 2016

Closed

No TinyMCE extension since Contao 3.5.16 #11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment