欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

ckeditor 支持 剪切板 剪贴板 粘贴 图像功能 有大用

http://ckeditor.com/addon/imagepaste

http://ckeditor.com/addons/clipboard 这两个可以看看

 

来自  http://ckeditor.com/features

 

100+ Powerful Features

Create captivating content with multiple features available in CKEditor thanks to its plugin-based architecture.

Advanced text formatting

From basic formatting to applying pre-defined text formats, text styles and creating mathematical formulas or beautiful code snippets.

 

Full multilingual support

Localized into more than 60 languages, CKEditor supports Right-to-Left text direction as well as assigning a specific language to a text selection.

Fully accessible

CKEditor complies with the latest web accessibility standards (WCAG 2.0, Section 508, WAI-ARIA) and enables creation of accessible content thanks to a built-in Accessibility Checker.

 

Spell Check As You Type

See and correct misspellings while typing. Misspelled words are underlined and you can simply select a suggestion to replace the incorrect word.

Widgets

Innovative CKEditor feature that enables creation of customizable rich content entities such as captioned images, code snippets or content templates by grouping multiple HTML elements together.

 

Clean code

CKEditor creates code that is clean, standards-compliant and readable. You can also include your custom formatting rules to fully control your HTML output.

Advanced Paste from Word

This feature enables pasting content directly from Microsoft Word and maintaining the original content formatting with a clean HTML output.

 

Add-on repository and Builder

Download a perfectly customized online rich text editor using the online builder and easily integrate additional add-ons from the Repository.

Ease of integration

Integrate CKEditor instantly by adding one script to your page. Choose between the ready-made zip installation package, your favorite package manager or the CDN version.

 

Rich API

Powerful and extensive API lets you interact with the editor at runtime, create custom features and manipulate content at will.

Fully customizable

Customize every single aspect of CKEditor (i.e. toolbar, skin, color palette, dialogs, context menu, data parsing, styling, etc.) and adjust it to your needs.

 

Advanced Content Filtering

Limit and adapt input data to have full control over the content that will be allowed in your editor instance.

Empowering your software so people can share their knowledge.

CKFinder - enrich CKEditor with image and file uploads.

Find out more
 

Accessibility Checker - ensure accessibility in content creation with no effort.

Find out more
CKEditor documentation page.

Haven’t found what you were looking for? 
Use the documentation and online samples to learn about the product!

 

CKEditor 4

The leading rich text editor with powerful features and exceptional reliability.

 

 



粘贴图片(Chrome) - Firefox和IE工作正常 #386
 关闭
richardsonvix 打开了这个问题 on 19 Feb 2015 ·20条评论

注释


@richardsonvix

可以直接从剪贴板粘贴图像?

在最糟糕的情况下,从Word(argh!)粘贴。

谢谢。

 
@CylonSK
 

CylonSK 评论道 on 21 Feb 2015

可能不是,因为它必须首先被上传到某个地方

 
@brunoais
 
合作者

brunoais 评论 on 21 Feb 2015

这不是SCE的工作。这是上传代码的工作。
有些编辑包括这样的东西,但SCE并不认为这是最好的。它阻止它成为一个膨胀。

 

 brunoais 添加了 Question 标签 on 21 Feb 2015

@richardsonvix

我做了一些进一步的测试...

在Firefox和IE中,您可以粘贴一个图像,它将嵌入到HTML转换为一个字符串的base64中的IMG标签中。

在Chrome中,它不起作用 有一些类型的锁,在我粘贴图片没有任何事情发生。

但是我通过拦截“粘贴”并进行相同的映像转换为base64来解决这个问题。

 
@brunoais
 
合作者

brunoais 评论 on 24 Feb 2015

这是浏览器的实现。没有理由阻止它:)。

 
@richardsonvix

是的,我也是这样想的,如果它在浏览器中工作。

不是SCEditor的错,我在所有所见即所得的编辑中看到同样的问题。
特点是IE和FF粘贴图像,但不能在Chrome中。

