{"id":13527388,"url":"https://github.com/MonkDev/tinyvision","last_synced_at":"2025-04-01T09:31:36.193Z","repository":{"id":11185166,"uuid":"13563747","full_name":"MonkDev/tinyvision","owner":"MonkDev","description":"A visual file selector for TinyMCE v4.","archived":false,"fork":false,"pushed_at":"2020-04-14T15:56:57.000Z","size":10245,"stargazers_count":16,"open_issues_count":1,"forks_count":5,"subscribers_count":18,"default_branch":"dev","last_synced_at":"2024-11-02T12:34:41.758Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://monkdev.github.io/tinyvision","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MonkDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-14T14:35:35.000Z","updated_at":"2021-01-18T16:36:09.000Z","dependencies_parsed_at":"2022-08-31T04:22:58.420Z","dependency_job_id":null,"html_url":"https://github.com/MonkDev/tinyvision","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MonkDev%2Ftinyvision","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MonkDev%2Ftinyvision/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MonkDev%2Ftinyvision/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MonkDev%2Ftinyvision/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MonkDev","download_url":"https://codeload.github.com/MonkDev/tinyvision/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246616126,"owners_count":20806063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:01:46.929Z","updated_at":"2025-04-01T09:31:31.716Z","avatar_url":"https://github.com/MonkDev.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"TinyVision\n==========\n\nA visual file selector for TinyMCE v4.\n\nOut of the box, selecting files in TinyMCE is a rudimentary experience. You\ncan either enter a URL into a free-form text field or select the name of a file\nfrom a drop-down list. On the other end of the spectrum, plugins like\n[MoxieManager](http://www.moxiemanager.com) provide everything and the kitchen\nsink to be your one-and-only file manager, requiring access to a file system\nand being server-side language-specific. TinyVision is different. It's\npurposely crafted to provide the best experience selecting files visually. Not\nuploading or editing, removing red eye or adding borders. Just selecting.\nTinyVision works purely with JSON, and files can be stored anywhere that's URL\naccessible. We think you'll find it delightful.\n\nDeveloped by [Monk Development](http://monkdev.com) for the\n[Ekklesia 360](http://ekklesia360.com) CMS.\n\n*   [Example](http://monkdev.github.io/tinyvision)\n*   [Release Notes](https://github.com/MonkDev/tinyvision/releases)\n\nDownload\n--------\n\nHead over to [releases](https://github.com/MonkDev/tinyvision/releases) and\ndownload a production-ready `tinyvision.zip` package. Unzip to your TinyMCE\n`plugins` directory (or wherever you store TinyMCE plugins).\n\n### Bower\n\n[Bower](http://bower.io) is a package manager for the web. Once installed, Bower\ncan install TinyVision with a single command:\n\n    bower install tinyvision\n\nUsage\n-----\n\nAfter downloading TinyVision, add it to your TinyMCE config and setup a `source`\nendpoint that returns the files to display.\n\n### TinyMCE config\n\nConfiguring TinyMCE to use TinyVision is simple: add `tinyvision` to the list of\n`plugins` (or `external_plugins` if stored outside of the TinyMCE directory) and\na `tinyvision` object with TinyVision-specific options:\n\n```javascript\ntinymce.init({\n  plugins: 'tinyvision',\n  tinyvision: {\n    source: '/path/to/your/source.php'\n  }\n});\n```\n\nSee below for the complete list of options.\n\n### `source` endpoint\n\nThe `source` option you see above points to an endpoint that TinyVision requests\nfor the list of files to display. You need to build out this endpoint to return\nJSON in the following format:\n\n```json\n[\n  {\n    \"imageUrl\": \"/assets/images/breaking_bad_thumb.png\",\n    \"name\": \"Breaking Bad\",\n    \"value\": \"/assets/images/breaking_bad.png\"\n  },\n  {\n    \"imageUrl\": \"/assets/images/the_newsroom_thumb.png\",\n    \"name\": \"The Newsroom\",\n    \"value\": \"/assets/images/the_newsroom.png\"\n  },\n  {\n    \"imageUrl\": \"http://external-cdn.com/a1b2c3/homeland_thumb.png\",\n    \"name\": \"Homeland\",\n    \"value\": \"http://external-cdn.com/a1b2c3/homeland.png\"\n  }\n]\n```\n\nAlternatively, the array of objects can be embedded in a `data` field:\n\n```json\n{\n  \"data\": [...]\n}\n```\n\nIf you do not have any control over the data returned from `source`, you can use\nthe `dataTransform` option to manipulate the data. See below.\n\nEach object represents a file and should contain three values:\n\n*   **imageUrl** is the URL to the thumbnail image that's displayed. This can be\n    any valid URL (relative, full, etc.).\n*   **name** is the text that's displayed beneath the thumbnail image. This is\n    automatically truncated to fit, but displayed in full on hover.\n*   **value** is what's placed in the input field that TinyVision is launched\n    from after a file is selected. This is usually the URL to the file, but can\n    be any arbitrary string of text.\n\nOptions\n-------\n\n*   **messages** _object_\n\n    The text of messages that are displayed. There are a number of different\n    messages that can be customized:\n\n    *   **empty** is displayed when there are no files to select. Default is\n        `Sorry, there are no selections.`.\n    *   **error** is displayed when the `source` endpoint returns an error.\n        Default is `Sorry, there was a problem loading.`.\n    *   **loading** is displayed during initial load. Default is `Loading...`.\n\n    ```javascript\n    tinymce.init({\n      tinyvision: {\n        messages: {\n          empty: 'No files to select!'\n        }\n      }\n    });\n    ```\n\n    ----------------------------------------------------------------------------\n*   **search** _boolean_\n\n    Whether to display the search field. Default is `true`.\n\n    ```javascript\n    tinymce.init({\n      tinyvision: {\n        search: false\n      }\n    });\n    ```\n\n    ----------------------------------------------------------------------------\n*   **source** _string_\n\n    The endpoint URL that's requested for the list of files to display. Two\n    query string parameters are included:\n\n    *   **type** is a TinyMCE value that identifies the type of field TinyVision\n        was launched from. Useful for limiting the type of files to display. For\n        example, the image plugin uses `image`, the link plugin uses `file`, and\n        the media/video plugin uses `media`.\n    *   **q** is the search value, which is empty when there's no search.\n\n    The response should be a JSON array of object as described in the \"Usage\"\n    section above. The array can also be embedded in a `data` field if desired.\n\n    ```javascript\n    tinymce.init({\n      tinyvision: {\n        source: '/media/tinyvision.json'\n      }\n    });\n    ```\n\n    If you do not have any control over the data returned from `source`, you can use\n    the `dataTransform` option to manipulate the data. See below.\n\n    ----------------------------------------------------------------------------\n*   **dataTransform** _function, null_\n\n    A function to transform the data received from `source` before consumption.\n    This function accepts a `data` argument which will be the data returned from\n    `source`. In certain instances where you do not have the ability to control\n    how the data coming from `source`, this function allow you to modify the\n    data before consumption.\n\n    If you are going to use this option you MUST return a JSON array or object\n    as described in the \"Usage\" section above. The array can also be embedded\n    in a `data` field if desired.\n\n    ```javascript\n    tinymce.init({\n      tinyvision: {\n        source: '/media/tinyvision.json'\n        dataTransform: function(data) {\n          /* do whatever you want with data to conform to specs above */\n\n          // make sure to return data when done\n          return data;\n        }\n      },\n\n\n    });\n    ```\n\n\n\n*   **style** _string, null_\n\n    An optional style sheet URL for custom styling. While TinyVision comes with\n    an elegant default skin (that inherits from your TinyMCE skin), it's HTML\n    markup is filled with classes to hook into for as much customization as you\n    desire. Check out `tinyvision.css` as a baseline to start from. Default is\n    `null`.\n\n    ```javascript\n    tinymce.init({\n      tinyvision: {\n        style: '/assets/stylesheets/tinyvision_custom.css'\n      }\n    });\n    ```\n\n    ----------------------------------------------------------------------------\n*   **upload** _string, function, null_\n\n    While TinyVision purposely doesn't provide upload functionality to keep\n    things simple, this gives you the ability to hook in your own when the\n    \"Upload\" button is pressed. A _string_ value is sent to\n    `editor.execCommand`, which is used by many TinyMCE plugins to perform\n    commands. A _function_ value is simply called, allowing you the flexibility\n    to do whatever's necessary to open your custom uploader. Default is `null`,\n    which hides the \"Upload\" button.\n\n    Here at Monk, we built a custom TinyMCE plugin that wraps our drag-and-drop\n    file uploader. It adds the command `monkmediauploader`, which is the value\n    we specify for this option.\n\n    ```javascript\n    tinymce.init({\n      tinyvision: {\n        upload: function () {\n          $('#uploader').show();\n        }\n      }\n    });\n    ```\n\nCommand\n-------\n\nWhile TinyVision registers itself as the default file browser through TinyMCE's\n`file_browser_callback` option, it can also be opened programmatically. This is\nparticularly useful for custom TinyMCE plugins to use TinyVision. For example:\n\n```javascript\neditor.execCommand('tinyvision', {\n  fieldId: 'imageUrl',\n  fieldValue: document.getElementById('imageUrl').value,\n  type: 'image',\n  win: myPluginWindow\n});\n```\n\nThis opens TinyVision and configures it to populate the `imageUrl` field in\n`myPluginWindow` with the selected value. There are four required config\noptions:\n\n*   **fieldId** is the ID of the field to populate with the selected value.\n*   **fieldValue** is the current value of the field when TinyVision is opened.\n*   **type** is the type of files to display. This can be any arbitrary value.\n*   **win** is the TinyMCE `Window` instance that opens TinyVision. This is\n    usually another plugin window.\n\nDevelopment\n-----------\n\nTinyVision requires [Node.js](http://nodejs.org) and [npm](https://npmjs.org)\nfor development. [Grunt](http://gruntjs.com) is used for the build system, and\n[Bower](http://bower.io) for front-end package management.\n\nInstall development dependencies using npm:\n\n    npm install\n\nTo build, run Grunt:\n\n    grunt\n\nDuring development, keep Grunt watching to automatically build on changes:\n\n    grunt watch\n\nIt's also helpful, during development, to symlink the `build` directory into\nyour project's TinyMCE `plugins` directory to see your work in real-time.\n\nFeedback\n--------\n\nPlease open an issue to request a feature, submit a bug report, or provide\nfeedback. We'd love to hear from you!\n\nContributing\n------------\n\n1.  Fork it.\n2.  Create your feature branch (`git checkout -b my-new-feature`).\n3.  Commit your changes (`git commit -am 'Added some feature'`).\n4.  Push to the branch (`git push origin my-new-feature`).\n5.  Create a new Pull Request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMonkDev%2Ftinyvision","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMonkDev%2Ftinyvision","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMonkDev%2Ftinyvision/lists"}