Upgrade 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

• source
• showSource
• inline
• breakline
• markup
• autoparseStart
• autoparsePaste
• autoparseLinks
• autoparseImages
• autoparseVideo
• toolbarContext
• formattingHide
• buttonsAdd
• buttonsAddFirst
• buttonsAddAfter
• buttonsAddBefore
• fileAttachment
• uploadData
• cleanOnEnter
• shortcodes
• pasteClean
• pasteKeepStyle
• pasteKeepClass
• pasteKeepAttrs

Renamed

• overrideStyles = styles
• linkify = autoparse
• autosaveFields = autosaveData
• imageUploadFields = imageData
• imageUploadForms = imageData
• fileUploadFields = fileData
• fileUploadForms = fileData
• dragImageUpload = dragUpload
• dragFileUpload = dragUpload
• multipleImageUpload = multipleUpload
• clipboardImageUpload = clipboardUpload
• script = removeScript
• keepInlineOnEnter = cleanInlineOnEnter

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

• airOpen
• airOpened
• airClose
• airClosed
• clickStart
• clickStop
• clickSave
• clickCancel
• started
• stop
• stopped
• synced
• dropdown.closed
• tab
• dragover
• dragleave
• dragstart
• file.appended
• file.inserted
• file.delete
• file.deleted
• format
• inserted
• image.deleted
• image.resize
• image.resized
• image.changed
• modal.open
• modal.close
• pasteBefore
• pasted
• source.changed
• source.open
• source.close
• toolbar.fixed
• toolbar.unfixed
• undo
• redo
• upload.complete
• upload.error

Renamed

• init = started
• destroy = stop
• linkify = autoparse
• change = changed
• sync = syncing
• dropdownShow = dropdown.open
• dropdownShown = dropdown.opened
• dropdownHide = dropdown.close
• fileUpload = file.uploaded
• fileUploadError = file.uploadError
• imageUpload = image.uploaded
• imageUploadError = image.uploadError
• imageDelete = image.delete
• imageInserted = image.inserted
• insertedLine = line.inserted
• insertedLink = link.inserted
• deletedLink = link.deleted
• modalOpened = modal.opened
• modalClosed = modal.closed
• paste = pasting
• visual = source.closed
• source = source.opened
• insertedTable = table.inserted
• uploadBeforeSend = upload.beforeSend
• uploadStart = upload.start

Deprecated

• beforeInsertingLink

API

All new services

• Dom
• Inspector
• Toolbar Button
• Toolbar Dropdown
• Toolbar Dropdown Item

All new modules

• Block
• Editor
• File
• Image
• Inline
• Line
• Link
• List
• Modal
• Modal Element
• Modal Form
• Source
• Upload
  

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