{"id":19372538,"url":"https://github.com/sproutcore/rich-text-editor","last_synced_at":"2025-10-08T14:03:00.657Z","repository":{"id":17613101,"uuid":"20417179","full_name":"sproutcore/rich-text-editor","owner":"sproutcore","description":"A rich text editor for SproutCore.","archived":false,"fork":false,"pushed_at":"2020-06-03T08:19:15.000Z","size":834,"stargazers_count":6,"open_issues_count":18,"forks_count":6,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-03-25T23:06:47.605Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sproutcore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.js","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-02T19:49:22.000Z","updated_at":"2024-03-25T23:06:47.606Z","dependencies_parsed_at":"2022-09-03T00:22:35.078Z","dependency_job_id":null,"html_url":"https://github.com/sproutcore/rich-text-editor","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sproutcore%2Frich-text-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sproutcore%2Frich-text-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sproutcore%2Frich-text-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sproutcore%2Frich-text-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sproutcore","download_url":"https://codeload.github.com/sproutcore/rich-text-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223929345,"owners_count":17226874,"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-11-10T08:23:52.297Z","updated_at":"2025-10-08T14:02:55.624Z","avatar_url":"https://github.com/sproutcore.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Note: The DOM structure of SC.WYSIWYGEditorView has changed. If you need to retain the view's previous version for a legacy project, you can check out the v0.9 tag (`git checkout v0.9`).\n\n# SproutCore Rich Text Editor\n\nA basic WYSIWYG editor for SproutCore.\n\n![ScreenShot](https://raw.github.com/sproutcore/rich-text-editor/master/screen-shot.png)\n\n## Features\n\n- Basic WYSIWYG editing (bold, italic, underline, ul, ol, alignment, indenting, linking, block formating)\n- Basic image inserting\n- Basic video (youtube/vimeo) embeding\n- Compatible with the SC view layer (unlike all other editors)\n- Undo/Redo Support\n- Move image inside the editor by drag'n'drop\n- Extensible\n\n## Basic Usage\nYou can add the SproutCore WYSIWYG to your existing views the same as you would any control:\n\n\tMYApp.MyView = SC.View.extend({\n\t\tchildViews: ['editor'],\n\t\t\n\t\teditor: SC.WYSIWYGView.extend({\n\t\t\tvalueBinding: 'MyApp.myController.content'\n\t\t})\n\t})\n\n## Specifying Commands \nTo specify which commands you would like to be available inside the toolbar, simply add them to the commands list.\n\n\tMYApp.MyView = SC.View.extend({\n\t\tchildViews: ['editor'],\n\t\t\n\t\teditor: SC.WYSIWYGView.extend({\n\t\t\tcommands: [ 'link', 'bold', 'italic', 'underline'],\n\t\t\tvalueBinding: 'MyApp.myController.content'\n\t\t})\n\t})\n\n## Add Commands\nTo create a custom command, create an object which mixes in SC.WYSIWYGCommand and add it to the command factory.\n\n\tMyApp.MyCommand = SC.Object.extend(SC.WYSIWYGCommand, {\n\t\tcommandName: 'myMagicCommand',\n\t\texecute: function(source, editor) {\n\t\t\t// do some stuff\n\t\t}\n\t});\n\tSC.WYSIWYGCommandFactory.registerCommand(MyApp.MyCommand);\n\nOnce it is registered with the command factory, you can simply add it to the command list in the WYSIWYGView.\n\n\tMYApp.MyView = SC.View.extend({\n\t\tchildViews: ['editor'],\n\t\t\n\t\teditor: SC.WYSIWYGView.extend({\n\t\t\tcommands: [ 'link', 'bold', 'italic', 'underline', 'myMagicCommand'],\n\t\t\tvalueBinding: 'MyApp.myController.content'\n\t\t})\n\t})\n\n## Editor API\n\nTo determine if a command has been executed against the current selection use the following command (detailed: https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html):\n\n\tqueryCommandState: function(command)\n\nTo determine the command value (if available) of the current selection:\n\n\tqueryCommandValue: function(command)\n\nTo execute and arbitrary command against the editor:\n\n\texecCommand: function(commandName, showDefaultUI, value)\n\nTo insert arbitrary html at the current location:\n\n\tinsertHtmlAtCaret: function(html)\n\t\n\n## TODOs\n\n- Add some tests boy howdy\n- refine the video embed command\n- refine the image embed command\n- full screen support ?\n- image / file uploading (probably with the sproutcore-fileupload framework)\n- clean up the way the styles are enumerated / displayed (kindof brittle with the css + js views)\n\n## Thanks to LearnDot \u0026 Joe Gaudet\n\nSpecial thanks to LearnDot's Joe Gaudet for incepting, developing and open-sourcing this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsproutcore%2Frich-text-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsproutcore%2Frich-text-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsproutcore%2Frich-text-editor/lists"}