防止复制/粘贴将网页样式复制到富文本编辑器

发布于 2024-09-08 16:20:24 字数 1162 浏览 9 评论 0 原文

我已经尝试了两天了几个 JavaScript 轻量级富文本编辑器(rte),例如 nicEditmooEditableMooRTE(最后两个被考虑是因为它们使用了我在这个项目中使用的 mootools 框架)。

我的问题是,对于所有这些,当我从网页复制预先格式化的文本(粗体单词、链接等...)然后将其粘贴到编辑器中时,它看起来已经格式化了。

这可能很好,但这是一个安全问题,因为如果我复制/粘贴整个网页,它将在编辑器中呈现整个网页。

我只是希望我的用户能够使用编辑器进行一些基本的格式化,例如将一些文本设置为粗体、斜体、添加链接并缩进其段落。

另一种选择可能是 showdown (我敢打赌,stackoverflow 使用的是它),因为这种类型的编辑器(带有预览框)不会遇到上述问题(当您在文本区域中粘贴某些内容时,它是未格式化的文本)。 但是,我不确定这是否适合我的情况,因为编辑器将用于撰写长文章(比大多数 stackoverflow 帖子长得多)。在这种情况下,我认为最好有一个合适的编辑器来立即渲染内容(我的意思是在文本区域中,而不是在预览框中)。在我看来,真正的所见即所得编辑器更有吸引力且易于使用。

有没有一种简单的方法来修改 RTE,以便当我粘贴一些文本时它会呈现为未格式化? 或者你认为我应该使用 stackoverflow 使用的那种解决方案? (showdown 或类似)或者您知道没有我所提到的复制粘贴问题的 RTE提及?

请注意,我没有尝试 CKeditor、FCKEditor 和 TinyMCE,因为它们太复杂(重),而 YUI 中的看起来不错,但需要整个库才能工作。

谢谢,

模糊特恩

I'm trying for two days now several JavaScript lightweight Rich Text Editors (rte) such as nicEdit, mooEditable, MooRTE (the two last ones were considered because they use the mootools framework which I'm using for this project).

My problem is that with all of them, when I copy a pre-formated text from a web page (with words in bold, links etc...) and then paste it into the editor, it appears already formated.

This could be nice but that's a security problem because if I copy/paste a whole web page it will render the whole web page in the editor.

I just want my users to be able to do some basic formatting with the editor such as putting some text in bold, italic, add a link and indent their paragraphs.

An alternative could be showdown (which - I would bet - is used by stackoverflow), because this type of editors (with a preview box) don't suffer from the aforementioned issue (when you paste something in the textarea, it is unformatted text).
However, I'm not sure this would be appropriated to my case because the editor would be used to write long articles (much longer than most of the stackoverflow posts). In that case I think it would be better to have a proper editor that renders things instantly (I mean right in the textarea, not in a preview box). And a real WYSIWYG editor is more enticing and easy to use, in my opinion.

Is there a easy way to modify a RTE so that when I paste some text it is rendered unformatted?
Or do you think I should use the sort of solution that stackoverflow uses? (showdown or similar) Or do you know a RTE that doesn't have the copy-paste issue that I mentioned?

Note that I didn't try CKeditor, FCKEditor and TinyMCE because they are far too complex(heavy) and the one from YUI looks good but needs the whole library to work.

Thanks,

FuzzyTern

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

悸初 2024-09-15 16:20:24

您正在从富文本源复制并粘贴到富文本目标中。默认情况下,您将在目标中获得富文本。解决此问题的唯一方法是以某种方式捕获粘贴事件,将粘贴操作重定向到纯文本字段,然后将纯文本字段中的未格式化文本复制到富文本目标中。

  1. 使用 onPaste 处理程序捕获
    粘贴事件(不适用于
    Firefox 或 Opera)
  2. 使用隐藏字段粘贴
    选定的文本进入。
  3. 插入隐藏字段的值
    进入富裕的目的地
    光标位置。

不知道利润从哪里来,但就这样吧。

You are copying from a rich text source and pasting into a rich text destination. By default you will get rich text in the destination. The only way around this is to capture the paste event somehow, redirect the paste operation into a plain text field, then copy the unformatted text out of the plain text field into your rich text destination.

  1. Use the onPaste handler to capture
    paste events (doesn't work in
    Firefox or Opera)
  2. Use a hidden field to paste the
    selected text into.
  3. Insert the value of the hidden field
    into the rich destination at the
    cursor location.

Not sure where the profit comes from, but there you go.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文