a-ono / redmine_ckeditor

Redmine plugin for integration CKEditor
304 stars 140 forks source link

Image direct pasting feature #216

Open tigergm opened 8 years ago

tigergm commented 8 years ago

Please consider the feature of direct paste for image from clipboard. Thanks. Great plugin.

ulrichmueller commented 7 years ago

Hello.

First of all, thank you very much for providing the software for GPL free. I appreciate that very much. Thx.

I'm running redmine 3.3 and also would like to have direct copy from clipboard. The problem: It works in the editor (I can copy an image from clipboard, can save it, edit the text field again with the image present), but it's not shown on the rendered text. 'img' and 'src' are included in ckeditor.yml

Is it possible at all? Is it an issue with core redmine or with the plugin or with other plugins? Maybe redmine has a tag filter for img with base64 encodes images. The img tag and the 'alt' attribute is present but not 'src' attribute.

Environment: Redmine version 3.3.0.stable.15732 Ruby version 2.3.1-p112 (2016-04-26) [x86_64-linux-gnu] Rails version 4.2.6 Environment production Database adapter Mysql2 SCM: Subversion 1.9.3 Mercurial 3.7.3 Git 2.7.4 Filesystem
Redmine plugins: mega_calendar 1.3.8 redmine_ckeditor 1.1.4 redmine_ics_export 3.0.1.dev redmine_ldap_sync 2.0.8.devel redmine_people 1.2.0 redmine_workflow_hidden_fields 0.3.0

Thx

rompic commented 7 years ago

See https://github.com/a-ono/redmine_ckeditor/issues/196#issuecomment-239682908 ?

tigergm commented 7 years ago

Hello, ulrichmueller. It is not easy to paste directly in the editor in rm on account of the image which can't be upload to the image server. Your image pasted is only shown on the web client instead of the server. But there must be solutions for it such as the ckeditor's plugins and ckfinder which is commercial unfortunately. I know the redmine_ckeditor uses the rich_fille gem which need a lot of effort to fulfil the image-direct-past.

archonwang commented 7 years ago

+1

I tried to use ckeditor plugin to implement the feature... but not successful. Anyone could tried how to config it?

the plugin is upload image, it contains paste the image from clipboard with ckeditor in 4.5.X or higher version. http://ckeditor.com/addon/uploadimage

Thanks.

gabriel-cardoso commented 7 years ago

Hi @archonwang,

I'm almost there: I needed to add a few other plugin to have uploadimage working: uploadwidget, widget, notificationaggregator, lineutils, widgetselection, filetools.

I updated CKeditor to 4.7.0 following these instructions https://github.com/a-ono/redmine_ckeditor#upgrading-ckeditor-for-development

The problem now is that I need to configure uploadUrl. We can set this variable in a ckeditor.yml placed in REDMINE_ROOT/config.

I tried /uploads and /rich/files but I get errors in both cases.

Completed 422 Unprocessable Entity in the first case and ActionView::Template::Error (undefined methodsignin_path'inlib/redmine/menu_manager.rb:192`

I also see a Can't verify CSRF token authenticity in both cases.

If anyone can help !

pulsarinformatique commented 6 years ago

Hi

Nobody has the solution ?

I just tried to install the uploadimage ckeditor plugin in the plugins\redmi‌​ne_ckeditor\assets\c‌​keditor-contrib\plug‌​ins folder but it breaks ckeditor (all icons gone)

Moreover I uste Redmine 3.4.3 and ckeditor redmine plugin 1.1.5.

Thanks

cyril

romziki commented 6 years ago

Any updates? Has anyone got their hands on a solution?

cg200776 commented 5 years ago

mark i wanne too

Henry586 commented 4 years ago

The plugin uploadimage need server side program to work, CKFinder is provided for such purpose.

I found that @xiaoli provide Ruby solution at project: https://github.com/xiaoli/redmine_ckeditor And it works very well.

I just upgrade it to CKEditor 4.13.1 and upload to my repo: https://github.com/Henry586/redmine_ckeditor

Now list key parts of image upload: 1) the well know ckeditor plugin uploadimage; http://ckeditor.com/addon/uploadimage 2) server side ruby; https://github.com/xiaoli/redmine_ckeditor/blob/master/app/controllers/ckeditor_controller.rb
3) ckeditor config.js like below: config.uploadUrl = '/ckeditor/upload'; refer: https://github.com/Henry586/redmine_ckeditor/blob/master/assets/ckeditor/config.js

All in all, you can get my Repo and run it immediately!

And please also note that ONLY one image should be pasted once a time in Chrome. Multiple image paste are supported by Firefox.

The default content length is 64KB, so you can only save small image file with Base64 format, but no limitation if image is uploaded to server.

alexaandrov commented 4 years ago

There is a solution to this problem! 🚀 Base64 will solve the problem.

