1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Clear/Replace redactor content programmatically

Discussion in 'XenForo Development Discussions' started by r1pe, Jul 6, 2013.

  1. r1pe

    r1pe Member

    Hello,

    I want to insert some content to the redactor editor programmatically. The content should be replace the existing content in the editor. I found a solution for inserting new content but this append the content instead of replace. Is there a way to clear the redactor content first or replace content with other content. I couldn't find a possibilty to do that. Does anyone know how I can clear or replace the redactor content?
     
  2. r1pe

    r1pe Member

    I have found this solution but it's not working at all:

    $('iframe').contents().find('body').html('');

    At tinyMCE there was a possibilty to set new content to the editor with this code:

    tinyMCE.activeEditor.setContent('new content');

    This replaced the old content and set the new one instead. Is there any similar possibilty for redactor to do that?
     
  3. Jeremy

    Jeremy XenForo Moderator Staff Member

    Try selecting the Redactor plugin and doing:

    $editor.selectionAll().selectionRemove();
     
  4. r1pe

    r1pe Member

    Which selector has "$editor" in your example? If I use $('textarea.BbCodeWysiwygEditor').selectionAll().selectionRemove(); I get the error message TypeError: $(...).selectionAll is not a function.
     
  5. Jeremy

    Jeremy XenForo Moderator Staff Member

    Looks like .selectionAll() and .selectionRemove() are Redactor 9 API functions. Some work got me this to clear the editor:
    Code:
    var $form = $('#QuickReply')
      , ed = XenForo.getEditorInForm($form);
    
    if(!ed) {
      // no editor found
      return false;
    }
    
    if(ed.$editor) {
      // redactor
      ed.$editor.html('');
    } else {
      // BBCode editor
      ed.val('');
    }
     
    Chris D and r1pe like this.
  6. r1pe

    r1pe Member

    There is one problem with this solution, the same problem like the the solution with:

    $('iframe').contents().find('body').html('');

    Write something in the editor, clear the content with your code snipped and then refresh the page. You will see that the old content is still in the editor although the editor was cleared. Do you have any idea why?
     
  7. Jeremy

    Jeremy XenForo Moderator Staff Member

    You are hitting the draft save. The saveDraft() function of XenForo.BbCodeWysiwygEditor is what you need, but I'm having trouble instantiating it properly.
     
  8. r1pe

    r1pe Member

    I have found a solution based on your code snipped:

    Code:
    var $form = $('#QuickReply')
      , ed = XenForo.getEditorInForm($form);
    
    if(!ed) {
      // no editor found
      return false;
    }
    if(ed.$editor) {
      // redactor
      ed.$editor.html('');
      ed.$el.val(''); // The  new line
    } else {
      // BBCode editor
      ed.val('');
    }
    Thank you for your help!
     
  9. Chris D

    Chris D XenForo Developer Staff Member

    I used the code snippets here to clear the editor in my add-on, but I noticed today (Thanks @Brogan) that although the content was being cleared and the editor losing focus, the editor wasn't returning back to its normal state.

    This is how it is done after a post is created:

    Code:
                            var $textarea = $('#CommentForm').find('textarea');
                            $textarea.val('');
                            var ed = $textarea.data('XenForo.BbCodeWysiwygEditor');
                            if (ed)
                            {
                                ed.resetEditor();
                            }
    This handles the basic text area and the rich text editor.
     
    Jeremy likes this.

Share This Page