{"id":18307924,"url":"https://github.com/froala/knockout-froala","last_synced_at":"2025-08-11T16:06:54.999Z","repository":{"id":1625953,"uuid":"43287754","full_name":"froala/knockout-froala","owner":"froala","description":"Knockout.js binding for Froala WYSIWYG HTML Rich Text Editor","archived":false,"fork":false,"pushed_at":"2025-07-23T12:47:11.000Z","size":147,"stargazers_count":10,"open_issues_count":7,"forks_count":18,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-23T14:40:49.969Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://froala.com/wysiwyg-editor","language":"Shell","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/froala.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-09-28T08:01:01.000Z","updated_at":"2025-07-23T12:46:12.000Z","dependencies_parsed_at":"2024-06-14T09:57:06.839Z","dependency_job_id":"3ac1590c-60b6-4e44-bda5-a09bc317ca5d","html_url":"https://github.com/froala/knockout-froala","commit_stats":{"total_commits":144,"total_committers":17,"mean_commits":8.470588235294118,"dds":0.6666666666666667,"last_synced_commit":"50046d05fc5077be2968ae9d14cd201ea78cf788"},"previous_names":["anasnakawa/knockout-froala"],"tags_count":101,"template":false,"template_full_name":null,"purl":"pkg:github/froala/knockout-froala","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fknockout-froala","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fknockout-froala/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fknockout-froala/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fknockout-froala/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/froala","download_url":"https://codeload.github.com/froala/knockout-froala/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/froala%2Fknockout-froala/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269915830,"owners_count":24495795,"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","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-05T16:05:55.389Z","updated_at":"2025-08-11T16:06:54.958Z","avatar_url":"https://github.com/froala.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Knockout Froala WYSIWYG HTML Editor (with events registration)\n\n[![npm](https://img.shields.io/npm/v/knockout-froala.svg)](https://www.npmjs.com/package/knockout-froala)\n[![npm](https://img.shields.io/npm/dm/knockout-froala.svg)](https://www.npmjs.com/package/knockout-froala)\n[![npm](https://img.shields.io/npm/l/knockout-froala.svg)](https://www.npmjs.com/package/knockout-froala)\n\n\u003eKnockout.js binding for Froala WYSIWYG HTML Rich Text Editor ( Version 2 )\n\n## Install\n\nusing Bower\n\n```bash\nbower install knockout-froala\n```\n\nusing npm\n\n```bash\nnpm install knockout-froala\n```\n\n## Usage\n\nto enable Froala binding on a textarea, you need to provide the following binding handlers\n\n* `froala`: the model observable behind the editor\n* `froalaOptions`: a plain object or an observable that will hold all the options to initalize the editor\n* `froalaInstance`: [ optional ] if provided, froala instance will be stored in this observable once initialized ( should be observable )\n* `froalaEvents`: [ optional ] if provided, specified events will be registered to the froala instance\n\n```js\nvar viewModel = {\n  comments: ko.observable(),\n  options: {\n    // disable wrapping content with paragraphs\n    // instead \u003cbr\u003e will be used\n    enter: FroalaEditor.ENTER_DIV,\n\n    // we like gray!\n    theme: 'gray',\n    toolbarButtons: [ 'bold', 'italic', 'underline' ]\n  },\n  events: {\n    'initialized': function (e, editor) {\n      console.log('INITIALIZED');\n    }\n  }\n}\n\nko.applyBindings( viewModel );\n```\n\nUsing a `\u003ctextarea\u003e`\n\n```html\n\u003ctextarea data-bind=\"value: comments, froala: comments, froalaOptions: options, froalaEvents: events\"\u003e\u003c/textarea\u003e\n```\n\nor a `\u003cdiv\u003e`\n\n```html\n\u003cdiv data-bind=\"froala: comments, froalaOptions: options, froalaEvents: events\"\u003e\u003c/div\u003e\n```\n#### You can also pass [events](https://www.froala.com/wysiwyg-editor/docs/events) \n\nInside `knockout-froala.js`-\n\n ```\n 'focus': function () {\n    // this is the editor instance.\n    console.log(this);\n  }\n  ```\n## Including All Plugins\n Use froala_editor.pkgd.legacy.min file to include all plugins\n \n## How to use with require js\nIn order to use knockout-froala with require js, you require code snippet similar to following:\n\n\n1. // Froala Editor plugins list.\n\n    var fe_plugins = ['align', 'char_counter', 'code_view', 'colors', 'draggable', 'emoticons',\n                      'entities', 'file', 'font_family', 'font_size', 'fullscreen',\n                      'image_manager', 'image', 'inline_style', 'line_breaker',\n                      'link', 'lists', 'paragraph_format', 'paragraph_style', 'quote',\n                      'save', 'table', 'url', 'video']\n    // Define paths.\n    var paths = {\n      'app': '../app',\n      'FroalaEditor': '../../../bower_components/froala-wysiwyg-editor/js/froala_editor.min',\n\n      'knockout':'../../../bower_components/knockout/dist/knockout.debug',\n      'knockout-froala':'../../../src/knockout-froala'\n    };\n    // Add Froala Editor plugins to path.\n    for (var i = 0; i \u003c fe_plugins.length; i++) {\n      paths['fe_' + fe_plugins[i]] = '../../../bower_components/froala-wysiwyg-editor/js/plugins/' + fe_plugins[i] + '.min';\n    }\n    var shim = {\n\n   \n    };\n    for (var i = 0; i \u003c fe_plugins.length; i++) {\n      shim['fe_' + fe_plugins[i]] = {\n        deps: ['FroalaEditor']\n\n      }\n    }\n    // Init RequireJS.\n    requirejs.config({\n      'baseUrl': 'js/lib',\n      'paths': paths,\n      shim: shim\n    });\n\n    // Load the main app module to start the app\n\n    \n    requirejs([\"app\"]);\n\n\nWhere:\n1.fe_plugins denote list of froala plugins.\n2.paths variable defines the path of all resources.\n3.shim variable defines dependencies among  js files.\n4.app.js  contains the logic of your app.\n\n2. Here is app.js code:\n\nrequirejs([\"knockout\"],function(ko)\n{\nwindow.ko=ko;\nrequirejs([\"FroalaEditor\"],function(FroalaEditor)\n{\n window.FroalaEditor = FroalaEditor;\nrequirejs([\"knockout-froala\"],function()\n{\n\n\nrequirejs([\"fe_image\",\"fe_char_counter\"], function() {\n\n  (function(){\n    var viewModel = {\n      html: ko.observable( '' ),\n      options: {\n        enter: FroalaEditor.ENTER_DIV,\n        theme: 'gray',\n        charCounterMax:150\n      }\n    }\n  \n    ko.applyBindings( viewModel, document.getElementById( 'app' ) );\n  })();\n   \n\n})\n})\n})\n})\n\n\nA Requirejs demo app is included in the repository. You can refer it for more details.\n \n## License\n\nThe `knockout-froala` project is under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.\n\nFroala Editor has [3 different licenses](http://froala.com/wysiwyg-editor/pricing) for commercial use.\nFor details please see [License Agreement](http://froala.com/wysiwyg-editor/terms).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fknockout-froala","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffroala%2Fknockout-froala","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffroala%2Fknockout-froala/lists"}