Skip to:
Content

bbPress.org

Opened 5 years ago

Closed 3 days ago

Last modified 3 days ago

#2646 closed defect (fixed)

TinyMce Reply Issue

Reported by: brashell Owned by: johnjamesjacoby
Milestone: 2.6.2 Priority: normal
Severity: normal Version: 2.5.4
Component: Component - Replies Keywords: has-patch
Cc: pericam@…

Description (last modified by johnjamesjacoby)

When enabling TinyMce and attempting to create a reply to a reply within a topic, you are unable to create any input or press buttons.

  • WordPress 3.9.1 Multisite subfolder
  • It does not appear to be a Javascript conflict with another plugin
  • Without tinymce enabled it works fine

Here is a youtube video of the bug:

http://youtu.be/L1rYwcC87Tk

Attachments (2)

0001-fix-threaded-replies-with-tinyMCE.patch (4.0 KB) - added by chherbst 15 months ago.
2646.2.patch (6.1 KB) - added by johnjamesjacoby 3 days ago.

Download all attachments as: .zip

Change History (13)

#1 @johnjamesjacoby
5 years ago

  • Milestone changed from Awaiting Review to 2.7

Move from awaiting review to 2.7 milestone.

#2 @netweb
5 years ago

#2700 was marked as a duplicate.

#3 @Stagger Lee
5 years ago

  • Cc pericam@… added

This is fix from latest WP Edit plugin. (comments, but same is when adapted to bbPress)
PHP code:

// Enable comment editor
		add_filter('comment_form_defaults', 'wpep_comment_form_editor');
			add_action('wp_enqueue_scripts', 'wpep_comment_form_scripts');
			add_action('init', 'wpep_comment_form_allowed_tags');
		
		function wpep_comment_form_editor($fields) {
			$args = array(
				'teeny' => true, 
				'textarea_rows' => '13', 
				'media_buttons' => false, 
				'tinymce' => array('toolbar1' => 'bold italic underline blockquote strikethrough bullist numlist alignleft aligncenter alignright undo redo link unlink')
				);
			
			ob_start();
			wp_editor('', 'comment', $args);
			$fields['comment_field'] = ob_get_clean();
			return $fields;
		}
		
		function wpep_comment_form_scripts(){
		 
			wp_deregister_script('comment-reply');
			wp_register_script( 'comment-reply', get_template_directory_uri() . '/js/comment-reply.js', '', true );
		}
		
		function wpep_comment_form_allowed_tags() {
		
			global $allowedtags;
			
			$allowedtags['ul'] = array();
			$allowedtags['ol'] = array();
			$allowedtags['li'] = array();
			$allowedtags['strong'] = array();
			$allowedtags['ins'] = array(
				'datetime' => true
			);
			$allowedtags['del'] = array(
				'datetime' => true
			);
			$allowedtags['pre'] = array(
				'lang' => true,
				'line' => true
			);
			$allowedtags['span'] = array(
				'style' => true
			);
			$allowedtags['img'] = array(
				'width' => true,
				'height' => true,
				'src' => true,
				'alt' => true
			);
			$allowedtags['a'] = array(
				'target' => true,
				'href' => true,
				'title' => true,
			);
		}

JS file:

addComment = {
    moveForm : function(commId, parentId, respondId, postId) {
        var t = this;
 
        // Remove editor if necessary
        t.red();
 
        var div,
        comm = t.I(commId),
        respond = t.I(respondId),
        cancel = t.I('cancel-comment-reply-link'),
        parent = t.I('comment_parent'), post = t.I('comment_post_ID');
 
        if ( ! comm || ! respond || ! cancel || ! parent)
                return;
 
        t.respondId = respondId;
        postId = postId || false;
 
        if ( ! t.I('wp-temp-form-div') ) {
                div = document.createElement('div');
                div.id = 'wp-temp-form-div';
                div.style.display = 'none';
                respond.parentNode.insertBefore(div, respond);
        }
 
        comm.parentNode.insertBefore(respond, comm.nextSibling);
 
        if ( post && postId )
            post.value = postId;
        parent.value = parentId;
        cancel.style.display = '';
 
        // Add editor if necessary
        t.aed();
 
        cancel.onclick = function() {
            var t = addComment;
 
            // Remove editor if necessary
            t.red();
 
            var temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId);
 
            if ( ! temp || ! respond )
                return;
 
            t.I('comment_parent').value = '0';
            temp.parentNode.insertBefore(respond, temp);
            temp.parentNode.removeChild(temp);
            this.style.display = 'none';
            this.onclick = null;
 
            // Add editor if necessary
            t.aed();
 
            return false;
        }
 
        return false;
    },
    I : function(e) {
        return document.getElementById(e);
    },
    red : function() {
        /* TinyMCE defined means wp_editor has Visual or both Visual and HTML/Text editors enabled
         * If editor is in HTML editor only mode our work here is unnecessary
         */
        if(typeof(tinyMCE) == 'undefined')
            return;
 
        var tmce = tinyMCE.get('comment');
        if (tmce && !tmce.isHidden()){
            /* Remove TinyMCE from textarea if necessary
             * and mark the current editor tab as Visual
             */
            this.mode = 'tmce';
            tmce.remove();
        }else{
            /* Html editor can be moved in DOM without removal
             * so we just mark current editor tab as Html
             */
            this.mode = 'html';
        }
    },
    aed : function() {
        if(typeof(tinyMCE) == 'undefined')
            return;
 
        if (this.mode == 'tmce'){
            /* Add Visual editor to textarea using code from wp-includes/js/editor.js
             * enqueued by _WP_Editors PHP class whenever Visual editor is enabled.
             * This code switches to Visual editor with id 'comment'
             */
            switchEditors.go('comment', 'tmce');
        }else if (this.mode == 'html'){
            /* Add HTML/Text editor to textarea using code from wp-includes/js/editor.js
             * enqueued by _WP_Editors PHP class whenever Visual editor is enabled.
             * If Visual editor is not enabled 'return' above makes this code off limits.
             * This code switches to HTML editor with id 'comment'
             */
            switchEditors.go('comment', 'html');
        }
    }
}

#4 @netweb
3 years ago

  • Milestone 2.7 deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Marking this as a duplicate of #2971 and which was fixed in r6096

#5 @chherbst
15 months ago

This is not a duplicate of #2971. This happens even with the fix from r6096.

#6 @chherbst
15 months ago

The attached patch is an adopted version of the one in comment #3 with all unnecessary parts removed.

#7 @chherbst
15 months ago

  • Resolution duplicate deleted
  • Status changed from closed to reopened

#8 @johnjamesjacoby
3 days ago

  • Description modified (diff)
  • Milestone set to 2.6.2
  • Owner set to johnjamesjacoby
  • Status changed from reopened to assigned

#9 @johnjamesjacoby
3 days ago

  • Keywords has-patch added; needs-patch removed

Attached patch does the following:

  • Iterates on the great work from @chherbst
  • Adds docs
  • Renames some functions for clarity
  • Animates up or down to the new form location
  • Adds margin around reply form when nested

#10 @johnjamesjacoby
3 days ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 6964:

Replies: ensure visual editor works correctly with hierarchical replies.

This commit updates reply.js in the default theme to include a bit of element juggling that prevents TinyMCE from freezing up when it is relocated on the page.

Before this commit, clicking "Reply" while having the Visual Editor enabled would cause it to not be able to be typed inside of. Now, when clicking commit, TinyMCE is correctly reinvoked in its new location, and the page will expediently scroll to that new position, fixing a related UX bug where it was possible for the reply form to get lost inside of deep hierarchies.

Props chherbst. Fixes #2646. For 2.7, trunk.

#11 @johnjamesjacoby
3 days ago

In 6965:

Replies: ensure visual editor works correctly with hierarchical replies.

This commit updates reply.js in the default theme to include a bit of element juggling that prevents TinyMCE from freezing up when it is relocated on the page.

Before this commit, clicking "Reply" while having the Visual Editor enabled would cause it to not be able to be typed inside of. Now, when clicking commit, TinyMCE is correctly reinvoked in its new location, and the page will expediently scroll to that new position, fixing a related UX bug where it was possible for the reply form to get lost inside of deep hierarchies.

Props chherbst. Fixes #2646. For 2.6.2, branches/2.6.

Note: See TracTickets for help on using tickets.