Upgrade from Redactor 2 to Redactor 3

New initialization of Redactor #

Old

$('#content').redactor(options);

New

$R('#content', options);

New way to create plugins #

Old

(function($)
{
    $.Redactor.prototype.myplugin = function()
    {
        return {
            init: function ()
            {
            }
        };
    };
})(jQuery);

New

(function($R)
{
    $R.add('plugin', 'myplugin', {
        init: function(app)
        {
            // define app
            this.app = app;

            // define some services, for example
            this.caret = app.caret;
            this.selection = app.selection;
        }
    });
})(Redactor);

New response for uploaded images and files #

Old

// JSON for uploaded images
{ "url": "/images/img.jpg", "id": "123" }

// JSON for uploaded files
{ "url": "/files/file.doc", "name": "Filename" }

New

// JSON for uploaded images
{
    "file": {
        "url": "image-url.jpg",
        "id": "some-id"
    }
}

// JSON for uploaded files
{
    "file": {
        "url": "some-file-url",
        "name": "some-file-name",
        "id": "some-id"
    }
}

New way to define language variables #

Old

(function($)
{
    $.Redactor.opts.langs['en'] = {
        "name": "value"
    };
})(jQuery);

New

(function($R)
{
    $R.lang['en'] = {
        "name": "value"
    };
})(Redactor);

Settings #

New

Renamed

Deprecated

  • toolbarOverflow
  • s3
    • use server-side upload to S3 and JSON response of uploaded file
  • airWidth
  • imageTag
  • linkTooltip
    • now it always shows
  • keepStyleAttr
    • now Redactor always keep styles if they created in the editor

Callbacks #

New

Renamed

Deprecated

  • beforeInsertingLink

API #

All new services

All new modules

New methods

  • app.start
  • app.stop
  • app.isStarted
  • app.isStopped
  • app.broadcast
  • app.isReadOnly
  • app.enableReadOnly
  • app.disableReadOnly
  • autoparser.parse
  • block.clearStyle
  • block.clearFormat
  • caret.set
  • caret.isStart
  • caret.isEnd
  • cleaner.input
  • cleaner.output
  • cleaner.paste
  • cleaner.pastePlainText
  • cleaner.paragraphize
  • cleaner.replaceTags
  • cleaner.replaceNbspToSpaces
  • cleaner.replaceBlocksToBr
  • cleaner.cleanNewLines
  • cleaner.cleanSpacesInPre
  • cleaner.removeInvisibleSpaces
  • cleaner.removeNl
  • cleaner.removeTagsExcept
  • cleaner.removeComments
  • cleaner.removeSpanWithoutAttributes
  • cleaner.removeEmptyAttributes
  • cleaner.encodeHtml
  • cleaner.decodeEntities
  • component.setActive
  • component.isActive
  • component.getActive
  • component.clearActive
  • component.create
  • component.build
  • component.remove
  • detector.isIpad
  • editor.focus
  • editor.isEmpty
  • editor.isSourceMode
  • editor.saveScroll
  • editor.restoreScroll
  • editor.getFirstNode
  • editor.getLastNode
  • element.getType
  • element.isType
  • inline.set
  • inline.clearStyle
  • insertion.insertChar
  • insertion.insertToOffset
  • insertion.insertToPoint
  • insertion.insertNewline
  • insertion.insertBreakLine
  • lang.parse
  • marker.insertStart
  • marker.insertEnd
  • marker.insertBoth
  • marker.find
  • selection.isBackwards
  • selection.isIn
  • selection.isText
  • selection.isAll
  • selection.getPosition
  • selection.getTextBeforeCaret
  • selection.getElement
  • selection.getInlineFirst
  • selection.getInlineAll
  • selection.getInlinesAllSelected
  • selection.getElements
  • selection.getTextNodes
  • selection.getBlocksAndTextNodes
  • selection.collapseToStart
  • selection.collapseToEnd
  • source.getName
  • source.getStartedContent
  • statusbar.add
  • statusbar.update
  • statusbar.get
  • statusbar.remove
  • statusbar.getItems
  • statusbar.removeItems
  • statusbar.getElement
  • toolbar.is
  • toolbar.isAir
  • toolbar.isFixed
  • toolbar.isContextBar
  • toolbar.getElement
  • toolbar.getWrapper
  • toolbar.getDropdown
  • toolbar.setButtonsInactive
  • toolbar.setButtonsActive
  • utils.isEmptyHtml
  • utils.getChildNodes
  • utils.getChildElements
  • utils.getFirstNode
  • utils.getLastNode
  • utils.getFirstElement
  • utils.getLastElement
  • utils.createTmpContainer
  • utils.createFragment
  • utils.isFragment
  • utils.parseHtml
  • utils.ucfirst
  • utils.removeFromArrayByValue
  • utils.removeEmptyAttr
  • utils.cloneAttributes
  • utils.normalizeTextNodes
  • utils.isRgb
  • utils.rgb2hex
  • utils.toParams
  • utils.styleToObj
  • utils.checkProperty
  • utils.escapeRegExp
  • utils.extendData