我将从Internet Explorer和Firefox中总结一下,当我从剪贴板中粘贴一个图像时,它将生成一个带有base64编码的嵌入图像(例如:<img src =“data:image / png; base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAIAAABnsVYUAAAgAElEQVR4nOydeVxO6f // z / fz + fxmo + y7GWNpQSmULUv ...),Chrome没有任何反应。

我们要去一个着名的编辑http://ckeditor.com/demo,尝试捕获屏幕(打印屏幕或其他),然后将图像粘贴到Chrome中,将无法正常工作,现在尝试在Firefox中工作,尝试使用Internet资源管理器,也工作。;)
www.sceditor.com上执行相同操作,看到相同的行为。

正如我采用SCEditor一样,我将如前所述整合一个解决方案。我甚至可以修改它来上传粘贴的图像,然后将IMG标签与服务器上图像的URL进行嵌入,但这不是其他浏览器的默认行为。

如果您搜索一下,您会发现Chrome中存在图像粘贴问题。

 

 richardsonvix 更改标题从 粘贴图像从剪贴板粘贴图像从剪贴板(Chrome) - Firefox和IE工作正常on 25 Feb 2015

@samclarke
 
所有者

samclarke 评论 on 25 Feb 2015

可以通过剪贴板API使Chrome的行为方式相同:http : //jsfiddle.net/6yocdszm/

我正在计划改进粘贴支持,所以当我这样做时,我可以规范这个行为。作为允许通过粘贴上传图像的方法可能是有用的。

 
@richardsonvix

很好的帖子,萨姆。

谢谢。

 
@brunoais
 
合作者

brunoais 评论 on 25 Feb 2015

@samclarke看起来不错,那么。我迫不及待地看到它工作。

另一个说明 是否可以尝试检查当前的开发人员的错误?我认为是释放另一个稳定版本的时间。
我不确定,但我觉得目前的开发版本是稳定的,被认为是稳定的,但我认为应该做一些额外的测试来确保这一点。

 
@samclarke
 
所有者

samclarke 评论 on 25 Feb 2015

@brunoais是的,我正在测试它。

 
@richardsonvix

我在Chrome,Firefox和IE上测试,并且工作正常。

 

 samclarke 将其添加到了 v1.5.0的 里程碑 on 28 Feb 2015

@odungern

如果您允许我们参与讨论:

将图像从剪贴板粘贴到HTML是一个非常好的想法,但在我们的例子中,我们不会允许,除非是非常小的图标。

我们计划通过模态对话框提供一个新的动作,让用户从磁盘中选择一个图像(或任何其他)文件,将其上传并插入<a href=".."><object src=".." >title</object></a>SCEditor区域。甚至更好的提供一些拖放像在GitHub和其他应用程序,但一个接着一个;-)。

现在我们可以看到,对于这种方法,SCEditor没有任何改变。

 
@odungern

我刚刚看到#391 ...这是我们设想的一样的方法...我们只会使用该选项来上传文件。

 
@brunoais
 
合作者

brunoais 评论 on 9 May 2015

我仍然认为文件上传不是编辑的工作。在最坏的情况下,它可以是一个插件。
但是,如果人们对于sam建议的代码感到满意,我接受它。

 
@odungern

布鲁诺,我绝对同意你的看法:我们会把这个文件与其他一些图书馆一起上传(我们正在使用jQuery-File-Upload来上传包含项目数据模型的模板),其他的也可以选择别的东西。

 
@samclarke
 
所有者

samclarke 评论 on 9 May 2015

@odungern的计划是添加一个粘贴事件,这将标准化所有浏览器(最嵌入图像)的粘贴行为,然后可以过滤粘贴的数据。剥离图像,剥离任何格式化等

拖放插件的计划是提取任何粘贴的图像,并创建一个带有图像数据的事件。它也会对丢失到编辑器上的文件执行相同的操作。事件处理程序就是上传或丢弃它们。

@brunoais它不会上传文件,只是提供一个事件,表示有人粘贴某些东西并规范化行为。即使是计划的拖放插件,只会创建一个事件,表示一个文件已被粘贴/删除,实际上它不会执行任何上传操作,而不需要服务器端代码。

 
@dandv
 

丹德夫 评论道 on 1 Jun 2015 • 编辑

无论是否编辑工作,实际上大多数编辑者都是从剪贴板处理粘贴图像。

此外,Summernote包括HTML中编码的图像,因此开发人员不必处理上传/存储。

 
@brunoais
 
合作者

brunoais 评论 on 1 Jun 2015

@samclarke听起来对我好 它不应该需要很多代码,所以我完全可以。
@dandv只是因为他们这样做,这并不意味着所有的都应该做。IMO,最终是膨胀的。这也是我不喜欢使用CKE的一个主要原因。太厉害了。

 
@odungern

我同意@brunoais - 图片上传不是编辑的责任。编辑器是视图的一部分,上传者是控制器的一部分(以MVC术语),因此不要混合。
@samclarke原始提案只是规范化事件听起来最适合我。由于服务器不同,不同的项目可能会对上传过程有不同的需求。编码示例也许可以帮助开发人员实现一个功能齐全的解决方案,包括图像上传和文本插入。

 
@odungern

顺便说一下,html部分将图像插入到文本中必须易于适应。一些项目可能喜欢使用图像标签和其他对象标签; 有些人必须添加一个css类来影响渲染,这是我们的情况。
我们很高兴与PNG,JPG,SVG和PDF的跨浏览器渲染分享我们的调查结果。花了我们几天的时间...

 
@brunoais
 
合作者

brunoais 评论 on 1 Jun 2015

不仅如此,有些甚至可能需要它作为BBCode,而其他人不希望任何上传,但文本(不允许任何非人类可读的)

 

 samclarke 修改了里程碑:v1.5.0v1.6.0 on 13 Oct 2016

 samclarke 关闭了这个a4f7163 on 15 Nov 2016

 

@Spuds Spuds 向引用此问题的Spuds / SCEditor添加了一个提交 on 7 Dec 2016

 @SpudsImprove paste filtering. 

来自 https://github.com/samclarke/SCEditor/issues/386

普通分类: