Skip to content
This repository has been archived by the owner on Nov 3, 2023. It is now read-only.

comments - add Reply doesn't work #3673

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

comments - add Reply doesn't work #3673

MacKP opened this issue Dec 5, 2011 · 17 comments
Assignees
Labels
Milestone

Comments

@MacKP
Copy link

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
Copy link
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.

@leo-unglaub
Copy link

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

@leofeyer
Copy link
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
Copy link
Author

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
Copy link
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
Copy link
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?

@aschempp
Copy link
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
Copy link
Member

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

@leofeyer
Copy link
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
Copy link
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
Copy link
Member

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

@Toflar
Copy link
Member

Toflar commented Aug 17, 2016 via email

@leofeyer
Copy link
Member

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

@Toflar
Copy link
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
Copy link
Member

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

@leofeyer
Copy link
Member

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
Copy link
Member

Fixed in 808b213.

jsonn pushed a commit to jsonn/pkgsrc that referenced this issue Sep 8, 2016
### 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).
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

6 participants