Renamed

  • air.collapsed = selection.collapseToStart
  • air.collapsedEnd = selection.collapseToEnd
  • core.destroy = app.destroy
  • block.toggleAttr = block.toggle
  • block.removeAttr = block.remove
  • block.toggleClass = block.toggle
  • block.addClass = block.add
  • block.removeClass = block.remove
  • block.removeAllClass = block.clearClass
  • block.removeAttr = block.remove
  • block.removeAllAttr = block.clearAttr
  • block.addAttr = block.add
  • button.get = toolbar.getButton
  • button.add = toolbar.addButton
  • button.addFirst = toolbar.addButtonFirst
  • button.addAfter = toolbar.addButtonAfter
  • button.addBefore = toolbar.addButtonBefore
  • button.all = toolbar.getButtons
  • button.disableAll = toolbar.disableButtons
  • button.enableAll = toolbar.enableButtons
  • button.getButtons = toolbar.getButtons
  • button.getButtonsKeys = toolbar.getButtonsKeys
  • caret.start = caret.setStart
  • caret.end = caret.setEnd
  • caret.before = caret.setBefore
  • caret.after = caret.setAfter
  • clean.getPlainText = cleaner.getFlatText
  • clean.stripTags = cleaner.removeTags
  • core.box = container.getElement
  • core.textarea = source.getElement
  • core.editor = editor.getElement
  • core.toolbar = toolbar.getElement
  • core.element = element.getElement
  • code.set = source.setCode
  • code.get = source.getCode
  • detect.isMobile = detector.isMobile
  • detect.isDesktop = detector.isDesktop
  • detect.isWebkit = detector.isWebkit
  • detect.isFirefox = detector.isFirefox
  • detect.isIe = detector.isIe
  • focus.start = editor.startFocus
  • focus.end = editor.endFocus
  • focus.is = editor.isFocus
  • inline.removeFormat = inline.clearFormat
  • inline.toggleClass = inline.toggle
  • inline.addClass = inline.add
  • inline.removeClass = inline.
  • inline.removeAllClass = inline.clearClass
  • inline.removeAttr = inline.remove
  • inline.removeAllAttr = inline.clearAttr
  • inline.toggleAttr = inline.toggle
  • inline.addAttr = inline.add
  • insert.set = insertion.set
  • insert.text = insertion.insertText
  • insert.html = insertion.insertHtml
  • insert.node = insertion.insertNode
  • insert.raw = insertion.insertRaw
  • marker.get = marker.build
  • marker.html = marker.buildHtml
  • paragraphize.load = cleaner.paragraphize
  • selection.range = selection.getRange
  • selection.update = selection.setRange
  • selection.current = selection.getCurrent
  • selection.parent = selection.getParent
  • selection.block = selection.getBlock
  • selection.nodes = selection.getNodes
  • selection.blocks = selection.getBlocks
  • selection.inlines = selection.getInlines
  • selection.text = selection.getText
  • selection.html = selection.getHtml
  • selection.remove = selection.clear
  • selection.all = selection.setAll
  • selection.inline = selection.getInline
  • selection.node = caret.set
  • storage.changes = storage.getChanges
  • utils.isStartOfElement = caret.isStart
  • utils.isEndOfElement = caret.isEnd
  • Indent = List Module
  • List = List Module
  • Line = Line Module
  • Link = Link Module
  • Modal = Modal Module
  • Upload = Upload Module

Deprecated

  • core.object
  • core.callback
  • core.id
  • core.air
  • air.hide
  • buffer.set
  • buffer.add
  • events.stopDetectChanges
  • events.startDetectChanges
  • inline.update
  • observe.images
  • observe.links
  • placeholder.hide
  • selection.next
  • selection.prev
  • selection.replace
  • selection.isRedactor
  • utils.getOuterHtml