Add to file /plugins/redmine_ckeditor/init.rb:

Loofah::HTML5::WhiteList::ALLOWED_PROTOCOLS.replace RedmineCkeditor.allowed_protocols
Loofah::HTML5::WhiteList::ALLOWED_PROTOCOLS.add('data')

This is necessary to display images with a base64 data type.

Then add https://ckeditor.com/cke4/addon/pastebase64 to /plugins/redmine_ckeditor/assets/ckeditor-contrib with all plugin dependencies and restart redmine.

It works flawlessly! 🤩

gainskills commented 4 years ago

https://ckeditor.com/cke4/addon/pastebase64

Works perfectly!

tazus commented 4 years ago

I used pastebase64 it work great!! However, I got a problem that the function only shown in Wiki's editor but not issue/task editing area. Anyone know what's wrong?
I used 3.49 with ckeditor plugin for Redminehttp://github.com/a-ono/redmine_ckeditor | Akihiro Ono | 1.1.7。 And followed, https://www.redmine.org/boards/2/topics/58357 to install pastebase64,base64image to ckeditor plugins.

my redmine/plugins/redmine_ckeditor/assets/ckeditor/config.js is

CKEDITOR.editorConfig = function( config ) {

    config.extraPlugins = 'pastebase64,base64image';

};

and plugins/redmine_ckeditor/init.rb as:

require 'redmine' require 'redmine_ckeditor'

Rails.application.config.to_prepare do RedmineCkeditor.apply_patch end

Redmine::Plugin.register :redmine_ckeditor do name 'Redmine CKEditor plugin' author 'Akihiro Ono' description 'This is a CKEditor plugin for Redmine' version '1.1.7' requires_redmine :version_or_higher => '3.0.0' url 'http://github.com/a-ono/redmine_ckeditor'

settings(:partial => 'settings/ckeditor')

wiki_format_provider 'CKEditor', RedmineCkeditor::WikiFormatting::Formatter, RedmineCkeditor::WikiFormatting::Helper end

Loofah::HTML5::WhiteList::ALLOWED_PROTOCOLS.replace RedmineCkeditor.allowed_protocols Loofah::HTML5::WhiteList::ALLOWED_PROTOCOLS.add('data')

adrianobr commented 3 years ago

Do you need add the plugins: 'pastebase64' and 'base64image' In config.js add: config.extraPlugins = 'pastebase64'; config.extraPlugins = 'base64image';

And init.rb add: (Loofah::VERSION >= "2.3.0" ? Loofah::HTML5::SafeList : Loofah::HTML5::WhiteList)::ALLOWED_PROTOCOLS.add('data')

Working perfect!

smap9 commented 3 years ago

@Henry586 I updated from a-onos version to your one. I'm getting this error:

> rake redmine:plugins:migrate RAILS_ENV=production
rake aborted!
NoMethodError: undefined method `alias_method_chain' for Redmine::Export::PDF::ITCPDF:Class
Did you mean?  alias_method
redmine/plugins/redmine_ckeditor/lib/redmine_ckeditor/pdf_patch.rb:7:in `block in included'
redmine/plugins/redmine_ckeditor/lib/redmine_ckeditor/pdf_patch.rb:6:in `class_eval'
redmine/plugins/redmine_ckeditor/lib/redmine_ckeditor/pdf_patch.rb:6:in `included'
redmine/plugins/redmine_ckeditor/lib/redmine_ckeditor/pdf_patch.rb:60:in `include'
redmine/plugins/redmine_ckeditor/lib/redmine_ckeditor/pdf_patch.rb:60:in `<module:RedmineCkeditor>'
redmine/plugins/redmine_ckeditor/lib/redmine_ckeditor/pdf_patch.rb:3:in `<top (required)>'

Some useful infos:

Environment:
  Redmine version                4.1.1.stable.19939
  Ruby version                   2.5.1-p57 (2018-03-29) [x86_64-linux-gnu]
  Rails version                  5.2.4.2
  Environment                    production
  Database adapter               Mysql2
  Mailer queue                   ActiveJob::QueueAdapters::AsyncAdapter
  Mailer delivery                smtp
SCM:
  Subversion                     1.9.7
  Git                            2.17.1
  Filesystem                     
Redmine plugins:
  redmine_agile                  1.5.4
  redmine_ckeditor               1.2.3
  redmine_per_project_formatting 0.1.0
AllTaken commented 3 years ago

Pasting images directly works @ my end - simply by adding data protocol to the allowed protocols in the config file, without additional plugins or anything: REDMINE_ROOT/config/ckeditor.yml

this is after copying the config sample as per the instructions in the readme: cp plugins/redmine_ckeditor/config/ckeditor.yml.example config/ckeditor.yml

Then simply add data to allowed protocols:

allowedProtocols:
  - data
  - afs
  - aim
  - callto

@a-ono Maybe this could be added to the readme?