{"id":14969857,"url":"https://github.com/igorkasyanchuk/new_ckeditor","last_synced_at":"2025-04-10T03:51:27.348Z","repository":{"id":45773591,"uuid":"240594526","full_name":"igorkasyanchuk/new_ckeditor","owner":"igorkasyanchuk","description":"Ruby on Rails + CKEditor 5","archived":false,"fork":false,"pushed_at":"2024-09-23T16:13:27.000Z","size":3617,"stargazers_count":35,"open_issues_count":9,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-03T08:22:42.570Z","etag":null,"topics":["ckeditor","ckeditor5","rails","ruby","ruby-on-rails","wysiwyg"],"latest_commit_sha":null,"homepage":"https://www.railsjazz.com/","language":"Ruby","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/igorkasyanchuk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"MIT-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},"funding":{"patreon":"igorkasyanchuk"}},"created_at":"2020-02-14T20:38:12.000Z","updated_at":"2024-09-24T13:18:52.000Z","dependencies_parsed_at":"2024-12-02T02:02:10.426Z","dependency_job_id":null,"html_url":"https://github.com/igorkasyanchuk/new_ckeditor","commit_stats":{"total_commits":24,"total_committers":1,"mean_commits":24.0,"dds":0.0,"last_synced_commit":"53a6af6914a11c7224bfebf3c3132a5d4c2a890e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorkasyanchuk%2Fnew_ckeditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorkasyanchuk%2Fnew_ckeditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorkasyanchuk%2Fnew_ckeditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/igorkasyanchuk%2Fnew_ckeditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/igorkasyanchuk","download_url":"https://codeload.github.com/igorkasyanchuk/new_ckeditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694879,"owners_count":20980733,"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":["ckeditor","ckeditor5","rails","ruby","ruby-on-rails","wysiwyg"],"created_at":"2024-09-24T13:42:30.646Z","updated_at":"2025-04-10T03:51:27.306Z","avatar_url":"https://github.com/igorkasyanchuk.png","language":"Ruby","funding_links":["https://patreon.com/igorkasyanchuk","https://www.patreon.com/igorkasyanchuk"],"categories":["Ruby"],"sub_categories":[],"readme":"# Rails + CKEditor 5\n\n[![RailsJazz](https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/my_other.svg?raw=true)](https://www.railsjazz.com)\n[![https://www.patreon.com/igorkasyanchuk](https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/patron.svg?raw=true)](https://www.patreon.com/igorkasyanchuk)\n[![Listed on OpenSource-Heroes.com](https://opensource-heroes.com/badge-v1.svg)](https://opensource-heroes.com/r/igorkasyanchuk/new_ckeditor)\n\nDEMO is available inside dummy app inside gem source code.\n\nSimple way to integrate Ruby on Rails application with CKEditor 5. This is the latest version of CKEditor which has more modern UI and cool toolbars. Main features:\n\n- Inline editor\n- Balloon editor\n- Classic editor\n- File uploads (custom controller \u0026 uploader)\n- Tables, Media, and other toolbar buttons\n- (requires maybe 10-15 minutes to configure gem, but works fine, better to clone and check source of demo)\n\n![Demo](/docs/new_ckeditor.png)\n[\u003e\u003e Demo site](https://new-ckeditor-demo.herokuapp.com/)\n\n## Usage\n\n```\n1. Add gem\n2. bundle\n3. rails g new_ckeditor # to generate toolbars \u0026 configs\n4. add js in application.js, or to the assets pipeline\n5. in your form\n  # to load CKEditor JS\n  = javascript_include_tag 'new_ckeditor/classic/ckeditor', 'data-turbolinks-track': 'reload'\n  \n  # form control\n  = f.ckeditor :description\n```\n\n### Inline/Balloon\n\nFor inline/balloon editor you need to define a saver function, example is: [app.js](https://github.com/igorkasyanchuk/new_ckeditor_demo/blob/master/app/assets/javascripts/app.js)\n\n```erb\n  \u003cp\u003e\n    \u003c%= ckeditor_tag :content, @post.content, editor: { template: :balloon, type: :balloon, js: \"sendData('#{update_inline_post_path(@post)}', editorHiddenField.value)\" } %\u003e\n  \u003c/p\u003e\n```\n\nOptions:\n\n- teamplte - file with configuration for CKEditor, toolbar, path to upload files, etc\n- type - type of editor, depending on the type behavior is a little different. Balloon and inline editors works almost the same way. Classic works better as form field. \n  \n### File uploads\n\nDefine logic for saving file (controller/uploader).\n\nSample: https://github.com/igorkasyanchuk/new_ckeditor_demo/blob/master/app/controllers/posts_controller.rb#L10-L23\n\nYou need also to configure your CKEditor editor config, sample: https://github.com/igorkasyanchuk/new_ckeditor_demo/blob/master/app/views/new_ckeditor/shared/_inline.html.erb#L50-L54\n\nYou need to define path to which send file and also CSRF token for security purposes. You can see how it works in example above.\n\n## Installation\n\nAdd this line to your application's Gemfile and run `bundle`:\n\n```ruby\ngem 'new_ckeditor'\n```\n\n## Configuration\n\n## File Upload with CKEditor 5\n\nGem doesn't have any strict dependency on any library. It's implemented this way on purpose to let developer use gem which he wants. Maybe in the future we can improve it.\n\nBut you can get a base skeleton where you can put your own logic.\n\nBelow I'll put an example of code which works with CKEditor.\n\n1. Let's start with new controller `rails g controller file_uploads upload`\n\n```ruby\nclass FileUploadsController \u003c ApplicationController\n  # note\n  # that method must return json with URL to an uploaded image\n  # or error message\n  def upload\n    image = CkEditorImage.new(file: params[\"upload\"])\n    if image.save\n      render json: {\n        url: image.file.url\n      }\n    else\n      render json: {\n        \"error\": {\n          \"message\": image.errors.full_messages.join(\", \")\n        }\n      }\n    end\n  end\nend\n```\n\n2. Create a new model where images will be stored: `rails g model CkEditorImage file:string user_id:integer parent_id:integer parent_type:string`\n\n```ruby\nclass CkEditorImage \u003c ApplicationRecord\n  mount_uploader :file, CkEditorImageUploader\n  belongs_to :user, optional: true\n  validates_presence_of :file\nend\n```\n\nCode of migration may look like:\n\n```ruby\nclass CreateCkEditorImages \u003c ActiveRecord::Migration[6.0]\n  def change\n    create_table :ck_editor_images do |t|\n      t.string :file\n      t.integer :user_id, index: true\n      t.integer :parent_id\n      t.string :parent_type\n\n      t.datetime :created_at\n      t.datetime :updated_at\n    end\n    add_index :ck_editor_images, :user_id\n    add_index :ck_editor_images, [:parent_id, :parent_type]\n  end\nend\n```\nRun this migration.\n\n3. Create Carrierwave uploader `rails g uploader CkEditorImage`. Open and edit it if needed.\n\n4. Open again controller, edit logic, check user, check params, etc. You have a full control how to implement logic of storing files.\n\n## CKEditor 5 Toolbar Customization\n\nYou can edit in appropriate JS file, for example:\n\n```javascript\n    toolbar: {\n      items: [\n        'heading',\n        '|',\n        'bold',\n        'italic',\n        'underline',\n        'strikethrough',\n        'link',\n        'bulletedList',\n        'numberedList',\n        'alignment',\n        '|',\n        'indent',\n        ...\n```\n\nYou can create a copy of each `classic`, `balloon`', `inline` .js file and use. Or even creae custom build on `ckeditor.com` site and put in your app.\n\nAfter that you can specify which exactly editor type and template with toolbar configuration to use:\n\n```erb\n\u003c%= form.ckeditor :description, editor: { template: :inline, type: :inline } %\u003e\n```\n\n## Output\n\n### Output RAW HTML from CKEditor\n\nTo use same CSS as in editor, to keep consistent UI:\n\nRequire CSS file in `application.css`:\n\n```css\n *= require new_ckeditor/ckeditor.css\n```\n\nAnd in the view wrap output in `.ck-content` class:\n\n```erb\n\u003cp\u003e\n  \u003cstrong\u003eAbout:\u003c/strong\u003e\n  \u003cdiv class=\"ck-content\"\u003e\n    \u003c%= raw @user.about %\u003e\n  \u003c/div\u003e\n\u003c/p\u003e\n```\n\nMore documentation: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html\n\n## Styling\n\n### CKEditor 5 set min-height, height, width\n\n```css\n.ck-editor__editable {\n  min-height: 500px;\n}\n```\n\nYou can editor in some parent div and set height explicitly for editor inside.\n\n## TODO\n\n- configuration to specify toolbar\n- generators?\n- better and better readme\n- gif with demo\n- tests\n- check how it works with turbolinks?\n- fix issue fix JS map files\n- easier configuration\n- saver function to save inline/balloon editor\n\n## Customization\n\nhttps://ckeditor.com/ckeditor-5/online-builder/\n\n## Contributing\nContribution directions go here.\n\n## License\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n\n[\u003cimg src=\"https://github.com/igorkasyanchuk/rails_time_travel/blob/main/docs/more_gems.png?raw=true\"\n/\u003e](https://www.railsjazz.com/?utm_source=github\u0026utm_medium=bottom\u0026utm_campaign=new_ckeditor)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figorkasyanchuk%2Fnew_ckeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Figorkasyanchuk%2Fnew_ckeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figorkasyanchuk%2Fnew_ckeditor/lists"}