如何实现富文本编辑器,在文本中的任何位置都可以上传图像


How to implement a Rich Text Editor with uploadable images anywhere inside text

我想实现一个RTE(Rich Text Editor),它能够将图像上传到文本中的任何位置。我的目标是创建一个"添加/编辑新闻文章"页面,客户可以在这里用图片写故事。

我擅长PHP和Javascript编程,所以我正在寻找关于实现这一点的方法的帮助。我是在这个RTE中创建一个自定义按钮来插入以前上传的图像还是其他方式?如何显示这些图像供用户选择?等等

奖励积分:

  • 多个文件上传:客户端只需选择与本故事相关的10张图像即可
  • 使用Flash以外的其他方法作为默认上传方法
  • 使用jQuery,因为我经常使用它
  • RTE非常轻。我不在乎客户是否必须知道一些事情(比如降价或类似的事情),我只是不喜欢臃肿的RTE
  • 使用新技术,如HTML5和/或CSS3

让我澄清几件事。我知道一些Javascript RTE,并且在几个CMS中也使用过。所以我不需要这些链接,我可以自己谷歌"javascript RTE":)。然而,像@hakre所说的有用的,因为他指出了CKEditor的可扩展性,而我并没有完全意识到这一点。

举一个我正在寻找的答案的例子:"你可以用CKEditor来做这件事,用jquery-html5-upload异步上传图像,将所有上传的图像文件名保存在Javascript数组中,在CKEditor中创建一个带有自定义点击处理程序的新按钮,它显示一个带有Fancybox的覆盖,并显示所有图像(你的文件名存储在一个数组中),用户单击图像,然后将html插入编辑器"。
类似但更好的是:)(或者我应该说准确)。

这里有符合您需求的东西吗?http://ckeditor.com/developer-features

你看过TinyMCEor CKEditor吗?

你给自己的"假答案"非常准确。您需要一个支持自定义功能的RTE编辑器。

物流将沿着以下路线进行:

  1. 用户按下按钮
  2. 一个空的div被附加到具有唯一id的输入中
  3. 将打开一个图像上传器弹出窗口,其中包含指向新div的指针
  4. jQuery/AAJX/PHP的组合将允许用户在页面中上传文件
  5. 文件名在上传过程后返回,并插入最初附加的div中

如果你正在为这些步骤中的每一个寻找特定的代码,我建议你找一些教程,因为这不是我们可以快速编写示例代码的地方。

相关文章: