editable_components 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +64 -0
- data/Rakefile +34 -0
- data/app/assets/config/editable_components_manifest.js +2 -0
- data/app/assets/fonts/editable_components/icomoon.eot +0 -0
- data/app/assets/fonts/editable_components/icomoon.svg +24 -0
- data/app/assets/fonts/editable_components/icomoon.ttf +0 -0
- data/app/assets/fonts/editable_components/icomoon.woff +0 -0
- data/app/assets/javascripts/editable_components/application.js +13 -0
- data/app/assets/javascripts/editable_components/dragula/dragula.css +22 -0
- data/app/assets/javascripts/editable_components/dragula/dragula.js +908 -0
- data/app/assets/javascripts/editable_components/dragula/dragula.min.css +1 -0
- data/app/assets/javascripts/editable_components/dragula/dragula.min.js +1 -0
- data/app/assets/javascripts/editable_components/dropzone/CONTRIBUTING.md +78 -0
- data/app/assets/javascripts/editable_components/dropzone/LICENSE +12 -0
- data/app/assets/javascripts/editable_components/dropzone/README.md +134 -0
- data/app/assets/javascripts/editable_components/dropzone/basic.css +39 -0
- data/app/assets/javascripts/editable_components/dropzone/dropzone-amd-module.js +1782 -0
- data/app/assets/javascripts/editable_components/dropzone/dropzone.css +388 -0
- data/app/assets/javascripts/editable_components/dropzone/dropzone.js +1767 -0
- data/app/assets/javascripts/editable_components/dropzone/min/basic.min.css +1 -0
- data/app/assets/javascripts/editable_components/dropzone/min/dropzone-amd-module.min.js +2 -0
- data/app/assets/javascripts/editable_components/dropzone/min/dropzone.min.css +1 -0
- data/app/assets/javascripts/editable_components/dropzone/min/dropzone.min.js +2 -0
- data/app/assets/javascripts/editable_components/main.js +280 -0
- data/app/assets/javascripts/editable_components/medium-editor/API.md +520 -0
- data/app/assets/javascripts/editable_components/medium-editor/CHANGES.md +1043 -0
- data/app/assets/javascripts/editable_components/medium-editor/CODE_OF_CONDUCT.md +13 -0
- data/app/assets/javascripts/editable_components/medium-editor/CONTRIBUTING.md +56 -0
- data/app/assets/javascripts/editable_components/medium-editor/CUSTOM-EVENTS.md +223 -0
- data/app/assets/javascripts/editable_components/medium-editor/LICENSE +36 -0
- data/app/assets/javascripts/editable_components/medium-editor/MAINTAINERS.md +33 -0
- data/app/assets/javascripts/editable_components/medium-editor/OPTIONS.md +663 -0
- data/app/assets/javascripts/editable_components/medium-editor/README.md +725 -0
- data/app/assets/javascripts/editable_components/medium-editor/UPGRADE-5.md +146 -0
- data/app/assets/javascripts/editable_components/medium-editor/medium-editor.css +230 -0
- data/app/assets/javascripts/editable_components/medium-editor/medium-editor.js +7876 -0
- data/app/assets/javascripts/editable_components/medium-editor/medium-editor.min.css +1 -0
- data/app/assets/javascripts/editable_components/medium-editor/medium-editor.min.js +4 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/beagle.css +78 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/beagle.min.css +1 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/bootstrap.css +67 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/bootstrap.min.css +1 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/default.css +63 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/default.min.css +1 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/flat.css +58 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/flat.min.css +1 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/mani.css +57 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/mani.min.css +1 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/roman.css +58 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/roman.min.css +1 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/tim.css +67 -0
- data/app/assets/javascripts/editable_components/medium-editor/themes/tim.min.css +1 -0
- data/app/assets/javascripts/editable_components/sizzle/sizzle.js +2272 -0
- data/app/assets/javascripts/editable_components/sizzle/sizzle.min.js +3 -0
- data/app/assets/javascripts/editable_components/sizzle/sizzle.min.map +1 -0
- data/app/assets/javascripts/editable_components/vue/README.md +124 -0
- data/app/assets/javascripts/editable_components/vue/vue.common.js +9320 -0
- data/app/assets/javascripts/editable_components/vue/vue.common.min.js +7 -0
- data/app/assets/javascripts/editable_components/vue/vue.esm.js +9318 -0
- data/app/assets/javascripts/editable_components/vue/vue.js +9316 -0
- data/app/assets/javascripts/editable_components/vue/vue.min.js +8 -0
- data/app/assets/javascripts/editable_components/vue/vue.runtime.common.js +6831 -0
- data/app/assets/javascripts/editable_components/vue/vue.runtime.esm.js +6829 -0
- data/app/assets/javascripts/editable_components/vue/vue.runtime.js +6827 -0
- data/app/assets/javascripts/editable_components/vue/vue.runtime.min.js +7 -0
- data/app/assets/stylesheets/editable_components/application.sass +65 -0
- data/app/assets/stylesheets/editable_components/blaze/blaze.colors.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/blaze.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.addresses.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.alerts.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.avatars.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.badges.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.breadcrumbs.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.bubbles.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.buttons.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.calendars.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.cards.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.headings.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.hints.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.input-groups.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.inputs.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.links.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.lists.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.navs.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.overlays.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.pagination.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.progress.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.ranges.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.tables.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.tabs.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.tags.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.toggles.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.tooltips.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.trees.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/components.typography.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/generics.global.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/objects.containers.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/objects.drawers.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/objects.forms.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/objects.grid.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/objects.grid.responsive.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/objects.images.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/objects.media.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/objects.modals.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/objects.panels.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/themes/blaze.example.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/utilities.alignment.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/utilities.boxing.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/utilities.elevation.min.css +1 -0
- data/app/assets/stylesheets/editable_components/blaze/utilities.sizes.min.css +1 -0
- data/app/assets/stylesheets/editable_components/dragula/dragula.css +22 -0
- data/app/assets/stylesheets/editable_components/dragula/dragula.js +908 -0
- data/app/assets/stylesheets/editable_components/dragula/dragula.min.css +1 -0
- data/app/assets/stylesheets/editable_components/dragula/dragula.min.js +1 -0
- data/app/assets/stylesheets/editable_components/main.sass +225 -0
- data/app/assets/stylesheets/editable_components/medium-editor/API.md +520 -0
- data/app/assets/stylesheets/editable_components/medium-editor/CHANGES.md +1043 -0
- data/app/assets/stylesheets/editable_components/medium-editor/CODE_OF_CONDUCT.md +13 -0
- data/app/assets/stylesheets/editable_components/medium-editor/CONTRIBUTING.md +56 -0
- data/app/assets/stylesheets/editable_components/medium-editor/CUSTOM-EVENTS.md +223 -0
- data/app/assets/stylesheets/editable_components/medium-editor/LICENSE +36 -0
- data/app/assets/stylesheets/editable_components/medium-editor/MAINTAINERS.md +33 -0
- data/app/assets/stylesheets/editable_components/medium-editor/OPTIONS.md +663 -0
- data/app/assets/stylesheets/editable_components/medium-editor/README.md +725 -0
- data/app/assets/stylesheets/editable_components/medium-editor/UPGRADE-5.md +146 -0
- data/app/assets/stylesheets/editable_components/medium-editor/medium-editor.css +230 -0
- data/app/assets/stylesheets/editable_components/medium-editor/medium-editor.js +7876 -0
- data/app/assets/stylesheets/editable_components/medium-editor/medium-editor.min.css +1 -0
- data/app/assets/stylesheets/editable_components/medium-editor/medium-editor.min.js +4 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/beagle.css +78 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/beagle.min.css +1 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/bootstrap.css +67 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/bootstrap.min.css +1 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/default.css +63 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/default.min.css +1 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/flat.css +58 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/flat.min.css +1 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/mani.css +57 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/mani.min.css +1 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/roman.css +58 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/roman.min.css +1 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/tim.css +67 -0
- data/app/assets/stylesheets/editable_components/medium-editor/themes/tim.min.css +1 -0
- data/app/controllers/editable_components/blocks_controller.rb +36 -0
- data/app/helpers/editable_components/application_helper.rb +4 -0
- data/app/jobs/editable_components/application_job.rb +4 -0
- data/app/mailers/editable_components/application_mailer.rb +6 -0
- data/app/models/editable_components/application_record.rb +5 -0
- data/app/models/editable_components/block.rb +176 -0
- data/app/models/editable_components/concerns/editable.rb +34 -0
- data/app/models/editable_components/item.rb +50 -0
- data/app/models/editable_components/item_boolean.rb +23 -0
- data/app/models/editable_components/item_datetime.rb +14 -0
- data/app/models/editable_components/item_file.rb +46 -0
- data/app/models/editable_components/item_float.rb +23 -0
- data/app/models/editable_components/item_hash.rb +16 -0
- data/app/models/editable_components/item_integer.rb +23 -0
- data/app/models/editable_components/item_string.rb +29 -0
- data/app/models/editable_components/item_text.rb +19 -0
- data/app/views/editable_components/_admin_toolbar.html.erb +105 -0
- data/app/views/editable_components/_block.html.erb +6 -0
- data/app/views/editable_components/_block_image.html.erb +6 -0
- data/app/views/editable_components/_block_multi_text.html.erb +7 -0
- data/app/views/editable_components/_block_slide.html.erb +6 -0
- data/app/views/editable_components/_block_slider.html.erb +7 -0
- data/app/views/editable_components/_block_text.html.erb +5 -0
- data/app/views/editable_components/_block_text_with_image.html.erb +12 -0
- data/app/views/editable_components/_blocks.html.erb +12 -0
- data/config/initializers/editable_components.rb +72 -0
- data/config/routes.rb +4 -0
- data/db/migrate/20170414173603_create_editable_components_blocks.rb +18 -0
- data/db/migrate/20170414173610_create_editable_components_items.rb +11 -0
- data/db/migrate/20170414173611_add_items_booleans.rb +5 -0
- data/db/migrate/20170414173612_add_items_datetimes.rb +5 -0
- data/db/migrate/20170414173613_add_items_files.rb +5 -0
- data/db/migrate/20170414173614_add_items_floats.rb +5 -0
- data/db/migrate/20170414173615_add_items_hashes.rb +5 -0
- data/db/migrate/20170414173616_add_items_integers.rb +5 -0
- data/db/migrate/20170414173617_add_items_strings.rb +5 -0
- data/db/migrate/20170414173618_add_items_texts.rb +5 -0
- data/lib/data/img1.jpg +0 -0
- data/lib/editable_components.rb +87 -0
- data/lib/editable_components/engine.rb +21 -0
- data/lib/editable_components/version.rb +3 -0
- data/lib/tasks/editable_components_tasks.rake +4 -0
- metadata +264 -0
@@ -0,0 +1,13 @@
|
|
1
|
+
# Contributor Code of Conduct
|
2
|
+
|
3
|
+
As contributors and maintainers of MediumEditor, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
|
4
|
+
|
5
|
+
We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
|
6
|
+
|
7
|
+
Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
|
8
|
+
|
9
|
+
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
|
10
|
+
|
11
|
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
|
12
|
+
|
13
|
+
This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
|
@@ -0,0 +1,56 @@
|
|
1
|
+
# Contributing
|
2
|
+
|
3
|
+
## To contribute and end up in this [list](https://github.com/yabwe/medium-editor/graphs/contributors):
|
4
|
+
|
5
|
+
[Kill some bugs :)](https://github.com/yabwe/medium-editor/issues?q=is%3Aopen+is%3Aissue+label%3Abug)
|
6
|
+
|
7
|
+
1. Fork it
|
8
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
9
|
+
3. Test your changes to the best of your ability.
|
10
|
+
4. Update the documentation to reflect your changes if they add or changes current functionality.
|
11
|
+
5. Commit your changes (`git commit -am 'Added some feature'`) **without files from the _dist_ directory**.
|
12
|
+
6. Push to the branch (`git push origin my-new-feature`)
|
13
|
+
7. Create new Pull Request
|
14
|
+
|
15
|
+
## Code Consitency
|
16
|
+
|
17
|
+
To help create consistent looking code throughout the project, we use a few tools to help us. They have plugins for most popular editors/IDEs to make coding for our project, but you should use them in your project as well!
|
18
|
+
|
19
|
+
#### JSHint
|
20
|
+
|
21
|
+
We use [JSHint](http://jshint.com/) on each build to find easy-to-catch errors and potential problems in our js. You can find our JSHint settings in the `.jshintrc` file in the root of the project.
|
22
|
+
|
23
|
+
#### jscs
|
24
|
+
|
25
|
+
We use [jscs](http://jscs.info/) on each build to enforce some code style rules we have for our project. You can find our jscs settings in the `.jscsrc` file in the root of the project.
|
26
|
+
|
27
|
+
#### EditorConfig
|
28
|
+
|
29
|
+
We use [EditorConfig](http://EditorConfig.org) to maintain consistent coding styles between various editors and IDEs. You can find our settings in the `.editorconfig` file in the root of the project.
|
30
|
+
|
31
|
+
## Easy First Bugs
|
32
|
+
|
33
|
+
Looking for something simple for a first contribution? Try fixing an [easy first bug](https://github.com/yabwe/medium-editor/issues?q=is%3Aopen+is%3Aissue+label%3A%22easy+first+bug%22)!
|
34
|
+
|
35
|
+
## Development
|
36
|
+
|
37
|
+
MediumEditor development tasks are managed by Grunt. To install all the necessary packages, just invoke:
|
38
|
+
|
39
|
+
```bash
|
40
|
+
npm install
|
41
|
+
```
|
42
|
+
|
43
|
+
To run all the test and build the dist files for testing on demo pages, just invoke:
|
44
|
+
```bash
|
45
|
+
grunt
|
46
|
+
```
|
47
|
+
|
48
|
+
These are the other available grunt tasks:
|
49
|
+
|
50
|
+
* __js__: runs jslint and jasmine tests and creates minified and concatenated versions of the script;
|
51
|
+
* __css__: runs autoprefixer and csslint
|
52
|
+
* __test__: runs jasmine tests, jslint and csslint
|
53
|
+
* __watch__: watch for modifications on script/scss files
|
54
|
+
* __spec__: runs a task against a specified file
|
55
|
+
|
56
|
+
The source files are located inside the __src__ directory. Be sure to make changes to these files and not files in the dist directory.
|
@@ -0,0 +1,223 @@
|
|
1
|
+
# MediumEditor Custom Events (v5.0.0)
|
2
|
+
|
3
|
+
MediumEditor exposes a variety of custom events for convenience when using the editor with your web application. You can attach and detach listeners to these custom events, as well as manually trigger any custom events including your own custom events.
|
4
|
+
|
5
|
+
**NOTE:**
|
6
|
+
|
7
|
+
Custom event listeners are triggered in the order that they were 'subscribed' to. Most functionality within medium-editor uses these custom events to trigger updates, so in general, it can be assumed that most of the built-in functionality has already been completed before any of your custom event listeners will be called.
|
8
|
+
|
9
|
+
If you need to override the editor's built-in behavior, try overriding the built-in extensions with your own [custom extension](src/js/extensions).
|
10
|
+
|
11
|
+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
12
|
+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
13
|
+
|
14
|
+
- [API Methods](#api-methods)
|
15
|
+
- [`MediumEditor.subscribe(name, listener)`](#mediumeditorsubscribename-listener)
|
16
|
+
- [`MediumEditor.unsubscribe(name, listener)`](#mediumeditorunsubscribename-listener)
|
17
|
+
- [`MediumEditor.trigger(name, data, editable)`](#mediumeditortriggername-data-editable)
|
18
|
+
- [Custom Events](#custom-events)
|
19
|
+
- [`addElement`](#addelement)
|
20
|
+
- [`blur`](#blur)
|
21
|
+
- [`editableInput`](#editableinput)
|
22
|
+
- [`externalInteraction`](#externalinteraction)
|
23
|
+
- [`focus`](#focus)
|
24
|
+
- [`removeElement`](#removeelement)
|
25
|
+
- [Toolbar Custom Events](#toolbar-custom-events)
|
26
|
+
- [`hideToolbar`](#hidetoolbar)
|
27
|
+
- [`positionToolbar`](#positiontoolbar)
|
28
|
+
- [`positionedToolbar`](#positionedtoolbar)
|
29
|
+
- [`showToolbar`](#showtoolbar)
|
30
|
+
- [Proxied Custom Events](#proxied-custom-events)
|
31
|
+
- [`editableClick`](#editableclick)
|
32
|
+
- [`editableBlur`](#editableblur)
|
33
|
+
- [`editableKeypress`](#editablekeypress)
|
34
|
+
- [`editableKeyup`](#editablekeyup)
|
35
|
+
- [`editableKeydown`](#editablekeydown)
|
36
|
+
- [`editableKeydownEnter`](#editablekeydownenter)
|
37
|
+
- [`editableKeydownTab`](#editablekeydowntab)
|
38
|
+
- [`editableKeydownDelete`](#editablekeydowndelete)
|
39
|
+
- [`editableKeydownSpace`](#editablekeydownspace)
|
40
|
+
- [`editableMouseover`](#editablemouseover)
|
41
|
+
- [`editableDrag`](#editabledrag)
|
42
|
+
- [`editableDrop`](#editabledrop)
|
43
|
+
- [`editablePaste`](#editablepaste)
|
44
|
+
|
45
|
+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
46
|
+
|
47
|
+
## API Methods
|
48
|
+
|
49
|
+
Use the following methods of [MediumEditor](API.md) for custom event interaction:
|
50
|
+
|
51
|
+
### `MediumEditor.subscribe(name, listener)`
|
52
|
+
|
53
|
+
Attaches a listener for the specified custom event name.
|
54
|
+
|
55
|
+
**Arguments**
|
56
|
+
|
57
|
+
1. _**name** (`String`)_:
|
58
|
+
|
59
|
+
* Name of the event to listen to. See the list of built-in [Custom Events](#custom-events) below.
|
60
|
+
|
61
|
+
2. _**listener(data, editable)** (`function`)_:
|
62
|
+
|
63
|
+
* Listener method that will be called whenever the custom event is triggered.
|
64
|
+
|
65
|
+
**Arguments to listener**
|
66
|
+
|
67
|
+
1. _**data** (`Event` | `object`)_
|
68
|
+
* For most custom events, this will be the browser's native `Event` object for the event that triggered the custom event to fire.
|
69
|
+
* For some custom events, this will be an object containing information describing the event (depending on which custom event it is)
|
70
|
+
2. _**editable** (`HTMLElement`)_
|
71
|
+
* A reference to the contenteditable container element that this custom event corresponds to. This is especially useful for instances where one instance of MediumEditor contains multiple elements, or there are multiple instances of MediumEditor on the page.
|
72
|
+
* For example, when `blur` fires, this argument will be the `<div contenteditable=true></div>` element that is about to receive focus.
|
73
|
+
|
74
|
+
***
|
75
|
+
### `MediumEditor.unsubscribe(name, listener)`
|
76
|
+
|
77
|
+
Detaches a custom event listener for the specified custom event name.
|
78
|
+
|
79
|
+
**Arguments**
|
80
|
+
|
81
|
+
1. _**name** (`String`)_:
|
82
|
+
|
83
|
+
* Name of the event to detach the listener for.
|
84
|
+
|
85
|
+
2. _**listener** (`function`)_:
|
86
|
+
|
87
|
+
* A reference to the listener to detach. This must be a match by-reference and not a copy.
|
88
|
+
|
89
|
+
**NOTE**
|
90
|
+
|
91
|
+
* Calling [destroy()](API.md#destroy) on the MediumEditor object will automatically remove all custom event listeners.
|
92
|
+
|
93
|
+
***
|
94
|
+
### `MediumEditor.trigger(name, data, editable)`
|
95
|
+
|
96
|
+
Manually triggers a custom event.
|
97
|
+
|
98
|
+
1. _**name** (`String`)_:
|
99
|
+
|
100
|
+
* Name of the custom event to trigger.
|
101
|
+
|
102
|
+
2. _**data** (`Event` | `object`)_:
|
103
|
+
|
104
|
+
* Native `Event` object or custom data object to pass to all the listeners to this custom event.
|
105
|
+
|
106
|
+
3. _**editable** (`HTMLElement`)_:
|
107
|
+
|
108
|
+
* The `<div contenteditable=true></div>` element to pass to all of the listeners to this custom event.
|
109
|
+
|
110
|
+
## Custom Events
|
111
|
+
|
112
|
+
These events are custom to MediumEditor so there may be one or more native events that can trigger them.
|
113
|
+
|
114
|
+
### `addElement`
|
115
|
+
|
116
|
+
`addElement` is triggered whenever an element is added to the editor after the editor has been instantiated. This custom event will be triggered **after** the element has already been initialized by the editor and added to the internal array of **elements**. If the element being added was a `<textarea>`, the element passed to the listener will be the created `<div contenteditable=true>` element and not the root `<textarea>`.
|
117
|
+
|
118
|
+
**Arguments to listener**
|
119
|
+
|
120
|
+
1. _**data** (`object`)_
|
121
|
+
* Properties of data object
|
122
|
+
* `target`: element which was added to the editor
|
123
|
+
* `currentTarget`: element which was added to the editor
|
124
|
+
2. _**editable** (`HTMLElement`)_
|
125
|
+
* element which was added to the editor
|
126
|
+
|
127
|
+
***
|
128
|
+
### `blur`
|
129
|
+
|
130
|
+
`blur` is triggered whenever a `contenteditable` element within an editor has lost focus to an element other than an editor maintained element (ie Toolbar, Anchor Preview, etc).
|
131
|
+
|
132
|
+
Example:
|
133
|
+
|
134
|
+
1. User selects text within an editor element, causing the toolbar to appear
|
135
|
+
2. User clicks on a toolbar button
|
136
|
+
* Technically focus may have been lost on the editor element, but since the user is interacting with the toolbar, `blur` is NOT fired.
|
137
|
+
3. User hovers over a link, anchor-preview is displayed
|
138
|
+
4. User clicks link to edit it, and the toolbar now displays a textbox to edit the url
|
139
|
+
* Focus will have lost here since focus is now in the url editing textbox, but again since it's within the toolbar, `blur` is NOT fired.
|
140
|
+
5. User clicks on another part of the page which hides the toolbar and focus is no longer in the `contenteditable`
|
141
|
+
6. `blur` is triggered
|
142
|
+
|
143
|
+
***
|
144
|
+
### `editableInput`
|
145
|
+
|
146
|
+
`editableInput` is triggered whenever the content of a `contenteditable` changes, including keypresses, toolbar actions, or any other user interaction that changes the html within the element. For non-IE browsers, this is just a proxied version of the native `input` event. However, Internet Explorer and has never supported the `input` event on `contenteditable` elements, and Edge has some support for `input` on `contenteditable` (which may be fixed in upcoming release of Edge) so for these browsers the `editableInput` event is triggered through a combination of:
|
147
|
+
* native `keypress` event on the element
|
148
|
+
* native `selectionchange` event on the document
|
149
|
+
* monitoring calls the `document.execCommand()`
|
150
|
+
|
151
|
+
***
|
152
|
+
### `externalInteraction`
|
153
|
+
|
154
|
+
`externalInteraction` is triggered whenever the user interact with any element outside of the `contenteditable` element or the other elements maintained by the editor (ie Toolbar, Anchor Preview, etc.). This event trigger regardless of whether an existing `contenteditable` element had focus or not.
|
155
|
+
|
156
|
+
***
|
157
|
+
### `focus`
|
158
|
+
|
159
|
+
`focus` is triggered whenever a `contenteditable` element within an editor receives focus. If the user interacts with any editor maintained elements (ie toolbar), `blur` is NOT triggered because focus has not been lost. Thus, `focus` will only be triggered when an `contenteditable` element (or the editor that contains it) is first interacted with.
|
160
|
+
|
161
|
+
***
|
162
|
+
### `removeElement`
|
163
|
+
|
164
|
+
`removeElement` is triggered whenever an element is removed from the editor after the editor has been instantiated. This custom event will be triggered **after** the element has already been removed from the editor and any events attached to it have already been removed. If the element being removed was a `<div>` created to correspond to a `<textarea>`, the element will already have been removed from the DOM.
|
165
|
+
|
166
|
+
**Arguments to listener**
|
167
|
+
|
168
|
+
1. _**data** (`object`)_
|
169
|
+
* Properties of data object
|
170
|
+
* `target`: element which was removed from the editor
|
171
|
+
* `currentTarget`: element which was removed from the editor
|
172
|
+
2. _**editable** (`HTMLElement`)_
|
173
|
+
* element which was removed from the editor
|
174
|
+
|
175
|
+
## Toolbar Custom Events
|
176
|
+
|
177
|
+
These events are triggered by the toolbar when the toolbar extension has not been disabled.
|
178
|
+
|
179
|
+
### `hideToolbar`
|
180
|
+
|
181
|
+
`hideToolbar` is triggered whenever the toolbar was visible and has just been hidden.
|
182
|
+
|
183
|
+
### `positionToolbar`
|
184
|
+
`positionToolbar` is triggered each time the current selection is checked and the toolbar's position is about to be updated. This event is triggered after all of the buttons have had their state updated, but before the toolbar is moved to the correct location. This event will be triggered even if nothing will be changed about the toolbar's appearance.
|
185
|
+
|
186
|
+
### `positionedToolbar`
|
187
|
+
`positionedToolbar` is triggered each time the current selection is checked, the toolbar is displayed, and the toolbar's position was updated. This differs from the `positionToolbar` event in that the visibility and location of the toolbar has already been changed (as opposed to the event triggering before those changes occur). This event will be triggered even if nothing was changed about the toolbar's appearance.
|
188
|
+
|
189
|
+
### `showToolbar`
|
190
|
+
`showToolbar` is triggered whenever the toolbar was hidden and has just been displayed.
|
191
|
+
|
192
|
+
## Proxied Custom Events
|
193
|
+
|
194
|
+
These events are triggered whenever a native browser event is triggered for any of the `contenteditable` elements monitored by this instance of MediumEditor.
|
195
|
+
|
196
|
+
For example, the `editableClick` custom event will be triggered when a native `click` event is fired on any of the `contenteditable` elements. This provides a single event listener that can get fired for all elements, and also allows for the `contenteditable` element that triggered the event to be passed to the listener.
|
197
|
+
|
198
|
+
##### `editableClick`
|
199
|
+
native `click` event for each element
|
200
|
+
##### `editableBlur`
|
201
|
+
native `blur` event for each element.
|
202
|
+
##### `editableKeypress`
|
203
|
+
native `keypress` event for each element.
|
204
|
+
##### `editableKeyup`
|
205
|
+
native `keyup` event for each element.
|
206
|
+
##### `editableKeydown`
|
207
|
+
native `keydown` event for each element.
|
208
|
+
##### `editableKeydownEnter`
|
209
|
+
native `keydown` event for each element, but only triggered if the key is `ENTER` (keycode 13).
|
210
|
+
##### `editableKeydownTab`
|
211
|
+
native `keydown` event for each element, but only triggered if the key is `TAB` (keycode 9).
|
212
|
+
##### `editableKeydownDelete`
|
213
|
+
native `keydown` event for each element, but only triggered if the key is `DELETE` (keycode 46).
|
214
|
+
##### `editableKeydownSpace`
|
215
|
+
native `keydown` event for each element, but only triggered if the key is `SPACE` (keycode 32).
|
216
|
+
##### `editableMouseover`
|
217
|
+
native `mouseover` event for each element.
|
218
|
+
##### `editableDrag`
|
219
|
+
native `drag` event for each element.
|
220
|
+
##### `editableDrop`
|
221
|
+
native `drop` event for each element.
|
222
|
+
##### `editablePaste`
|
223
|
+
native `paste` event for each element.
|
@@ -0,0 +1,36 @@
|
|
1
|
+
Copyright Davi Ferreira, http://www.daviferreira.com/
|
2
|
+
|
3
|
+
This software consists of voluntary contributions made by many
|
4
|
+
individuals. For exact contribution history, see the revision history
|
5
|
+
available at https://github.com/yabwe/medium-editor
|
6
|
+
|
7
|
+
The following license applies to all parts of this software except as
|
8
|
+
documented below:
|
9
|
+
|
10
|
+
====
|
11
|
+
|
12
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
13
|
+
a copy of this software and associated documentation files (the
|
14
|
+
"Software"), to deal in the Software without restriction, including
|
15
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
16
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
17
|
+
permit persons to whom the Software is furnished to do so, subject to
|
18
|
+
the following conditions:
|
19
|
+
|
20
|
+
The above copyright notice and this permission notice shall be
|
21
|
+
included in all copies or substantial portions of the Software.
|
22
|
+
|
23
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
24
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
25
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
26
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
27
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
28
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
29
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
30
|
+
|
31
|
+
====
|
32
|
+
|
33
|
+
All files located in the node_modules directory are
|
34
|
+
externally maintained libraries used by this software which have their
|
35
|
+
own licenses; we recommend you read them, as their terms may differ from
|
36
|
+
the terms above.
|
@@ -0,0 +1,33 @@
|
|
1
|
+
## STEPS TO RELEASE:
|
2
|
+
|
3
|
+
1. Find the last release commit in log history. Look through all the commits or PR history and see all the stuff that has happened since the last release.
|
4
|
+
2. Add a row describing each high-level change into `CHANGES.md`. Looking at `CHANGES.md` would be a good stepping off point.
|
5
|
+
3. Depending upon the changes, decide if it is a major/minor/patch release. _Read more about [semantic versioning](http://semver.org/)_.
|
6
|
+
4. Depending upon the type of release, run `grunt major`, `grunt minor`, `grunt patch` to update the version number and generate all the dist files.
|
7
|
+
5. Commit all your changes (**including `CHANGES.md`**) into your commit. Add the new release number into your commit message. And push it up to the remote master branch.
|
8
|
+
6. Go [here](https://github.com/yabwe/medium-editor/releases) and ‘Draft a new release’. Title the release as the new release number (ex: `5.11.0`). Copy/paste the entries you made in `CHANGES.md` into the release summary. **Make sure the release is against the master branch.**
|
9
|
+
7. Once the release is created, go back to your git and run `npm publish`.
|
10
|
+
|
11
|
+
|
12
|
+
## RUNNING TESTS FOR FORK BRANCHES IN SAUCELABS:
|
13
|
+
|
14
|
+
For pull requests submitted from a forked version of the repo, the test suite won't run in Saucelabs so we haven't been able to know if tests fail in various browsers until after the PR is merged into master. This is deliberate by Saucelabs as a security measure to prevent external forks from doing malicious things to the repo.
|
15
|
+
|
16
|
+
There is a workaround however, so when a PR is submitted from an external fork, follow these steps to verify the tests don't fail in Saucelabs before merging the PR into master.
|
17
|
+
|
18
|
+
For this example, let's assume there's a new pull request (#123) from a branch of an external user's fork (external-user/new-branch)
|
19
|
+
|
20
|
+
1. Create a new local branch for the pull request
|
21
|
+
* ```git checkout -b integration-123```
|
22
|
+
2. Add a remote that points to the external fork
|
23
|
+
* ```git remote add external-user git@github.com:external-user/medium-editor.git```
|
24
|
+
3. Fetch the remote repo
|
25
|
+
* ```git fetch external-user```
|
26
|
+
4. Merge the external branch into your local branch
|
27
|
+
* ```git merge external-user/new-branch```
|
28
|
+
5. Push your local branch up to the main repo
|
29
|
+
* ```git push```
|
30
|
+
|
31
|
+
That's it. Pushing the branch up should kick off a travis build, which will cause the tests to run in Saucelabs. Github is smart enough to link the existing pull request to that build and reflect the status of the build (including the results from Saucelabs) on the PR summary page!
|
32
|
+
|
33
|
+
|
@@ -0,0 +1,663 @@
|
|
1
|
+
# MediumEditor Options (v5.0.0)
|
2
|
+
|
3
|
+
Options to customize medium-editor are passed as the second argument to the [MediumEditor constructor](API.md#mediumeditorelements-options). Example:
|
4
|
+
|
5
|
+
```js
|
6
|
+
var editor = new MediumEditor('.editor', {
|
7
|
+
// options go here
|
8
|
+
});
|
9
|
+
```
|
10
|
+
|
11
|
+
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
12
|
+
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
13
|
+
|
14
|
+
|
15
|
+
- [Core Options](#core-options)
|
16
|
+
- [`activeButtonClass`](#activebuttonclass)
|
17
|
+
- [`buttonLabels`](#buttonlabels)
|
18
|
+
- [`contentWindow`](#contentwindow)
|
19
|
+
- [`delay`](#delay)
|
20
|
+
- [`disableReturn`](#disablereturn)
|
21
|
+
- [`disableDoubleReturn`](#disabledoublereturn)
|
22
|
+
- [`disableExtraSpaces`](#disableextraspaces)
|
23
|
+
- [`disableEditing`](#disableediting)
|
24
|
+
- [`elementsContainer`](#elementscontainer)
|
25
|
+
- [`extensions`](#extensions)
|
26
|
+
- [`ownerDocument`](#ownerdocument)
|
27
|
+
- [`spellcheck`](#spellcheck)
|
28
|
+
- [`targetBlank`](#targetblank)
|
29
|
+
- [Toolbar options](#toolbar-options)
|
30
|
+
- [`allowMultiParagraphSelection`](#allowmultiparagraphselection)
|
31
|
+
- [`buttons`](#buttons)
|
32
|
+
- [`diffLeft`](#diffleft)
|
33
|
+
- [`diffTop`](#difftop)
|
34
|
+
- [`firstButtonClass`](#firstbuttonclass)
|
35
|
+
- [`lastButtonClass`](#lastbuttonclass)
|
36
|
+
- [`relativeContainer`](#relativecontainer)
|
37
|
+
- [`standardizeSelectionStart`](#standardizeselectionstart)
|
38
|
+
- [`static`](#static)
|
39
|
+
- ['static' Toolbar Options](#static-toolbar-options)
|
40
|
+
- [`align`](#align)
|
41
|
+
- [`sticky`](#sticky)
|
42
|
+
- [`stickyTopOffset`](#stickytopoffset)
|
43
|
+
- [`updateOnEmptySelection`](#updateonemptyselection)
|
44
|
+
- [Disabling Toolbar](#disabling-toolbar)
|
45
|
+
- [Anchor Preview options](#anchor-preview-options)
|
46
|
+
- [`hideDelay`](#hidedelay)
|
47
|
+
- [`previewValueSelector`](#previewvalueselector)
|
48
|
+
- [`showOnEmptyLinks`](#showonemptylinks)
|
49
|
+
- [`showWhenToolbarIsVisible`](#showwhentoolbarisvisible)
|
50
|
+
- [Disabling Anchor Preview](#disabling-anchor-preview)
|
51
|
+
- [Placeholder Options](#placeholder-options)
|
52
|
+
- [`text`](#text)
|
53
|
+
- [`hideOnClick`](#hideonclick)
|
54
|
+
- [Disabling Placeholders](#disabling-placeholders)
|
55
|
+
- [Anchor Form options](#anchor-form-options)
|
56
|
+
- [`customClassOption`](#customclassoption)
|
57
|
+
- [`customClassOptionText`](#customclassoptiontext)
|
58
|
+
- [`linkValidation`](#linkvalidation)
|
59
|
+
- [`placeholderText`](#placeholdertext)
|
60
|
+
- [`targetCheckbox`](#targetcheckbox)
|
61
|
+
- [`targetCheckboxText`](#targetcheckboxtext)
|
62
|
+
- [Paste Options](#paste-options)
|
63
|
+
- [`forcePlainText`](#forceplaintext)
|
64
|
+
- [`cleanPastedHTML`](#cleanpastedhtml)
|
65
|
+
- [`cleanReplacements`](#cleanreplacements)
|
66
|
+
- [`cleanAttrs`](#cleanattrs)
|
67
|
+
- [`cleanTags`](#cleantags)
|
68
|
+
- [`unwrapTags`](#unwraptags)
|
69
|
+
- [Disabling Paste Handling](#disabling-paste-handling)
|
70
|
+
- [KeyboardCommands Options](#keyboardcommands-options)
|
71
|
+
- [`commands`](#commands)
|
72
|
+
- [Disabling Keyboard Commands](#disabling-keyboard-commands)
|
73
|
+
- [Auto Link Options](#auto-link-options)
|
74
|
+
- [`autoLink`](#autolink)
|
75
|
+
- [Enabling Auto Link](#enabling-auto-link)
|
76
|
+
- [Image Dragging Options](#image-dragging-options)
|
77
|
+
- [`imageDragging`](#imagedragging)
|
78
|
+
- [Disabling Image Dragging](#disabling-image-dragging)
|
79
|
+
- [Options Example:](#options-example)
|
80
|
+
|
81
|
+
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
82
|
+
|
83
|
+
## Core Options
|
84
|
+
|
85
|
+
These are global options that apply to the entire editor. Example:
|
86
|
+
|
87
|
+
```js
|
88
|
+
var editor = new MediumEditor('.editable', {
|
89
|
+
/* These are the default options for the editor,
|
90
|
+
if nothing is passed this is what is used */
|
91
|
+
activeButtonClass: 'medium-editor-button-active',
|
92
|
+
allowMultiParagraphSelection: true,
|
93
|
+
buttonLabels: false,
|
94
|
+
contentWindow: window,
|
95
|
+
delay: 0,
|
96
|
+
disableReturn: false,
|
97
|
+
disableDoubleReturn: false,
|
98
|
+
disableExtraSpaces: false,
|
99
|
+
disableEditing: false,
|
100
|
+
elementsContainer: false,
|
101
|
+
extensions: {},
|
102
|
+
ownerDocument: document,
|
103
|
+
spellcheck: true,
|
104
|
+
targetBlank: false
|
105
|
+
});
|
106
|
+
```
|
107
|
+
|
108
|
+
#### `activeButtonClass`
|
109
|
+
**Default:** `'medium-editor-button-active'`
|
110
|
+
|
111
|
+
CSS class added to active buttons in the toolbar.
|
112
|
+
|
113
|
+
***
|
114
|
+
#### `buttonLabels`
|
115
|
+
**Default:** `false`
|
116
|
+
|
117
|
+
Custom content for the toolbar buttons.
|
118
|
+
|
119
|
+
**Valid Values:**
|
120
|
+
* `false`
|
121
|
+
* Use default button labels
|
122
|
+
* `'fontawesome'`
|
123
|
+
* Uses fontawesome icon set for all toolbar icons
|
124
|
+
|
125
|
+
**NOTE**:
|
126
|
+
|
127
|
+
Using `'fontawesome'` as the buttonLabels requires version 4.1.0 of the fontawesome css to be on the page to ensure all icons will be displayed correctly.
|
128
|
+
|
129
|
+
***
|
130
|
+
#### `contentWindow`
|
131
|
+
**Default:** `window`
|
132
|
+
|
133
|
+
The contentWindow object that contains the contenteditable element. MediumEditor will use this for attaching events, getting selection, etc.
|
134
|
+
|
135
|
+
***
|
136
|
+
#### `delay`
|
137
|
+
**Default:** `0`
|
138
|
+
|
139
|
+
Time in milliseconds to show the toolbar or anchor tag preview.
|
140
|
+
|
141
|
+
***
|
142
|
+
#### `disableReturn`
|
143
|
+
**Default:** `false`
|
144
|
+
|
145
|
+
Enables/disables the use of the return-key. You can also set specific element behavior by using setting a data-disable-return attribute.
|
146
|
+
|
147
|
+
***
|
148
|
+
#### `disableDoubleReturn`
|
149
|
+
**Default:** `false`
|
150
|
+
|
151
|
+
Allows/disallows two (or more) empty new lines. You can also set specific element behavior by using setting a data-disable-double-return attribute.
|
152
|
+
|
153
|
+
***
|
154
|
+
#### `disableExtraSpaces`
|
155
|
+
**Default:** `false`
|
156
|
+
|
157
|
+
When set to true, it disallows spaces at the beginning and end of the element. Also it disallows entering 2 consecutive spaces between 2 words.
|
158
|
+
|
159
|
+
***
|
160
|
+
#### `disableEditing`
|
161
|
+
**Default:** `false`
|
162
|
+
|
163
|
+
Enables/disables adding the contenteditable behavior. Useful for using the toolbar with customized buttons/actions. You can also set specific element behavior by using setting a data-disable-editing attribute.
|
164
|
+
|
165
|
+
***
|
166
|
+
#### `elementsContainer`
|
167
|
+
**Default:** `ownerDocument.body`
|
168
|
+
|
169
|
+
Specifies a DOM node to contain MediumEditor's toolbar and anchor preview elements.
|
170
|
+
|
171
|
+
***
|
172
|
+
#### `extensions`
|
173
|
+
**Default:** `{}`
|
174
|
+
|
175
|
+
Custom extensions to use. See [Custom Buttons and Extensions](src/js/extensions) for more details on extensions.
|
176
|
+
|
177
|
+
***
|
178
|
+
#### `ownerDocument`
|
179
|
+
**Default:** `window.document`
|
180
|
+
|
181
|
+
The ownerDocument object for the contenteditable element. MediumEditor will use this for creating elements, getting selection, attaching events, etc.
|
182
|
+
|
183
|
+
***
|
184
|
+
#### `spellcheck`
|
185
|
+
**Default:** `true`
|
186
|
+
|
187
|
+
Enable/disable native contentEditable automatic spellcheck.
|
188
|
+
|
189
|
+
***
|
190
|
+
#### `targetBlank`
|
191
|
+
**Default:** `false`
|
192
|
+
|
193
|
+
Enables/disables automatically adding the `target="_blank"` attribute to anchor tags.
|
194
|
+
|
195
|
+
## Toolbar options
|
196
|
+
|
197
|
+
The toolbar for MediumEditor is implemented as a built-in extension which automatically displays whenever the user selects some text. The toolbar can hold any set of defined built-in buttons, but can also hold any custom buttons passed in as extensions.
|
198
|
+
|
199
|
+
Options for the toolbar are passed as an object that is a member of the outer options object. Example:
|
200
|
+
```js
|
201
|
+
var editor = new MediumEditor('.editable', {
|
202
|
+
toolbar: {
|
203
|
+
/* These are the default options for the toolbar,
|
204
|
+
if nothing is passed this is what is used */
|
205
|
+
allowMultiParagraphSelection: true,
|
206
|
+
buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
|
207
|
+
diffLeft: 0,
|
208
|
+
diffTop: -10,
|
209
|
+
firstButtonClass: 'medium-editor-button-first',
|
210
|
+
lastButtonClass: 'medium-editor-button-last',
|
211
|
+
relativeContainer: null,
|
212
|
+
standardizeSelectionStart: false,
|
213
|
+
static: false,
|
214
|
+
|
215
|
+
/* options which only apply when static is true */
|
216
|
+
align: 'center',
|
217
|
+
sticky: false,
|
218
|
+
updateOnEmptySelection: false
|
219
|
+
}
|
220
|
+
});
|
221
|
+
```
|
222
|
+
|
223
|
+
***
|
224
|
+
#### `allowMultiParagraphSelection`
|
225
|
+
**Default:** `true`
|
226
|
+
|
227
|
+
enables/disables whether the toolbar should be displayed when selecting multiple paragraphs/block elements.
|
228
|
+
|
229
|
+
***
|
230
|
+
#### `buttons`
|
231
|
+
**Default:** `['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']`
|
232
|
+
|
233
|
+
The set of buttons to display on the toolbar.
|
234
|
+
|
235
|
+
***
|
236
|
+
#### `diffLeft`
|
237
|
+
**Default:** `0`
|
238
|
+
|
239
|
+
Value in pixels to be added to the X axis positioning of the toolbar.
|
240
|
+
|
241
|
+
***
|
242
|
+
#### `diffTop`
|
243
|
+
**Default:** `-10`
|
244
|
+
|
245
|
+
Value in pixels to be added to the Y axis positioning of the toolbar.
|
246
|
+
|
247
|
+
***
|
248
|
+
#### `firstButtonClass`
|
249
|
+
**Default:** `'medium-editor-button-first'`
|
250
|
+
|
251
|
+
CSS class added to the first button in the toolbar.
|
252
|
+
|
253
|
+
***
|
254
|
+
#### `lastButtonClass`
|
255
|
+
**Default:** `'medium-editor-button-last'`
|
256
|
+
|
257
|
+
CSS class added to the last button in the toolbar.
|
258
|
+
|
259
|
+
***
|
260
|
+
#### `relativeContainer`
|
261
|
+
**Default:** `null`
|
262
|
+
|
263
|
+
DOMElement to append the toolbar to instead of the body. When an element is passed the toolbar will also be positioned `relative` instead of `absolute`, which means the editor will not attempt to manually position the toolbar automatically.
|
264
|
+
|
265
|
+
**NOTE:**
|
266
|
+
* Using this in combination with the `static` option for toolbar is not explicitly supported and the behavior in this case is not defined.
|
267
|
+
|
268
|
+
***
|
269
|
+
#### `standardizeSelectionStart`
|
270
|
+
**Default:** `false`
|
271
|
+
|
272
|
+
Enables/disables standardizing how the beginning of a range is decided between browsers whenever the selected text is analyzed for updating toolbar buttons status.
|
273
|
+
|
274
|
+
***
|
275
|
+
#### `static`
|
276
|
+
**Default:** `false`
|
277
|
+
|
278
|
+
Enable/disable the toolbar always displaying in the same location relative to the medium-editor element.
|
279
|
+
|
280
|
+
|
281
|
+
### 'static' Toolbar Options
|
282
|
+
|
283
|
+
These options only apply when the `static` option is being used.
|
284
|
+
|
285
|
+
***
|
286
|
+
#### `align`
|
287
|
+
**Default:** `center`
|
288
|
+
|
289
|
+
When the __static__ option is `true`, this aligns the static toolbar relative to the medium-editor element.
|
290
|
+
|
291
|
+
**Valid Values**
|
292
|
+
|
293
|
+
`'left'` | `'center'` | `'right'`
|
294
|
+
|
295
|
+
***
|
296
|
+
#### `sticky`
|
297
|
+
**Default:** `false`
|
298
|
+
|
299
|
+
When the __static__ option is `true`, this enables/disables the toolbar "sticking" to the viewport and staying visible on the screen while the page scrolls.
|
300
|
+
|
301
|
+
***
|
302
|
+
#### `stickyTopOffset`
|
303
|
+
**Default:** `0`
|
304
|
+
|
305
|
+
When the __sticky__ option is `true`, this set in pixel a top offset above the toolbar.
|
306
|
+
|
307
|
+
***
|
308
|
+
#### `updateOnEmptySelection`
|
309
|
+
**Default:** `false`
|
310
|
+
|
311
|
+
When the __static__ option is `true`, this enables/disables updating the state of the toolbar buttons even when the selection is collapsed (there is no selection, just a cursor).
|
312
|
+
|
313
|
+
### Disabling Toolbar
|
314
|
+
|
315
|
+
To disable the toolbar (which also disables the anchor-preview extension), set the value of the `toolbar` option to `false`:
|
316
|
+
```javascript
|
317
|
+
var editor = new MediumEditor('.editable', {
|
318
|
+
toolbar: false
|
319
|
+
});
|
320
|
+
```
|
321
|
+
|
322
|
+
|
323
|
+
## Anchor Preview options
|
324
|
+
|
325
|
+
The anchor preview is a built-in extension which automatically displays a 'tooltip' when the user is hovering over a link in the editor. The tooltip will display the `href` of the link, and when click, will open the anchor editing form in the toolbar.
|
326
|
+
|
327
|
+
Options for the anchor preview 'tooltip' are passed as an object that is a member of the outer options object. Example:
|
328
|
+
```javascript
|
329
|
+
var editor = new MediumEditor('.editable', {
|
330
|
+
anchorPreview: {
|
331
|
+
/* These are the default options for anchor preview,
|
332
|
+
if nothing is passed this is what it used */
|
333
|
+
hideDelay: 500,
|
334
|
+
previewValueSelector: 'a'
|
335
|
+
}
|
336
|
+
}
|
337
|
+
});
|
338
|
+
```
|
339
|
+
|
340
|
+
|
341
|
+
***
|
342
|
+
#### `hideDelay`
|
343
|
+
**Default:** `500`
|
344
|
+
|
345
|
+
Time in milliseconds to show the anchor tag preview after the mouse has left the anchor tag.
|
346
|
+
|
347
|
+
***
|
348
|
+
#### `previewValueSelector`
|
349
|
+
**Default:** `'a'`
|
350
|
+
|
351
|
+
The default selector to locate where to put the activeAnchor value in the preview. You should only need to override this if you've modified the way in which the anchor-preview extension renders.
|
352
|
+
|
353
|
+
***
|
354
|
+
#### `showOnEmptyLinks`
|
355
|
+
**Default:** `true`
|
356
|
+
|
357
|
+
Determines whether the anchor tag preview shows up on link with href as "" or "#something". You should set this value to false if you do not want the preview to show up in such use cases.
|
358
|
+
|
359
|
+
***
|
360
|
+
#### `showWhenToolbarIsVisible`
|
361
|
+
**Default:** `false`
|
362
|
+
|
363
|
+
Determines whether the anchor tag preview shows up when the toolbar is visible. You should set this value to true if the static option for the toolbar is true and you want the preview to show at the same time.
|
364
|
+
|
365
|
+
### Disabling Anchor Preview
|
366
|
+
|
367
|
+
To disable the anchor preview, set the value of the `anchorPreview` option to `false`:
|
368
|
+
```javascript
|
369
|
+
var editor = new MediumEditor('.editable', {
|
370
|
+
anchorPreview: false
|
371
|
+
});
|
372
|
+
```
|
373
|
+
|
374
|
+
**NOTE:**
|
375
|
+
|
376
|
+
* If the toolbar is disabled (via `toolbar: false` option or `data-disable-toolbar` attribute) the anchor-preview is automatically disabled.
|
377
|
+
* If the anchor editing form is not enabled, clicking on the anchor-preview will not allow the href of the link to be edited
|
378
|
+
|
379
|
+
## Placeholder Options
|
380
|
+
|
381
|
+
The placeholder handler is a built-in extension which displays placeholder text when the editor is empty.
|
382
|
+
|
383
|
+
Options for placeholder are passed as an object that is a member of the outer options object. Example:
|
384
|
+
```javascript
|
385
|
+
var editor = new MediumEditor('.editable', {
|
386
|
+
placeholder: {
|
387
|
+
/* This example includes the default options for placeholder,
|
388
|
+
if nothing is passed this is what it used */
|
389
|
+
text: 'Type your text',
|
390
|
+
hideOnClick: true
|
391
|
+
}
|
392
|
+
});
|
393
|
+
```
|
394
|
+
|
395
|
+
|
396
|
+
***
|
397
|
+
#### `text`
|
398
|
+
**Default:** `'Type your text'`
|
399
|
+
|
400
|
+
Defines the default placeholder for empty contenteditables when __placeholder__ is not set to false. You can overwrite it by setting a `data-placeholder` attribute on the editor elements.
|
401
|
+
|
402
|
+
***
|
403
|
+
#### `hideOnClick`
|
404
|
+
**Default:** `true`
|
405
|
+
|
406
|
+
Causes the placeholder to disappear as soon as the field gains focus. To hide the placeholder only after starting to type, and to show it again as soon as field is empty, set this option to `false`.
|
407
|
+
|
408
|
+
|
409
|
+
### Disabling Placeholders
|
410
|
+
|
411
|
+
To disable the placeholder, set the value of the `placeholder` option to `false`:
|
412
|
+
```javascript
|
413
|
+
var editor = new MediumEditor('.editable', {
|
414
|
+
placeholder: false
|
415
|
+
});
|
416
|
+
```
|
417
|
+
|
418
|
+
## Anchor Form options
|
419
|
+
|
420
|
+
The anchor form is a built-in button extension which allows the user to add/edit/remove links from within the editor. When 'anchor' is passed in as a button in the list of buttons, this extension will be enabled and can be triggered by clicking the corresponding button in the toolbar.
|
421
|
+
|
422
|
+
Options for the anchor form are passed as an object that is a member of the outer options object. Example:
|
423
|
+
```javascript
|
424
|
+
var editor = new MediumEditor('.editable', {
|
425
|
+
toolbar: {
|
426
|
+
buttons: ['bold', 'italic', 'underline', 'anchor']
|
427
|
+
},
|
428
|
+
anchor: {
|
429
|
+
/* These are the default options for anchor form,
|
430
|
+
if nothing is passed this is what it used */
|
431
|
+
customClassOption: null,
|
432
|
+
customClassOptionText: 'Button',
|
433
|
+
linkValidation: false,
|
434
|
+
placeholderText: 'Paste or type a link',
|
435
|
+
targetCheckbox: false,
|
436
|
+
targetCheckboxText: 'Open in new window'
|
437
|
+
}
|
438
|
+
}
|
439
|
+
});
|
440
|
+
```
|
441
|
+
|
442
|
+
|
443
|
+
***
|
444
|
+
#### `customClassOption`
|
445
|
+
**Default:** `null`
|
446
|
+
|
447
|
+
Custom class name the user can optionally have added to their created links (ie 'button'). If passed as a non-empty string, a checkbox will be displayed allowing the user to choose whether to have the class added to the created link or not.
|
448
|
+
|
449
|
+
***
|
450
|
+
#### `customClassOptionText`
|
451
|
+
**Default:** `'Button'`
|
452
|
+
|
453
|
+
Text to be shown in the checkbox when the __customClassOption__ is being used.
|
454
|
+
|
455
|
+
***
|
456
|
+
#### `linkValidation`
|
457
|
+
**Default:** `false`
|
458
|
+
|
459
|
+
Enables/disables check for common URL protocols on anchor links. Converts invalid url characters (ie spaces) to valid characters using `encodeURI`
|
460
|
+
|
461
|
+
***
|
462
|
+
#### `placeholderText`
|
463
|
+
**Default:** `'Paste or type a link'`
|
464
|
+
|
465
|
+
Text to be shown as placeholder of the anchor input.
|
466
|
+
|
467
|
+
***
|
468
|
+
#### `targetCheckbox`
|
469
|
+
**Default:** `false`
|
470
|
+
|
471
|
+
Enables/disables displaying a "Open in new window" checkbox, which when checked changes the `target` attribute of the created link.
|
472
|
+
|
473
|
+
***
|
474
|
+
#### `targetCheckboxText`
|
475
|
+
**Default:** `'Open in new window'`
|
476
|
+
|
477
|
+
Text to be shown in the checkbox enabled via the __targetCheckbox__ option.
|
478
|
+
|
479
|
+
## Paste Options
|
480
|
+
|
481
|
+
The paste handler is a built-in extension which attempts to filter the content when the user pastes. How the paste handler filters is configurable via specific options.
|
482
|
+
|
483
|
+
Options for paste handling are passed as an object that is a member of the outer options object. Example:
|
484
|
+
```javascript
|
485
|
+
var editor = new MediumEditor('.editable', {
|
486
|
+
paste: {
|
487
|
+
/* This example includes the default options for paste,
|
488
|
+
if nothing is passed this is what it used */
|
489
|
+
forcePlainText: true,
|
490
|
+
cleanPastedHTML: false,
|
491
|
+
cleanReplacements: [],
|
492
|
+
cleanAttrs: ['class', 'style', 'dir'],
|
493
|
+
cleanTags: ['meta']
|
494
|
+
}
|
495
|
+
});
|
496
|
+
```
|
497
|
+
|
498
|
+
|
499
|
+
***
|
500
|
+
#### `forcePlainText`
|
501
|
+
**Default:** `true`
|
502
|
+
|
503
|
+
Forces pasting as plain text.
|
504
|
+
|
505
|
+
***
|
506
|
+
#### `cleanPastedHTML`
|
507
|
+
**Default:** `false`
|
508
|
+
|
509
|
+
Cleans pasted content from different sources, like google docs etc.
|
510
|
+
|
511
|
+
***
|
512
|
+
#### `cleanReplacements`
|
513
|
+
**Default:** `[]`
|
514
|
+
|
515
|
+
Custom pairs (2 element arrays) of RegExp and replacement text to use during paste when __forcePlainText__ or __cleanPastedHTML__ are `true` OR when calling `cleanPaste(text)` helper method.
|
516
|
+
|
517
|
+
***
|
518
|
+
#### `cleanAttrs`
|
519
|
+
**Default:** `['class', 'style', 'dir']`
|
520
|
+
|
521
|
+
List of element attributes to remove during paste when __cleanPastedHTML__ is `true` or when calling `cleanPaste(text)` or `pasteHTML(html,options)` helper methods.
|
522
|
+
|
523
|
+
***
|
524
|
+
#### `cleanTags`
|
525
|
+
**Default:** `['meta']`
|
526
|
+
|
527
|
+
List of element tag names to remove during paste when __cleanPastedHTML__ is `true` or when calling `cleanPaste(text)` or `pasteHTML(html,options)` helper methods.
|
528
|
+
|
529
|
+
***
|
530
|
+
#### `unwrapTags`
|
531
|
+
**Default:** `[]`
|
532
|
+
|
533
|
+
List of element tag names to unwrap (remove the element tag but retain its child elements) during paste when __cleanPastedHTML__ is `true` or when calling `cleanPaste(text)` or `pasteHTML(html,options)` helper methods.
|
534
|
+
|
535
|
+
***
|
536
|
+
### Disabling Paste Handling
|
537
|
+
|
538
|
+
To disable MediumEditor manipulating pasted content, set the both the `forcePlainText` and `cleanPastedHTML` options to `false`:
|
539
|
+
```javascript
|
540
|
+
var editor = new MediumEditor('.editable', {
|
541
|
+
paste: {
|
542
|
+
forcePlainText: false,
|
543
|
+
cleanPastedHTML: false
|
544
|
+
}
|
545
|
+
});
|
546
|
+
```
|
547
|
+
|
548
|
+
## KeyboardCommands Options
|
549
|
+
|
550
|
+
The keyboard commands handler is a built-in extension for mapping key-combinations to actions to execute in the editor.
|
551
|
+
|
552
|
+
Options for KeyboardCommands are passed as an object that is a member of the outer options object. Example:
|
553
|
+
```javascript
|
554
|
+
var editor = new MediumEditor('.editable', {
|
555
|
+
keyboardCommands: {
|
556
|
+
/* This example includes the default options for keyboardCommands,
|
557
|
+
if nothing is passed this is what it used */
|
558
|
+
commands: [
|
559
|
+
{
|
560
|
+
command: 'bold',
|
561
|
+
key: 'b',
|
562
|
+
meta: true,
|
563
|
+
shift: false
|
564
|
+
},
|
565
|
+
{
|
566
|
+
command: 'italic',
|
567
|
+
key: 'i',
|
568
|
+
meta: true,
|
569
|
+
shift: false
|
570
|
+
},
|
571
|
+
{
|
572
|
+
command: 'underline',
|
573
|
+
key: 'u',
|
574
|
+
meta: true,
|
575
|
+
shift: false
|
576
|
+
}
|
577
|
+
],
|
578
|
+
}
|
579
|
+
});
|
580
|
+
```
|
581
|
+
|
582
|
+
|
583
|
+
***
|
584
|
+
#### `commands`
|
585
|
+
**Default:** shortcuts for `bold`, `italic`, and `underline` (See above example)
|
586
|
+
|
587
|
+
Array of objects describing each command and the combination of keys that will trigger it. Required for each object:
|
588
|
+
* _command_: argument passed to `editor.execAction()` when key-combination is used
|
589
|
+
* _key_: keyboard character that triggers this command
|
590
|
+
* _meta_: whether the ctrl/meta key has to be active or inactive
|
591
|
+
* _shift_: whether the shift key has to be active or inactive
|
592
|
+
|
593
|
+
### Disabling Keyboard Commands
|
594
|
+
|
595
|
+
To disable the keyboard commands, set the value of the `keyboardCommands` option to `false`:
|
596
|
+
```javascript
|
597
|
+
var editor = new MediumEditor('.editable', {
|
598
|
+
keyboardCommands: false
|
599
|
+
});
|
600
|
+
```
|
601
|
+
|
602
|
+
## Auto Link Options
|
603
|
+
|
604
|
+
#### `autoLink`
|
605
|
+
**Default:** `false`
|
606
|
+
|
607
|
+
The auto-link handler is a built-in extension which automatically turns URLs entered into the text field into HTML anchor tags (similar to the functionality of Markdown). This feature is OFF by default.
|
608
|
+
|
609
|
+
### Enabling Auto Link
|
610
|
+
|
611
|
+
To enable built-in auto-link support, set the value of the `autoLink` option to `true`:
|
612
|
+
|
613
|
+
```javascript
|
614
|
+
var editor = new MediumEditor('.editable', {
|
615
|
+
autoLink: true
|
616
|
+
});
|
617
|
+
```
|
618
|
+
|
619
|
+
## Image Dragging Options
|
620
|
+
|
621
|
+
#### `imageDragging`
|
622
|
+
**Default:** `true`
|
623
|
+
|
624
|
+
The image dragging handler is a built-in extension for handling dragging & dropping images into the contenteditable. This feature is ON by default.
|
625
|
+
|
626
|
+
### Disabling Image Dragging
|
627
|
+
|
628
|
+
To disable built-in image dragging, set the value of the `imageDragging` option to `false`:
|
629
|
+
```javascript
|
630
|
+
var editor = new MediumEditor('.editable', {
|
631
|
+
imageDragging: false
|
632
|
+
});
|
633
|
+
```
|
634
|
+
|
635
|
+
## Options Example:
|
636
|
+
|
637
|
+
```javascript
|
638
|
+
var editor = new MediumEditor('.editable', {
|
639
|
+
delay: 1000,
|
640
|
+
targetBlank: true,
|
641
|
+
toolbar: {
|
642
|
+
buttons: ['bold', 'italic', 'quote'],
|
643
|
+
diffLeft: 25,
|
644
|
+
diffTop: 10,
|
645
|
+
},
|
646
|
+
anchor: {
|
647
|
+
placeholderText: 'Type a link',
|
648
|
+
customClassOption: 'btn',
|
649
|
+
customClassOptionText: 'Create Button'
|
650
|
+
},
|
651
|
+
paste: {
|
652
|
+
cleanPastedHTML: true,
|
653
|
+
cleanAttrs: ['style', 'dir'],
|
654
|
+
cleanTags: ['label', 'meta']
|
655
|
+
},
|
656
|
+
anchorPreview: {
|
657
|
+
hideDelay: 300
|
658
|
+
},
|
659
|
+
placeholder: {
|
660
|
+
text: 'Click to edit'
|
661
|
+
}
|
662
|
+
});
|
663
|
+
```
|