当前位置：文江博客话题详情

上传图片并直接插入CKEditor

发布于 2024-08-29 07:13:00 字数 359 浏览 6 评论 0原文

我想创建与 tumblr 相同的功能，用于上传图像，然后将它们直接插入到所见即所得编辑器中。

我打算使用 uploadify 上传图像，然后我不确定插入到 CKEditor 中的方法。

有没有人做过类似的事情或知道可以做到这一点的插件？理想情况下，我希望它将图像插入到文本光标最后放置的位置。

上传图片并直接插入文本区域 http://www.freeimagehosting.net/uploads/ 06217dcebb.png

提前致谢，

蒂姆

原文

分享到QQ

分享到微博

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

发布评论

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

自由如风 2024-09-05 07:13:01

CKEDITOR.instances['instanceName'].insertHtml('<img src="your image">');

CKEDITOR.instances['instanceName'].insertHtml('<img src="your image">');

回复收藏 0 原文

℡Ms空城旧梦 2024-09-05 07:13:01

正确的是：

CKEDITOR.instances['instanceName'].insertHtml('<img src="your image"/>');

Correct is:

CKEDITOR.instances['instanceName'].insertHtml('<img src="your image"/>');

回复收藏 0 原文

深爱成瘾 2024-09-05 07:13:01

我使用 dropzone 作为图像上传器。我在每个图像下方添加了一个按钮，这样当单击它时，图像就会插入到 CKEditor 中的光标位置。请看下面的例子：

myDropzone.on("addedfile", function(file) {
    // Hookup image insert button
    file.previewElement.querySelector('.insert').onclick = function() {
        var element = CKEDITOR.dom.element.createFromHtml('<img src="' + $SCRIPT_ROOT + '/api/files/' + file.id + '?filter=image"/>');
        CKEDITOR.instances.body.insertElement(element);
    };
});

I'm using dropzone as the image uploader. I've added a button below each image such that when it's clicked an image is inserted at the cursor position in CKEditor. Please see the example below:

myDropzone.on("addedfile", function(file) {
    // Hookup image insert button
    file.previewElement.querySelector('.insert').onclick = function() {
        var element = CKEDITOR.dom.element.createFromHtml('<img src="' + $SCRIPT_ROOT + '/api/files/' + file.id + '?filter=image"/>');
        CKEDITOR.instances.body.insertElement(element);
    };
});

回复收藏 0 原文