-
Notifications
You must be signed in to change notification settings - Fork 6
/
data.json
115 lines (115 loc) · 27.8 KB
/
data.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
{
"/simply-edit/": {
"meta title": "Simply edit the web - by ylebre",
"meta description": {
"content": "Simply-edit demo site!!"
},
"project-name": "Simply edit the web!!",
"project-tagline": "Use the key 'demo' to try out Simply edit.",
"link": {
"innerHTML": "Edit me!",
"href": "#simply-edit",
"class": "btn"
},
"main-content": "<h3>\n<a id=\"welcome-to-github-pages\" class=\"anchor\" href=\"#welcome-to-github-pages\" aria-hidden=\"true\"></a><span class=\"octicon octicon-link\"></span>Simply edit GitHub Pages</h3>\n\n<p>This page was automatically generated using GitHub Pages and modified to add support for Simply edit. This editor uses the markup provided in the HTML to merge the page with the data, clientside. In this example, the page data is also stored in GitHub.</p>\n\n\n<h3>Not just Markdown</h3>\n\n<p>While Markdown is fine for most uses, this editor allows you to fully leverage the power of HTML. By using <template> instructions within the HTML, the editor can insert any HTML structure you want. Modifications on the page are quick and simple, leaving you in control. Take a peek at the <a href=\"integration.html\">quick integration guide</a> for more information, or check out the <a href=\"/sublime/\">Sublime template</a> or the <a href=\"http://ylebre.github.io/spectral/\">Spectral template</a>.</p>\n\n\n<h3>Plays well with others</h3>\n\n<p>This editor was designed with an expanding web in mind. The toolbars in the pages are context-aware and are easily added to the editor to add specific options for specific HTML structures. The basic version supports the most commonly used HTML elements (text, images, hyperlinks), but more toolbars are available. Each editor context uses CSS-like selectors to decide which toolbar is best suited. Read more about <a href=\"adding-toolbars.html\">adding toolbars</a> and <a href=\"adding-field-types.html\">adding editable field types</a>.</p>\n\n\n<h3>CMS Integrations</h3>\n\n<p>We are looking for developers that want to help us integrate Simply edit into various platforms. We have integrated the editor in <a href=\"http://www.ariadne-cms.org/\">Ariadne</a>, our own web application platform, but the world of the web is a much larger place. Since the editor is now totally decoupled from Ariadne, we want to share it with as many users as possible. Read more about <a href=\"cms-integration.html\">CMS integration</a>.</p>\n\n\n<h3>\n<a id=\"support-or-contact\" class=\"anchor\" href=\"#support-or-contact\" aria-hidden=\"true\"></a><span class=\"octicon octicon-link\"></span>Support or Contact</h3>\n\n<p>Having trouble with the editor? Have an idea for a 'must have' plugin? Drop me a line here on GitHub. </p>\n\n\n \n <span class=\"site-footer-owner\"><a href=\"https://github.com/ylebre/simply-edit\">Simply-edit</a> is maintained by <a href=\"https://github.com/ylebre\">ylebre</a>.</span>\n\n <span class=\"site-footer-credits\">This page was generated by <a href=\"https://pages.github.com\">GitHub Pages</a> using the <a href=\"https://github.com/jasonlong/cayman-theme\">Cayman theme</a> by <a href=\"https://twitter.com/jasonlong\">Jason Long</a>.</span>\n ",
"menu": []
},
"/simply-edit/integration.html": {
"meta title": "Quick integration guide",
"meta description": {
"content": "Quick integration guide for Simply edit"
},
"project-name": "Quick integration guide",
"project-tagline": "How to deploy Simply edit on your site",
"link": {
"innerHTML": "Edit me!",
"href": "#simply-edit",
"class": "btn"
},
"main-content": "<h3>How to deploy the editor on your site</h3>\n\n<p>Here is a quick integration guide to add Simply edit to your own website. You will need some experience with HTML for this, although we tried really hard to make this as simple as possible.</p>\n<p>Lets say you have a heading in your page. The HTML will look something like this:</p>\n<p><code><h1>This is my title</h1></code></p>\n<p>We need to give the editor a hint that this should be editable, and what the contents are, like so: </p>\n<p><code><h1 data-simply-field=\"title\">This is my title</h1></code></p>\n<p>Repeat this for all the elements you want to make editable.</p>\n<p>Include the editor javascript just before the </body> tag:</p>\n<p><code><script src=\"http://se-cdn.muze.nl/simply-edit.js\" data-api-key=\"github\"></script></code></p>\n<p>Repeating elements and templates</p>\n<p>In most HTML templates you will encounter repeating elements, for instance a menu or a list of blog posts. There elements all share the same HTML structure. For example:</p>\n<p><code><ul class=\"posts\"><br> <li class=\"post\"><br> <h3>The title of the post</h3><br> <p>This is the description</p><br> </li><br></ul><br></code></p><p>We want to tell the editor that we have a lists of posts, and that each post within the list should have the same HTML structure. Each list item has an editable title and description:</p><p><code><ul class=\"posts\" data-simply-list=\"posts\"><br> <template data-simply-template=\"Post\"><br> <li class=\"post\"><br> <h3 data-simply-field=\"title\">The title of the post</h3><br> <p data-simply-field=\"description\">This is the description</p><br> </li><br> </template><br></ul></code></p><p>Simply edit vocabulary</p><p>\n\n</p><p><code>data-simply-field=name</code></p><p> This is editable.</p><p><code>data-simply-path=/simply-edit/</code></p><p> Store the data within a specific path. This allows you to have fields that have the same contents across pages. </p><p><code>data-simply-type=text</code></p><p> Applies to fields. This field contains plain text (no HTML). </p><p><code>data-simply-list=name</code></p><p> This is a list, data for the list entries will be stored as 'name' </p><p><code>data-simply-template=name</code></p><p> Applies on <template> tags, used to provide a list with an HTML template for list entries</p><p><code>data-simply-sortable</code></p><p> Applies to lists, makes it sortable</p><p><code>data-simply-selectable</code></p><p> Tells the editor that this element is selectable as a unit\ndata-simply-list-item Tells the editor that this element is an entry in a list</p><p><code>data-simply-hidden</code></p><p>Tells the editor that this element should be hidden with display:none when in editmode. Use to remove pesky hovering elements that go over editable text.</p>"
},
"/simply-edit/adding-toolbars.html": {
"meta title": "Simply-edit demosite by ylebre",
"meta description": {
"content": "Simply-edit demo site"
},
"project-name": "Extending the editor",
"project-tagline": "How to add custom toolbars to the editor ",
"link": {
"innerHTML": "Edit me!",
"href": "#simply-edit",
"class": "btn"
},
"main-content": " <h1>Extending Simply edit</h1>\n<p>\nWith the speed the web is evolving, it is neigh impossible to keep up with the development pace. With this in mind Simply edit was designed so that its parts are easily replaced and new functions are easily added.\n\nSimply edit decides what toolbar to show based on a context - this is basicly what the user has selected on the screen. The editor finds out what context it is in using context filters, which are usually configured along with the rest of a toolbar.\n</p>\n\n<p>\nContext filters are a lot like CSS selectors, except they are bottom up. The deeper the context is found, the more weight it carries.\n</p>\n\n<h3>\nHere is an example of a context filter:\n<br>\n\n\n<code>editor.addContextFilter(<br>\n\n \"simply-hyperlink\", {<br>\n\n\t \"selector\" : \"A\",<br>\n\n\t \"parent\" : {\n\t\t\t\"selector\" : \"*\"\n\t},<br>\n\n\n\t \"context\" : \"simply-text-selection<br>\n\n\n\n});\n\n</code></h3>\n<p>\nThis filter applies for any hyperlink (A tag), with any parent selector. So when a user clicks on any hyperlink in the page, the context 'simply-text-selection' is selected and that toolbar is shown.\n\nHere is a full example of a toolbar, including the javascript to add it to the editor.\n</p>\n<p><code>\n<section id=\"simply-text-cursor\" class=\"simply-section\">\n<br>\n\n\t <div class=\"simply-toolbar\">\n<br>\n\n\t\t <ul class=\"simply-buttons\">\n<br>\n\n\t\t\t <li><button data-simply-section=\"simply-text-style\" class=\"simply-expands\"><br>\n <i class=\"fa fa-magic\"></i>Style</button></li>\n<br>\n\n\t\t\t <li><button data-simply-section=\"simply-text-align\" class=\"simply-expands\"><br>\n <i class=\"fa fa-align-left\"></i>Align</button></li><br>\n\n\n\t\t </ul><br>\n\n\n\t\t <div class=\"simply-toolbar-section simply-text-style\"><br>\n\n\n\t\t\t <ul>\n<br>\n\n\t\t\t\t <li class=\"simply-text-bold\"><button data-simply-action=\"simply-text-bold\"><br>\n <i class=\"fa fa-bold\"></i>Bold</button></li>\n<br>\n\n\t\t\t </ul>\n<br>\n\n\n\t\t </div>\n<br>\n\n\n\t </div>\n<br>\n\n\n</section>\n\n</code>\n </p>\n\n<p>\n\n<code><script><br> editor.addToolbar({<br> \"name\" : \"simply-text-cursor\",<br> \"filter\" : {\n\t\t\t\"sel-collapsed\" : true\n\t},\n<br> update : updateTextToolbar,\n<br> init : function(toolbar) {\n\t}<br> });\n\n<br><script></code></p>\n<h3>\n\nHere is a breakdown of what is happening:\n<br>\n\n\n<br>\n<code><section id=\"simply-text-cursor\" class=\"simply-section\">\n</code></h3>\n<p>\nThe name of this toolbar is 'simply-text-cursor';\n</p>\n\n<p>\n<code><div class=\"simply-toolbar\">\n</code><br>\nWhere the toolbar buttons go\n<br>\n\t\n<br>\n<code><ul class=\"simply-buttons\">\n</code><br>\nDisplay a horizontal list of buttons\n</p>\n\n<p>\n<code><li><button data-simply-section=\"simply-text-style\" class=\"simply-expands\"><br>\n <i class=\"fa fa-magic\"></i>Style</button></li></code>\n</p>\n<p>\nShow a button with a magic wand icon, with the text 'style'. This button gets the class 'simply expand' (which adds a little arrow on the bottom of the button). The attribute 'data-simply-section' points to which toolbar section is shown when this button is expanded.\n<br>\n\t\t\t\n<br>\n<code><div class=\"simply-toolbar-section simply-text-style\">\n</code><br>\nAdd a toolbar section (which expands when the corresponding button is activated); This section gets the class 'simply-text-style', corresponding to the data-simply-section on the button that expands it.\n\t\t\n</p>\n<p>\n<code><ul>\n</code><br>\nDisplay a list of buttons\n\n</p>\n<p>\n<code><li class=\"simply-text-bold\"><button data-simply-action=\"simply-text-bold\"><br>\n <i class=\"fa fa-bold\"></i>Bold</button></li>\n</code><br>\nShow a button with a 'bold' icon and the text 'style'. When the button is clicked, invoke the editor action 'simply-text-bold';\n<br>\n\t\t\t\t\n<br>\n<code>editor.addToolbar({\n</code><br>\n\t// Add a toolbar for the context 'simply-text-cursor' (required)\n<br>\n\t <code> \"name\" : \"simply-text-cursor\",\n</code><br>\n\t\t\n\t// Show this toolbar when the selection is collapsed; (required)\n<br>\n\t <code> \"filter\" : {\n\t\t\t\"sel-collapsed\" : true\n\t},</code>\n<br>\n\t\t\n\t// Each time the toolbar is shown, run this function. Add code to update button states and such here. (optional)\n<br>\n\t <code> update : function(toolbar) {\n\t},\n</code><br>\n\n\t// When the toolbar is first loaded, run this code to initialize everyhing. (optional)\n<br>\n\t <code> init : function(toolbar) {\n\t},\n</code><br>\n\t\t\n\t// Add these actions to the editor. Note that these actions are globally available, so you can override specific actions in the editor this way. (optional)\n<br>\n\t <code> actions : {\n\t\t'simply-text-bold' : function(button) { }\n</code><br>\n\t\t\t// Run the code to make the current selection bold;\n<br>\n\t\t\t\t\t\n<code>});</code>\n \n </p><span class=\"site-footer-owner\"><a href=\"https://github.com/ylebre/simply-edit\">Simply-edit</a> is maintained by <a href=\"https://github.com/ylebre\">ylebre</a>.</span>\n\n <span class=\"site-footer-credits\">This <a href=\"nonexistant.html\">page </a>was generated by <a href=\"https://pages.github.com\">GitHub Pages</a> using the <a href=\"https://github.com/jasonlong/cayman-theme\">Cayman theme</a> by <a href=\"https://twitter.com/jasonlong\">Jason Long</a>.</span>\n \n\n "
},
"/simply-edit/page-template.html": {
"meta title": "Simply-edit demosite by ylebre",
"meta description": {
"content": "Simply-edit demo site"
},
"project-name": "Simply-edit",
"project-tagline": "Testsite for editor",
"link": {
"innerHTML": "Edit me!",
"href": "#simply-edit",
"class": "btn"
},
"main-content": "\n \t<h3>Template page!</h3><div>And a <a href=\"testing.html\">link</a>!</div>\n \n <span class=\"site-footer-owner\"><a href=\"testing.html\">Simply-edit</a> is maintained by <a href=\"https://github.com/ylebre\">ylebre</a>.</span>\n\n <span class=\"site-footer-credits\">This page was generated by <a href=\"https://pages.github.com\">GitHub Pages</a> using the <a href=\"https://github.com/jasonlong/cayman-theme\">Cayman theme</a> by <a href=\"https://twitter.com/jasonlong\">Jason Long</a>.</span>\n \n\n "
},
"/simply-edit/testing.html": {
"meta title": "Simply-edit demosite by ylebre",
"meta description": {
"content": "Simply-edit demo site"
},
"project-name": "Simply-edit",
"project-tagline": "Testsite for editor",
"link": {
"innerHTML": "Edit me!",
"href": "#simply-edit",
"class": "btn"
},
"main-content": "\n \t<h3>Template page!</h3>\n \n <span class=\"site-footer-owner\"><a href=\"https://github.com/ylebre/simply-edit\">Simply-edit</a> is maintained by <a href=\"https://github.com/ylebre\">ylebre</a>.</span>\n\n <span class=\"site-footer-credits\">This page was generated by <a href=\"https://pages.github.com\">GitHub Pages</a> using the <a href=\"https://github.com/jasonlong/cayman-theme\">Cayman theme</a> by <a href=\"https://twitter.com/jasonlong\">Jason Long</a>.</span>\n \n\n "
},
"/simply-edit/cms-integrations.html": {
"meta title": "Simply edit the web - by ylebre",
"meta description": {
"content": "Simply-edit demo site!!"
},
"project-name": "Simply-edit",
"project-tagline": "Testsite for editor",
"link": {
"innerHTML": "Edit me!",
"href": "#simply-edit",
"class": "btn"
},
"main-content": "\n <h3>\n<a id=\"welcome-to-github-pages\" class=\"anchor\" href=\"#welcome-to-github-pages\" aria-hidden=\"true\"></a><span class=\"octicon octicon-link\"></span>Welcome to GitHub Pages.</h3>\n\n<p>This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here <a href=\"https://guides.github.com/features/mastering-markdown/\">using GitHub Flavored Markdown</a>, select a template crafted by a designer, and publish. After your page is generated, you can check out the new <code>gh-pages</code> branch locally. If you\u2019re using GitHub Desktop, simply sync your repository and you\u2019ll see the new branch.</p>\n\n<h3>\n<a id=\"designer-templates\" class=\"anchor\" href=\"#designer-templates\" aria-hidden=\"true\"></a><span class=\"octicon octicon-link\"></span>Designer Templates</h3>\n\n<p>We\u2019ve crafted some handsome templates for you to use. Go ahead and click 'Continue to layouts' to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved.</p>\n\n<h3>\n<a id=\"creating-pages-manually\" class=\"anchor\" href=\"#creating-pages-manually\" aria-hidden=\"true\"></a><span class=\"octicon octicon-link\"></span>Creating pages manually</h3>\n\n<p>If you prefer to not use the automatic generator, push a branch named <code>gh-pages</code> to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.</p>\n\n<h3>\n<a id=\"authors-and-contributors\" class=\"anchor\" href=\"#authors-and-contributors\" aria-hidden=\"true\"></a><span class=\"octicon octicon-link\"></span>Authors and Contributors</h3>\n\n<p>You can <a href=\"https://github.com/blog/821\" class=\"user-mention\">@mention</a> a GitHub username to generate a link to their profile. The resulting <code><a></code> element will link to the contributor\u2019s GitHub Profile. For example: In 2007, Chris Wanstrath (<a href=\"https://github.com/defunkt\" class=\"user-mention\">@defunkt</a>), PJ Hyett (<a href=\"https://github.com/pjhyett\" class=\"user-mention\">@pjhyett</a>), and Tom Preston-Werner (<a href=\"https://github.com/mojombo\" class=\"user-mention\">@mojombo</a>) founded GitHub.</p>\n\n<h3>\n<a id=\"support-or-contact\" class=\"anchor\" href=\"#support-or-contact\" aria-hidden=\"true\"></a><span class=\"octicon octicon-link\"></span>Support or Contact</h3>\n\n<p>Having trouble with Pages? Check out our <a href=\"https://help.github.com/pages\">documentation</a> or <a href=\"https://github.com/contact\">contact support</a> and we\u2019ll help you sort it out.</p>\n\n \n <span class=\"site-footer-owner\"><a href=\"https://github.com/ylebre/simply-edit\">Simply-edit</a> is maintained by <a href=\"https://github.com/ylebre\">ylebre</a>.</span>\n\n <span class=\"site-footer-credits\">This page was generated by <a href=\"https://pages.github.com\">GitHub Pages</a> using the <a href=\"https://github.com/jasonlong/cayman-theme\">Cayman theme</a> by <a href=\"https://twitter.com/jasonlong\">Jason Long</a>.</span>\n \n\n "
},
"/simply-edit/cms-integration.html": {
"meta title": "Simply-edit demosite by ylebre",
"meta description": {
"content": "Simply-edit demo site"
},
"project-name": "CMS integration",
"project-tagline": "Adding a custom storage layer to Simply Edit",
"link": {
"innerHTML": "Edit me!",
"href": "#simply-edit",
"class": "btn"
},
"main-content": "<h3>Adding a custom storage layer</h3><div>Simply Edit allows you to add your own storage layer. This layer is responsible for storing and retrieving the JSON data blob, as well as listing files and images for the browse dialogs.\n</div><p>To add a custom storage layer, create a storage object before loading simply-edit.js. Pass the variable name of the object to Simply Edit with the attribute <code>data-simply-storage</code>:</p><div><code><script src=\"http://se-cdn.muze.nl/simply-edit.js\" <br>data-api-key=\"github\" <br>data-simply-storage=\"mycustomStorage\"></code></div><p>Here is a skeleton for the storage layer so you can roll your own:<br></p>\n<p><code>var myCustomStorage = {<br> init : function(endpoint) {\n<br> /**\n<br> Initialization for the storage layer\n<br> endpoint: (string) URL location for the backend endpoint.\n<br> */\n<br> \n<br> /* Do things to initialize your storage layer. */\n<br> \n<br> /*Save the endpoint for later use. */\n<br> this.endpoint = endpoint;\n<br> },\n<br> save : function(data, callback) {\n<br> /**\n<br> Saves data in the backend\n<br> data: (string) contains the new JSON blob with site data.\n<br> callback: (function) the function to call after the save is done.\n<br> */\n<br> },\n<br> load : function(callback) {\n<br> /**\n<br> Load data from the backend.\n<br> callback: (function) the function to call after the data is loaded. The JSON blob with site data will be passed as its only argument.\n<br> */\n<br> },\n<br> connect : function() {\n<br> /**\n<br> This function is called before editmode is started and before a save operation is called.\n<br> Add checks to validate the credentials here.\n<br> */\n<br> },\n<br> disconnect : function() {\n<br> /**\n<br> Disconnect from the backend storage, remove credentials.\n<br> */\n<br> },\n<br> list : function(url, callback) {\n<br> /**\n<br> List files, folders and images for the given endpoint URL;\n<br> \n<br> This function is called with 'endpoint/data.json' to populate the sitemap dialog.\n<br> I suggest adding special handling for JSON blob file to return the contents of the blob.\n<br> \n<br> This function is used by the sitemap, image browse and file browse dialogs.\n<br> \n<br> url: (string) url to list the images from.\n<br> callback: (function) callback function to call with the list.\n<br> \n<br> Example list:\n<br> {\n<br> folders : [\n<br> {\n<br> url : \"http://endpoint.com/folder1/\",\n<br> name : \"Folder 1\"\n<br> },\n<br> {\n<br> url : \"http://endpoint.com/folder2/\",\n<br> name : \"Folder 1\"\n<br> }\n<br> ],\n<br> files : [\n<br> {url : \"http://endpoint.com/myfile.txt\"},\n<br> {url : \"http://endpoint.com/myfile2.txt\"},\n<br> {url : \"http://endpoint.com/myfile3.txt\"},\n<br> {url : \"http://endpoint.com/image1.png\"},\n<br> {url : \"http://endpoint.com/image2.png\"}\n<br> ],\n<br> images : [\n<br> {url : \"http://endpoint.com/image1.png\"},\n<br> {url : \"http://endpoint.com/image2.png\"}\n<br> ]\n<br> }\n<br> */\n<br> },\n<br> \n<br> /**\n<br> Optional functions, only add these if you need them.\n<br> */\n<br> checkJail : function(url) {\n<br> /**\n<br> Check if the given URL is part of our site.\n<br> This function is used when navigating to a page that is not in our data blob (yet).\n<br> \n<br> Returns true if the url should be stored in the data blob.\n<br> Returns false otherwise.\n<br> */\n<br> },\n<br> saveTemplate : function(template, callback) {\n<br> /**\n<br> Copy a page template file to the current URL location, used for adding new pages.\n<br> template: (string) name of the chosen template file to copy;\n<br> callback (function) callback function to call after the copy has been made.\n<br> */\n<br> }\n<br>};<br></code></p><div><br></div>"
},
"/simply-edit/adding-field-types.html": {
"meta title": "Simply edit the web - by ylebre",
"meta description": {
"content": "Simply-edit demo site!!"
},
"project-name": "Adding field types",
"project-tagline": "Customizing Simply edit",
"link": {
"innerHTML": "Edit me!",
"href": "#simply-edit",
"class": "btn"
},
"main-content": " <h1>Simply edit fields</h1>\n<p>Simply edit comes with a couple of field types that is recognizes by default. A field definition consists of three things to make it cooperate with Simply edit:\n</p><p><code>get(field)</code>: retrieve the data from the field. This function should return the data that you need to populate the field with its data.\n</p><p><code>set(field, data)</code>: populate the field with this data. The 'data' should contain the data that the 'get' function delivered.\n</p><p><code>makeEditable(field)</code>: an extra function that does whatever it needs to do to make a field editable for Simply Edit.</p><p>The default types in simply edit are:<br>a, img, i.fa, meta, title, iframe</p><p>For all other fields, Simply Edit will assume that the field is a simple HTML field. These fields have a getter and setter that return the innerHTML of the field, and the makeEditable attaches a Hope editor instance to the field.\n</p><p>\n</p><h2>Adding custom field types\n</h2><h2></h2><p>For this example, we are going to save the latitude, longitude and zoom attributse for a google-map HTML element. Support for this HTML element was added using Polymer.<br></p><p>\n</p><p>Here is a quick example of how to add your own field definition to Simply Edit:\n</p><p><code>var allowedAttributes = [\"latitude\", \"longitude\", \"zoom\"];</code><br><code>var googleMapGetter = function(field) {</code><br><code> var attr;</code><br><code> var attributes = {};</code><br><code> for (attr in allowedAttributes) {</code><br><code> attr = allowedAttributes[attr];</code><br><code> if (field[attr]) {</code><br><code> attributes[attr] = field[attr];</code><br><code> }</code><br><code> }</code><br><code> return attributes;<br></code><code>};</code></p><p><code>var googleMapSetter = function(field, data) {</code><br><code> var attr;</code><br><code> for (attr in data) {</code><br><code> if (allowedAttributes.indexOf(attr) !== -1) {</code><br><code> field.setAttribute(attr, data[attr]);</code><br><code> }</code></p><p><code> }</code><br><code>};<br></code><br><code>var googleMapEditable = function(field) {<br> field.setAttribute(\"data-simply-selectable\", true);<br>};</code></p><p>\n</p><p><code>editor.field.registerType(<br> \"google-map\",<br> googleMapGetter,<br> googleMapSetter,<br> googleMapEditable<br>);</code><br><br><strong>Note</strong>: registering types for Simply Edit should be done independantly of any toolbars for this type - this is because the toolbars are not loaded when the page is not in editmode, but the setter to populate the fields is needed to display the data correctly outside of editmode.</p><p> \u200b<br></p><span class=\"site-footer-owner\"><a href=\"https://github.com/ylebre/simply-edit\">Simply-edit</a> is maintained by <a href=\"https://github.com/ylebre\">ylebre</a>.</span>\n\n <span class=\"site-footer-credits\">This <a href=\"nonexistant.html\">page </a>was generated by <a href=\"https://pages.github.com\">GitHub Pages</a> using the <a href=\"https://github.com/jasonlong/cayman-theme\">Cayman theme</a> by <a href=\"https://twitter.com/jasonlong\">Jason Long</a>.</span>\n \n\n "
}
}