Alternative mercury.js for Railscasts#296, based on current version at github
| /*! | |
| * Mercury Editor is a CoffeeScript and jQuery based WYSIWYG editor. Documentation and other useful information can be | |
| * found at https://github.com/jejacks0n/mercury | |
| * | |
| * Supported browsers: | |
| * - Firefox 4+ | |
| * - Chrome 10+ | |
| * - Safari 5+ | |
| * | |
| * Copyright (c) 2011 Jeremy Jackson | |
| * | |
| * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated | |
| * documentation files (the "Software"), to deal in the Software without restriction, including without limitation the | |
| * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit | |
| * persons to whom the Software is furnished to do so, subject to the following conditions: | |
| * | |
| * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the | |
| * Software. | |
| * | |
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE | |
| * WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR | |
| * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR | |
| * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. | |
| * | |
| *= require_self | |
| * | |
| * Minimum jQuery requirements are 1.7 | |
| *= require mercury/dependencies/jquery-1.7 | |
| * | |
| * You can include the Rails jQuery ujs script here to get some nicer behaviors in modals, panels and lightviews when | |
| * using :remote => true within the contents rendered in them. | |
| * require jquery_ujs | |
| * | |
| * If you want to override Mercury functionality, you can do so in a custom file that binds to the mercury:loaded event, | |
| * or do so at the end of the current file (mercury.js). There's an example that will help you get started. | |
| * require mercury_overrides | |
| * | |
| * Add all requires for the support libraries that integrate nicely with Mercury Editor. | |
| * require mercury/support/history | |
| * | |
| * Require Mercury Editor itself. | |
| *= require mercury/mercury | |
| * | |
| * Require any localizations you wish to support | |
| * Example: es.locale, or fr.locale -- regional dialects are in each language file so never en_US for instance. | |
| * require mercury/locales/swedish_chef.locale | |
| * | |
| * Add all requires for plugins that extend or change the behavior of Mercury Editor. | |
| * require mercury/plugins/save_as_xml/plugin.js | |
| */ | |
| window.Mercury = { | |
| // # Mercury Configuration | |
| config: { | |
| // ## Toolbars | |
| // | |
| // This is where you can customize the toolbars by adding or removing buttons, or changing them and their | |
| // behaviors. Any top level object put here will create a new toolbar. Buttons are simply nested inside the | |
| // toolbars, along with button groups. | |
| // | |
| // Some toolbars are custom (the snippetable toolbar for instance), and to denote that use _custom: true. You can | |
| // then build the toolbar yourself with it's own behavior. | |
| // | |
| // Buttons can be grouped, and a button group is simply a way to wrap buttons for styling -- they can also handle | |
| // enabling or disabling all the buttons within it by using a context. The table button group is a good example | |
| // of this. | |
| // | |
| // It's important to note that each of the button names (keys), in each toolbar object must be unique, regardless | |
| // of if it's in a button group, or nested, etc. This is because styling is applied to them by name, and because | |
| // their name is used in the event that's fired when you click on them. | |
| // | |
| // Button format: `[label, description, {type: action, type: action, etc}]` | |
| // | |
| // ### The available button types are: | |
| // | |
| // - toggle: toggles on or off when clicked, otherwise behaves like a button | |
| // - modal: opens a modal window, expects the action to be one of: | |
| // 1. a string url | |
| // 2. a function that returns a string url | |
| // - lightview: opens a lightview window (like modal, but different UI), expects the action to be one of: | |
| // 1. a string url | |
| // 2. a function that returns a string url | |
| // - panel: opens a panel dialog, expects the action to be one of: | |
| // 1. a string url | |
| // 2. a function that returns a string url | |
| // - palette: opens a palette window, expects the action to be one of: | |
| // 1. a string url | |
| // 2. a function that returns a string url | |
| // - select: opens a pulldown style window, expects the action to be one of: | |
| // 1. a string url | |
| // 2. a function that returns a string url | |
| // - context: calls a callback function, expects the action to be: | |
| // 1. a function that returns a boolean to highlight the button | |
| // note: if a function isn't provided, the key will be passed to the contextHandler, in which case a default | |
| // context will be used (for more info read the Contexts section below) | |
| // - mode: toggle a given mode in the editor, expects the action to be: | |
| // 1. a string, denoting the name of the mode | |
| // note: it's assumed that when a specific mode is turned on, all other modes will be turned off, which happens | |
| // automatically, thus putting the editor into a specific "state" | |
| // - regions: allows buttons to be enabled/disabled based on what region type has focus, expects the action to be: | |
| // 1. an array of region types (eg. ['editable', 'markupable']) | |
| // - preload: allows some dialog views to be loaded when the button is created instead of on first open, expects: | |
| // 1. a boolean true / false | |
| // note: this is only used by panels, selects, and palettes | |
| // | |
| // Separators are any "button" that's not an array, and are expected to be a string. You can use two different | |
| // separator styles: line ('-'), and spacer (' '). | |
| // | |
| // ### Adding Contexts | |
| // | |
| // Contexts are used callback functions used for highlighting and disabling/enabling buttons and buttongroups. When | |
| // the cursor enters an element within an html region for instance we want to disable or highlight buttons based on | |
| // the properties of the given node. You can see examples of contexts in, and add your own to: | |
| // `Mercury.Toolbar.Button.contexts` and `Mercury.Toolbar.ButtonGroup.contexts` | |
| toolbars: { | |
| primary: { | |
| save: ['Save', 'Save this page'], | |
| preview: ['Preview', 'Preview this page', { toggle: true, mode: true }], | |
| sep1: ' ', | |
| undoredo: { | |
| undo: ['Undo', 'Undo your last action'], | |
| redo: ['Redo', 'Redo your last action'], | |
| sep: ' ' | |
| }, | |
| insertLink: ['Link', 'Insert Link', { modal: '/mercury/modals/link.html', regions: ['editable', 'markupable'] }], | |
| insertMedia: ['Media', 'Insert Media (images and videos)', { modal: '/mercury/modals/media.html', regions: ['editable', 'markupable'] }], | |
| insertTable: ['Table', 'Insert Table', { modal: '/mercury/modals/table.html', regions: ['editable', 'markupable'] }], | |
| insertCharacter: ['Character', 'Special Characters', { modal: '/mercury/modals/character.html', regions: ['editable', 'markupable'] }], | |
| snippetPanel: ['Snippet', 'Snippet Panel', { panel: '/mercury/panels/snippets.html' }], | |
| sep2: ' ', | |
| historyPanel: ['History', 'Page Version History', { panel: '/mercury/panels/history.html' }], | |
| sep3: ' ', | |
| notesPanel: ['Notes', 'Page Notes', { panel: '/mercury/panels/notes.html' }] | |
| }, | |
| editable: { | |
| _regions: ['editable', 'markupable'], | |
| predefined: { | |
| style: ['Style', null, { select: '/mercury/selects/style.html', preload: true }], | |
| sep1: ' ', | |
| formatblock: ['Block Format', null, { select: '/mercury/selects/formatblock.html', preload: true }], | |
| sep2: '-' | |
| }, | |
| colors: { | |
| backColor: ['Background Color', null, { palette: '/mercury/palettes/backcolor.html', context: true, preload: true, regions: ['editable'] }], | |
| sep1: ' ', | |
| foreColor: ['Text Color', null, { palette: '/mercury/palettes/forecolor.html', context: true, preload: true, regions: ['editable'] }], | |
| sep2: '-' | |
| }, | |
| decoration: { | |
| bold: ['Bold', null, { context: true }], | |
| italic: ['Italicize', null, { context: true }], | |
| overline: ['Overline', null, { context: true, regions: ['editable'] }], | |
| strikethrough: ['Strikethrough', null, { context: true, regions: ['editable'] }], | |
| underline: ['Underline', null, { context: true, regions: ['editable'] }], | |
| sep: '-' | |
| }, | |
| script: { | |
| subscript: ['Subscript', null, { context: true }], | |
| superscript: ['Superscript', null, { context: true }], | |
| sep: '-' | |
| }, | |
| justify: { | |
| justifyLeft: ['Align Left', null, { context: true, regions: ['editable'] }], | |
| justifyCenter: ['Center', null, { context: true, regions: ['editable'] }], | |
| justifyRight: ['Align Right', null, { context: true, regions: ['editable'] }], | |
| justifyFull: ['Justify Full', null, { context: true, regions: ['editable'] }], | |
| sep: '-' | |
| }, | |
| list: { | |
| insertUnorderedList: ['Unordered List', null, { context: true }], | |
| insertOrderedList: ['Numbered List', null, { context: true }], | |
| sep: '-' | |
| }, | |
| indent: { | |
| outdent: ['Decrease Indentation'], | |
| indent: ['Increase Indentation'], | |
| sep: '-' | |
| }, | |
| table: { | |
| _context: true, | |
| insertRowBefore: ['Insert Table Row', 'Insert a table row before the cursor', { regions: ['editable'] }], | |
| insertRowAfter: ['Insert Table Row', 'Insert a table row after the cursor', { regions: ['editable'] }], | |
| deleteRow: ['Delete Table Row', 'Delete this table row', { regions: ['editable'] }], | |
| insertColumnBefore: ['Insert Table Column', 'Insert a table column before the cursor', { regions: ['editable'] }], | |
| insertColumnAfter: ['Insert Table Column', 'Insert a table column after the cursor', { regions: ['editable'] }], | |
| deleteColumn: ['Delete Table Column', 'Delete this table column', { regions: ['editable'] }], | |
| sep1: ' ', | |
| increaseColspan: ['Increase Cell Columns', 'Increase the cells colspan'], | |
| decreaseColspan: ['Decrease Cell Columns', 'Decrease the cells colspan and add a new cell'], | |
| increaseRowspan: ['Increase Cell Rows', 'Increase the cells rowspan'], | |
| decreaseRowspan: ['Decrease Cell Rows', 'Decrease the cells rowspan and add a new cell'], | |
| sep2: '-' | |
| }, | |
| rules: { | |
| horizontalRule: ['Horizontal Rule', 'Insert a horizontal rule'], | |
| sep1: '-' | |
| }, | |
| formatting: { | |
| removeFormatting: ['Remove Formatting', 'Remove formatting for the selection', { regions: ['editable'] }], | |
| sep2: ' ' | |
| }, | |
| editors: { | |
| htmlEditor: ['Edit HTML', 'Edit the HTML content', { regions: ['editable'] }] | |
| } | |
| }, | |
| snippetable: { | |
| _custom: true, | |
| actions: { | |
| editSnippet: ['Edit Snippet Settings'], | |
| sep1: ' ', | |
| removeSnippet: ['Remove Snippet'] | |
| } | |
| } | |
| }, | |
| // ## Region Options | |
| // | |
| // You can customize some aspects of how regions are found, identified, and saved. | |
| // | |
| // className: Mercury identifies editable regions by a className. This classname has to be added in your HTML in | |
| // advance, and is the only real code/naming exposed in the implementation of Mercury. To allow this to be as | |
| // configurable as possible, you can set the name of the class. When switching to preview mode, this configuration | |
| // is also used to generate a class to indicate that Mercury is in preview mode by appending it with '-preview' (so | |
| // by default it would be mercury-region-preview) | |
| // | |
| // identifier: This is used as a unique identifier for any given region (and thus should be unique to the page). | |
| // By default this is the id attribute but can be changed to a data attribute should you want to use something | |
| // custom instead. | |
| // | |
| // dataAttributes: The dataAttributes is an array of data attributes that will be serialized and returned to the | |
| // server upon saving. These attributes, when applied to a Mercury region element, will be automatically serialized | |
| // and submitted with the AJAX request sent when a page is saved. These are expected to be HTML5 data attributes, | |
| // and 'data-' will automatically be prepended to each item in this directive. (ex. ['scope', 'version']) | |
| regions: { | |
| className: 'mercury-region', | |
| identifier: 'id', | |
| dataAttributes: [] | |
| }, | |
| // ## Snippet Options / Preview | |
| // | |
| // When a user drags a snippet onto the page they'll be prompted to enter options for the given snippet. The server | |
| // is expected to respond with a form. Once the user submits this form, an Ajax request is sent to the server with | |
| // the options provided; this preview request is expected to respond with the rendered markup for the snippet. | |
| // | |
| // method: The HTTP method used when submitting both the options and the preview. We use POST by default because a | |
| // snippet options form may contain large text inputs and we don't want that to be truncated when sent to the | |
| // server. | |
| // | |
| // optionsUrl: The url that the options form will be loaded from. | |
| // | |
| // previewUrl: The url that the options will be submitted to, and will return the rendered snippet markup. | |
| // | |
| // **Note:** `:name` will be replaced with the snippet name in the urls (eg. /mercury/snippets/example/options.html) | |
| snippets: { | |
| method: 'POST', | |
| optionsUrl: '/mercury/snippets/:name/options.html', | |
| previewUrl: '/mercury/snippets/:name/preview.html' | |
| }, | |
| // ## Image Uploading | |
| // | |
| // If you drag images from your desktop into regions that support it, it will be uploaded to the server and inserted | |
| // into the region. You can disable or enable this feature, the accepted mime-types, file size restrictions, and | |
| // other things related to uploading. | |
| // | |
| // **Note:** Image uploading is only supported in some region types, and some browsers. | |
| // | |
| // enabled: You can set this to true, or false if you want to disable the feature entirely. | |
| // | |
| // allowedMimeTypes: You can restrict the types of files that can be uploaded by providing a list of allowed mime | |
| // types. | |
| // | |
| // maxFileSize: You can restrict large files by setting the maxFileSize (in bytes). | |
| // | |
| // inputName: When uploading, a form is generated and submitted to the server via Ajax. If your server would prefer | |
| // a different name for how the image comes through, you can change the inputName. | |
| // | |
| // url: The url that the image upload will be submitted to. | |
| // | |
| // handler: You can use false to let Mercury handle it for you, or you can provide a handler function that can | |
| // modify the response from the server. This can be useful if your server doesn't respond the way Mercury expects. | |
| // The handler function should take the response from the server and return an object that matches: | |
| // `{image: {url: '[your provided url]'}` | |
| uploading: { | |
| enabled: true, | |
| allowedMimeTypes: ['image/jpeg', 'image/gif', 'image/png'], | |
| maxFileSize: 1235242880, | |
| inputName: 'image[image]', | |
| url: '/mercury/images', | |
| handler: false | |
| }, | |
| // ## Localization / I18n | |
| // | |
| // Include the .locale files you want to support when loading Mercury. The files are always named by the language, | |
| // and not the regional dialect (eg. en.locale.js) because the regional dialects are nested within the primary | |
| // locale files. | |
| // | |
| // The client locale will be used first, and if no proper locale file is found for their language then the fallback | |
| // preferredLocale configuration will be used. If one isn't provided, and the client locale isn't included, the | |
| // strings will remain untranslated. | |
| // | |
| // enabled: Set to false to disable, true to enable. | |
| // | |
| // preferredLocale: If a client doesn't support the locales you've included, this is used as a fallback. | |
| localization: { | |
| enabled: false, | |
| preferredLocale: 'swedish_chef-BORK' | |
| }, | |
| // ## Behaviors | |
| // | |
| // Behaviors are used to change the default behaviors of a given region type when a given button is clicked. For | |
| // example, you may prefer to add HR tags using an HR wrapped within a div with a classname (for styling). You | |
| // can add your own complex behaviors here and they'll be shared across all regions. | |
| // | |
| // If you want to add behaviors to specific region types, you can mix them into the actions property of any region | |
| // type. | |
| // | |
| // Mercury.Regions.Editable.actions.htmlEditor = function() {} | |
| // | |
| // You can see how the behavior matches up directly with the button names. It's also important to note that the | |
| // callback functions are executed within the scope of the given region, so you have access to all it's methods. | |
| behaviors: { | |
| //foreColor: function(selection, options) { selection.wrap('<span style="color:' + options.value.toHex() + '">', true) }, | |
| htmlEditor: function() { Mercury.modal('/mercury/modals/htmleditor.html', { title: 'HTML Editor', fullHeight: true, handler: 'htmlEditor' }); } | |
| }, | |
| // ## Global Behaviors | |
| // | |
| // Global behaviors are much like behaviors, but are more "global". Things like save, exit, etc. can be included | |
| // here. They'll only be called once, and execute within the scope of whatever editor is instantiated (eg. | |
| // PageEditor). | |
| // | |
| // An example of changing how saving works: | |
| // | |
| // save: function() { | |
| // var data = top.JSON.stringify(this.serialize(), null, ' '); | |
| // var content = '<textarea style="width:500px;height:200px" wrap="off">' + data + '</textarea>'; | |
| // Mercury.modal(null, {title: 'Saving', closeButton: true, content: content}) | |
| // } | |
| // | |
| // This is a nice way to add functionality, when the behaviors aren't region specific. These can be triggered by a | |
| // button, or manually with `Mercury.trigger('action', {action: 'barrelRoll'})` | |
| globalBehaviors: { | |
| exit: function() { window.location.href = this.iframeSrc() }, | |
| barrelRoll: function() { $('body').css({webkitTransform: 'rotate(360deg)'}) } | |
| }, | |
| // ## Ajax and CSRF Headers | |
| // | |
| // Some server frameworks require that you provide a specific header for Ajax requests. The values for these CSRF | |
| // tokens are typically stored in the rendered DOM. By default, Mercury will look for the Rails specific meta tag, | |
| // and provide the X-CSRF-Token header on Ajax requests, but you can modify this configuration if the system you're | |
| // using doesn't follow the same standard. | |
| csrfSelector: 'meta[name="csrf-token"]', | |
| csrfHeader: 'X-CSRF-Token', | |
| // ## Hijacking Links & Forms | |
| // | |
| // Mercury will hijack links and forms that don't have a target set, or the target is set to _self and will set it | |
| // to _parent. This is because the target must be set properly for Mercury to not get in the way of some | |
| // functionality, like proper page loads on form submissions etc. Mercury doesn't do this to links or forms that | |
| // are within editable regions because it doesn't want to impact the html that's saved. With that being explained, | |
| // you can add classes to links or forms that you don't want this behavior added to. Let's say you have links that | |
| // open a lightbox style window, and you don't want the targets of these to be set to _parent. You can add classes | |
| // to this array, and they will be ignored when the hijacking is applied. | |
| nonHijackableClasses: [], | |
| // ## Pasting & Sanitizing | |
| // | |
| // When pasting content into Mercury it may sometimes contain HTML tags and attributes. This markup is used to | |
| // style the content and makes the pasted content look (and behave) the same as the original content. This can be a | |
| // desired feature or an annoyance, so you can enable various sanitizing methods to clean the content when it's | |
| // pasted. | |
| // | |
| // sanitize: Can be any of the following: | |
| // - false: no sanitizing is done, the content is pasted the exact same as it was copied by the user | |
| // - 'whitelist': content is cleaned using the settings specified in the tag white list (described below) | |
| // - 'text': all html is stripped before pasting, leaving only the raw text | |
| // | |
| // whitelist: The white list allows you to specify tags and attributes that are allowed when pasting content. Each | |
| // item in this object should contain the allowed tag, and an array of attributes that are allowed on that tag. If | |
| // the allowed attributes array is empty, all attributes will be removed. If a tag is not present in this list, it | |
| // will be removed, but without removing any of the text or tags inside it. | |
| // | |
| // **Note:** Content is *always* sanitized if looks like it's from MS Word or similar editors regardless of this | |
| // configuration. | |
| pasting: { | |
| sanitize: 'whitelist', | |
| whitelist: { | |
| h1: [], | |
| h2: [], | |
| h3: [], | |
| h4: [], | |
| h5: [], | |
| h6: [], | |
| table: [], | |
| thead: [], | |
| tbody: [], | |
| tfoot: [], | |
| tr: [], | |
| th: ['colspan', 'rowspan'], | |
| td: ['colspan', 'rowspan'], | |
| div: ['class'], | |
| span: ['class'], | |
| ul: [], | |
| ol: [], | |
| li: [], | |
| b: [], | |
| strong: [], | |
| i: [], | |
| em: [], | |
| u: [], | |
| strike: [], | |
| br: [], | |
| p: [], | |
| hr: [], | |
| a: ['href', 'target', 'title', 'name'], | |
| img: ['src', 'title', 'alt'] | |
| } | |
| }, | |
| // ## Injected Styles | |
| // | |
| // Mercury tries to stay as much out of your code as possible, but because regions appear within your document we | |
| // need to include a few styles to indicate regions, as well as the different states of them (eg. focused). These | |
| // styles are injected into your document, and as simple as they might be, you may want to change them. | |
| // | |
| // {{regionClass}} will be automatically replaced with whatever you have set in the regions.class config directive. | |
| injectedStyles: '' + | |
| '.{{regionClass}} { min-height: 10px; outline: 1px dotted #09F } ' + | |
| '.{{regionClass}}:focus, .{{regionClass}}.focus { outline: none; -webkit-box-shadow: 0 0 10px #09F, 0 0 1px #045; box-shadow: 0 0 10px #09F, 0 0 1px #045 }' + | |
| '.{{regionClass}}:after { content: "."; display: block; visibility: hidden; clear: both; height: 0; overflow: hidden; }' + | |
| '.{{regionClass}} table, .{{regionClass}} td, .{{regionClass}} th { border: 1px dotted red; min-width: 6px; }' + | |
| '.mercury-textarea { border: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; resize: none; }' + | |
| '.mercury-textarea:focus { outline: none; }' | |
| }, | |
| // ## Silent Mode | |
| // | |
| // Turning silent mode on will disable asking about unsaved changes before leaving the page. | |
| silent: false, | |
| // ## Debug Mode | |
| // | |
| // Turning debug mode on will log events and other various things (using console.debug if available). | |
| debug: false, | |
| // The onload method is provided as a callback in case you want to override default Mercury Editor behavior. It will | |
| // be called directly after the Mercury scripts have loaded, but before anything has been initialized. It's a good | |
| // place to add or change functionality. | |
| onload: function() { | |
| //Mercury.PageEditor.prototype.iframeSrc = function(url) { return '/testing'; } | |
| Mercury.on('ready', function() { | |
| var link = $('#mercury_iframe').contents().find('#edit_link'); | |
| Mercury.saveURL = link.data('save-url'); | |
| link.hide(); | |
| }); | |
| Mercury.on('saved', function() { | |
| window.location.href = window.location.href.replace(/\/editor\//i, '/'); | |
| }); | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment