{"id":22903630,"url":"https://github.com/cassproject/cass-editor","last_synced_at":"2025-04-01T07:24:55.825Z","repository":{"id":38984607,"uuid":"106595348","full_name":"cassproject/cass-editor","owner":"cassproject","description":"View, create, edit, modify frameworks using an easy to use, embeddable iframe.","archived":false,"fork":false,"pushed_at":"2024-03-28T00:21:20.000Z","size":580303,"stargazers_count":3,"open_issues_count":92,"forks_count":11,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-13T19:04:12.563Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://cassproject.github.io/cass-editor/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cassproject.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-10-11T18:46:06.000Z","updated_at":"2024-04-15T00:33:47.196Z","dependencies_parsed_at":"2024-02-21T03:00:38.507Z","dependency_job_id":"bab87af6-5084-4f72-85a2-ec1186db5d4e","html_url":"https://github.com/cassproject/cass-editor","commit_stats":null,"previous_names":[],"tags_count":97,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cassproject%2Fcass-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cassproject%2Fcass-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cassproject%2Fcass-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cassproject%2Fcass-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cassproject","download_url":"https://codeload.github.com/cassproject/cass-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246599236,"owners_count":20803166,"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-12-14T02:38:04.323Z","updated_at":"2025-04-01T07:24:55.792Z","avatar_url":"https://github.com/cassproject.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/cassproject/cass-editor.svg?branch=master)](https://travis-ci.org/cassproject/cass-editor)\n# CASS\nCompetency and Skills Service -- Competency Framework Editor\n\nCreate, edit, modify CASS frameworks and competencies using an easy to use, embeddable iframe.\n\n# Features\n * View and edit public or permissioned competency frameworks on a CASS instance.\n * Concurrent editing - Changes are shown on multiple people's screens concurrently.\n * Import - Import frameworks of competencies from several formats.\n * Embeddable - Put the cass-editor in your website with a few lines of HTML.\n * Customizable - Change the default behavior of the cass-editor via URL parameters.\n * Inherits your style - If it can, uses the CSS from the embedding website to style the internals.\n * Open source\n\n## New in 1.3\n * User and group management - Add users/groups as owners of frameworks, granting them admin or view access.\n * Configuration management - Select the data properties, relationship types, and value types of properties to display on frameworks and competencies.\n * Crosswalk frameworks - Add alignments between competencies in two frameworks in a side-by-side view.\n\n# Try it out\nThe (unbranded) experimental new version of cass-editor is available for use at https://cassproject.github.io/cass-editor/ and is found on the master branch. References to 1.3 in this README refer to this branch.\n\nTo try the previous, stable version of the editor, check out branch 1.2.\n\n# Integration\nIntegrate the cass-editor into your website by nesting it into an iframe on your website.\n\n```html\n\u003ciframe id=\"iframe\" width=\"100%\" height=\"800\" frameborder=\"0\"\u003e\u003c/iframe\u003e\n\u003cscript\u003e\n    document.getElementsByTagName(\"iframe\")[0].setAttribute(\"src\", \"https://cassproject.github.io/cass-editor/\");\n\u003c/script\u003e\n```\n\n# CSS Inheritance\nThe cass-editor attempts to read the stylesheets of the parent page and import them into the website if they have `inherit=\"true\"` as an attribute. It may not be able to do this without your help.\n\n```\nAn error message when headers are not set:\n    ...Styles/Webfonts/Gibson/Gibson-Regular-webfont.woff2' from origin 'https://cassproject.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://cassproject.github.io' is therefore not allowed access. The response had HTTP status code 404.\n```\n\nTo remedy this, your web server needs to allow cross-origin requests to the cassproject github.io site, or you can clone this repository and host it locally.\n\n```\nAccess-Control-Allow-Origin: https://cassproject.github.io\n```\n\nFinally, to import a CSS file using a URL parameter, use `css=\u003curl\u003e`.\n\n# URL Parameters\nThe cass-editor has many modes and options that can be enabled or disabled based on desired functionality. These options are passed as URL parameters.\n\n## Setting the server\nBy default, the cass-editor operates on the dev.cassproject.org CASS instance. This should instead be your server. To do this, use `server=protocol://cass.yourserver.com`.\n\n    ex:\n    https://cassproject.github.io/cass-editor/?server=https://sandbox.cassproject.org\n    \n## View mode\nBy default, the cass-editor provides a framework browser to select and edit frameworks. To instead be restricted to only viewing frameworks, use `view=true`.\n\n    ex:\n    https://cassproject.github.io/cass-editor/?view=true\n      \n## Concept mode\nBy default, the cass-editor prior to version 1.3 edits competency frameworks. To instead edit concept schemes, use `concepts=true`. Starting in version 1.3, you can select Concepts from the menu in the sidebar to edit concept schemes. If you want to bypass the welcome page and link directly to the list of concept schemes, this parameter can be used in conjunction with `frameworksPage=true`.\n\n    ex:\n    https://cassproject.github.io/cass-editor/?concepts=true\n    \n## Select competencies in frameworks\nIf your app needs the ability to select competencies from a framework, use `select=label` where 'label' is the tag you want the select button to have. ex: Add, Select, Import. Best used with `view=true`. Clicking the select button will send a post message with the selected items to the parent application.\n\n    ex:\n    https://cassproject.github.io/cass-editor/?select=Add\n\n## Select verbose\nIf your app needs to have the entire competency or relation returned as part of the selection, or the framework that the competencies were selected from use `selectVerbose=true`.\n\n    ex:\n    https://cassproject.github.io/cass-editor/?select=Add\u0026selectVerbose=true\n    \n## Change schema for selected postMessage\nIf your app needs to receive CTDL-ASN fields in the postMessage when selecting competencies to add or link to, use `selectExport=ctdlasn`.\n\n    ex:\n    https://cassproject.github.io/cass-editor/?selectExport=ctdlasn\n\n## Select single competencies in frameworks\nIf your app needs the ability to select a single competency from a framework, use `singleSelect=label` where 'label' is the tag you want the select button to have. ex: Add, Select, Import. Best used with `view=true`.\n\n    ex:\n    https://cassproject.github.io/cass-editor/?singleSelect=Select\n\n## Select relations and competencies in frameworks\nIf your app needs the ability to select a single competency and the relations associated, use `selectRelations=true` along with `select`.\n\n    ex:\n    https://cassproject.github.io/cass-editor/?select=Add\u0026selectRelations=true\n\n## Trigger select functionality from the parent frame\nIf your app needs the ability trigger the select action from outside of the cass-editor iframe, send the iframe the postMessage `{\"message\":\"select\"}`. Additionally, if you wish to hide the select button and use one on your page instead, use `select=` without a value.\n    \n    ex:\n    https://cassproject.github.io/cass-editor/?select=\n\n## Add new framework\nBy default, the cass-editor provides a framework browser to select and edit frameworks. To start with a workflow of creating a framework, use `action=add`. This will expose the framework creation and import pages (1.2) or take you to a newly created framework (1.3).\n\n    ex:\n    https://cassproject.github.io/cass-editor/?action=add\n    \n## Import new framework\nTo jump directly to the import option of the above add menu, use `action=import`. This will expose the import page.\n\n    ex:\n    https://cassproject.github.io/cass-editor/?action=import\n    \n## Edit a specific framework\nIf you have a specific framework you are directing your users to edit or view, you can force the cass-editor to only show that framework by using `frameworkId=\u003curl identifier of framework\u003e`\n\n    ex:\n    https://cassproject.github.io/cass-editor/?frameworkId=https://dev.cassproject.org/api/data/schema.cassproject.org.0.3.Framework/e17ad428-e27e-4265-b2ec-782fe7cd81e1\n    \n## Select a specific competency (1.2 and earlier)\nIf you have a specific competency you are directing your users to edit or view, you can force the cass-editor to select that competency using `competencyId=\u003curl identifier of competency\u003e`. Must be used in conjunction with `frameworkId=\u003curl identifier of framework\u003e`\n\n    ex:\n    https://cassproject.github.io/cass-editor/?frameworkId=https://dev.cassproject.org/api/custom/data/schema.cassproject.org.0.2.Framework/76ffff33-bd15-4bf3-a007-4ce247d2216d\u0026competencyId=https://dev.cassproject.org/api/custom/data/schema.cassproject.org.0.2.Competency/onet:1.A.1.a.1\n    \n## Highlighting one or more specific competencies\nIf you wish to highlight one or more competencies, you can force the cass-editor to highlight that competency using a postMessage. It is suggested this be used in conjunction with `frameworkId=\u003curl identifier of framework\u003e`\n\n\tdocument.getElementById(\"iframe\").contentWindow.postMessage({\n\t\t\"message\": \"highlightedCompetencies\",\n\t\t\"competencies\": [\"@id of competency\", \"@id of competency\", \"@id of competency\"]\n\t}, window.location.origin);\n\t\n\tor ex:\n\thttps://cassproject.github.io/cass-editor/?frameworkId=https://sandbox.credentialengineregistry.org/resources/ce-b454a3b4-ae5f-4e41-9ce1-f4b4f1776a79\u0026highlightCompetency=https://army.mil/task/081-833-0197\u0026highlightCompetency=https://army.mil/task/081-835-3010\u0026server=https://dev.cassproject.org/api/\n\t\t\t\n## Expose URL links (1.2 and earlier)\nIf your users need the URLs for each framework or resource they are editing, you can enable link-showing by using `link=true`\n\n    ex:\n    https://cassproject.github.io/cass-editor/?frameworkId=https://dev.cassproject.org/api/data/schema.cassproject.org.0.3.Framework/fd9dbdae-6b10-46da-8256-1458b448bfab\u0026link=true\n    \n## Filtering frameworks by an additional search query.\nIf you are limiting users to seeing only a set of frameworks that can be described by a search query, you can add an additional search query to the initial framework search by using `filter=\u003csearch query\u003e`.\n\n    ex:\n    https://cassproject.github.io/cass-editor/?filter=@id:case.georgiastandards.org\n\n## Generate and manage a local user.\nCASS can create and manage a local user that owns the frameworks and competencies they create. The user credentials will be stored in HTML5 LocalStorage and unique per individual. To enable this functionality, use `user=self`.\n  \n  Note: This method is risky, as a user that clears their localstorage will lose access to their frameworks and competencies.\n  \n## Operate using a provided set of user credentials.\nCASS can operate using credentials provided by the parent site. These credentials are passed into the iframe via a message, in order to avoid transmitting them over HTTP. Use `user=wait`, and pass a RSA-OAEP 2048 bit PEM private key in via:\n\n    document.getElementById(\"iframe\").contentWindow.postMessage(\n      JSON.stringify({action:\"identity\",identity:privateKey}),\n      window.location.origin\n    );\n    \n## Provide templates for frameworks and competencies.\nThe cass-editor can be populated with templates that set initial properties of new competencies and frameworks. These templates are passed into the iframe via a message. To specify:\n\n    document.getElementById(\"iframe\").contentWindow.postMessage(\n      JSON.stringify({\n        action: \"template\",\n        competency: {\n            \"http://bogus/property\": \"woo\"\n        },\n\t    framework: {\n\t    \t\"http://bogus/property\": \"woo\"\n\t    },\n        conceptScheme: {\n            \"http://bogus/property\": \"woo\"\n        },\n        concept: {\n            \"http://bogus/property\": \"woo\"\n        }\n      }),\n      window.location.origin\n    );\n  \n## Only show frameworks that individual owns.\nAlong with user credentials, the cass-editor can be configured to not show others' frameworks. This functionality can be enabled by the URL parameters `show=mine` or `ownedByMe=true`.\n\n## Only show concept schemes that individual owns.\nWhen linking a concept to a competency, the cass-editor can be configured to not show others' concept schemes. This functionality can be enabled by the URL parameter `conceptShow=mine`.\n\n## Private frameworks and concept schemes by default.\nUsers can make a framework or concept scheme private by clicking the checkbox in the edit pane (1.2) or clicking the user management button within a framework (1.3). This checkbox can be selected by default with the URL parameter `private=true`. Note that this will not change existing frameworks and concept schemes but will apply to newly created ones.\n\n## When selecting a concept to link to, allow editing (1.2 and earlier)\nWhen linking a concept to a competency or another concept, the cass-editor can be configured to allow the user to edit concepts or concept schemes. This functionality can be enabled by the URL parameter `editIframe=true`.\n\n## Use canonical identifiers.\nCASS supports the storage of objects where the @id parameter does not refer to the object in CASS.\n\ncass-editor can be configured via the `newObjectEndpoint` to create and edit objects with `@id` URIs or objects located outside of CASS.\n\nAs an example, if `newObjectEndpoint=http://not.here/` and a new framework is created, the `@id` of the framework will be `http://not.here/\u003cgenerated UUID\u003e`.\n\nAdditionally:\n-  This disables access to versioned objects, as versions will not be exposed (though versions are being stored).\n-  This option operates across imports where canonical @ids are not defined, CSV imports, etc.\n\n## Bypass the welcome page and go directly to the frameworks list (1.3 and up)\nThe base URL for version 1.3 takes the user to a welcome page. If you wish to bypass this page and have the framework list be the first thing your users see, use the URL parameter `frameworksPage=true`. If you want to go directly to the concept scheme list, this parameter can be used in conjunction with `concepts=true`.\n\n# Alternate Schema\nThe cass-editor can orient towards either a basic CASS schema or a Credential Engine CTDL-ASN schema.\n\n-  `ceasnDataFields=true` enables and renames fields to accompany the CTDL-ASN fields. Many of these fields map to schema.org properties, but some map only to CTDL-ASN properties. In 1.3, this parameter also hides some components from view, such as configuration management and user/group management.\n\n# Disable Assertion Management\nThe cass-editor can be configured to hide the assertion management functionality if it is not needed.\n\n- `disableAssertions=true` will hide the assertion timeline, assertion sharing, and assertion creation/edititing features.\n\n# Overrides\nThe cass-editor can be overridden to assist in cross domain, iframe, and web socket connection issues.\n\n-  `editorRoot=\u003crelative or absolute path\u003e` helps any recursive iframes locate the root of the cass-editor. Examples include '/cass-editor/' or 'https://cassproject.github.io/cass-editor/'\n-  `webSocketOverride` helps the cass-editor connect to the websocket of CASS in case a reverse proxy is misbehaving when handling websockets (Looking at you, IIS.)\n\n# Events\nThe cass-editor can send events when various operations occur.\n\nTo bind the cass-editor from the parent page, use the following code:\n\n    window.addEventListener('message', iframeMessage, false);\n\n\tfunction iframeMessage(event) {\n\t\t//check the origin, to make sure it comes from a trusted source.\n\t\tif (false \u0026\u0026 event.origin !== window.location.origin)\n\t\t\treturn;\n\t\talert(\"I got \" + event.data.selected.length + \" selected items from the iframe\");\n\t}\n\nTo ensure the iframe is passing the correct origin, pass the origin into the iframe using a URL parameter, `origin=originUrl`.\n\n### On Selected (`select=Add`):\n\n    event.data.message == \"selected\"\n    event.data.selected == [uri,uri,uri]\n    or, if selectVerbose is on, event.data.selected == [{Competency},{Competency},{Competency}] and event.data.selectedFramework == {Framework}\n\n### On Clicked, On Changed, View Changes:\n\n    Changes when frameworks or competencies are clicked, changed, or the internal editor view changes are passed to the parent page. The message types are `viewChanged`, `frameworkChanged`, `frameworkClicked`, `competencyChanged`, `competencyClicked`. See the console for additional fields that are passed.\n\n### Export:\nTo export, send the iframe a message to export using a particular format.\n```javascript\n$(\"iframe\")[0].contentWindow.postMessage({action:\"export\",schema:\"ceasn\"},window.location.origin);\n```\nYou will receive in the parent page an event:\n```javascript\nmessage.data ~= {\n    action: \"response\",\n    message: \"export\",\n    schema: \"\u003cschema\u003e\",\n    format: \"\u003cformat mimetype\u003e\",\n    data: \"\u003cdata in JSON if JSON-compatible, string if not JSON compatible.\"\n}\n```\nAcceptable schemas are: \"cass\",\"cassn4\",\"cass\",\"cassrdfjson\",\"cassrdfxml\",\"cassturtle\",\"ctdlasn\",\"asn\",\"case\".\n\n### Set Data Helper:\nTo set some data in an object:\n```javascript\n$(\"iframe\")[0].contentWindow.postMessage(\n  {\n   action:\"set\", \n   id:\"https://id of the object to set\",\n   key1:value1,\n   key2:value2\n  }\n,window.location.origin);\n```\nA response event will be sent: \"setOk\",\"setFail\" after the save is attempted.\n\n# Validation\n## 1.2\nMost fields are not validated beyond the input type assigned to them. URLs, drop downs, datetimes and selectors all have inbuilt validation. The datetime format being used is ISO 8601. The user is prevented from saving invalid date. To change the behavior to warn the user if they are saving invalid data, set `allowValidationBypass=true`.\n\n## 1.3\nValidation can be accomplished through the configuration manager. Here you can set which fields are required, the type of value accepted, whether the field is limited to one value or can have multiple values, etc.\n\n# Keyboard Shortcuts\n* \u0026uarr; \u0026 \u0026darr; - Navigate up and down the list of frameworks and competencies.  \n* \u0026larr; \u0026 \u0026rarr; - Expand and contract nested competencies.  \n* Enter - Select the current element.  (1.2 and earlier)\n* Shift + Enter - Select all.  (1.2 and earlier)\n* Backspace - Go back.  (1.2 and earlier)\n* Tab - Switch focus between elements on the page.  \n* Space - Select the element currently in focus. (1.3)\n* Escape - Return to list navigation.  (1.2 and earlier)\n* Shift + X - Drag competency  \n* Shift + C - Drag and copy competency  \n* Shift + V - Drop competency  \n* Shift + U - Unlink competency  (1.2 and earlier)\n* Shift + \u0026uarr; \u0026 Shift + \u0026darr; - Move competency up and down in the list.\n* Shift + \u0026larr; \u0026 Shift + \u0026rarr; - Move competency indent and outdent in the list (1.3)\n\n# Development Environment Setup\n## Prerequisites\n\n* [git](https://git-scm.com/)\n* [Node.js](https://nodejs.org/en/download/)\n\n## Setting up\n* Clone cass-editor to local repository.\n\n* Install dependencies and submodule.\n\n```bash\ncd cass-editor\ngit submodule init\ngit submodule update\nnpm install\n```\n\n* Enable HTTPS using the ca.pem file.\nWith Windows/Chrome:\n    * Save the ca.pem file as ca.crt\n    * Import the crt file through Chrome\n        * browser settings -\u003e privacy \u0026 security -\u003e security -\u003e manage certificates -\u003e trusted root certification authorities -\u003e import\n        * Select the crt file\n\n* Create an .env.local file in the project root directory. Its contents should be:\n```\n    VUE_APP_SELECTEDSERVER=https://dev.api.cassproject.org/api/\n```\n\n* Start cass-editor.\n\n```bash\nnpm run serve\n```\n\n* Connect.\n\n    https://localhost:8080/cass-editor#/\n\n# Release Process\n* `npm install cassproject`\n* `npm audit --production` and address any dependencies with vulnerabilities\n* Increment version in package.json\n* `npm run test:unit`\n* Document code coverage output by the previous step.\n* Push to master branch on github\n\nAfter github finishes deploying to the gh-pages branch, the cass-editor pointer can be updated in the CaSS repository.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcassproject%2Fcass-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcassproject%2Fcass-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcassproject%2Fcass-editor/lists"}