时间戳

首页 > 解决方案 > 如何在文本区域字段中显示图像代替用户输入 URL？

javascript - 如何在文本区域字段中显示图像代替用户输入 URL？

问题描述

使用 NodeJS、Express 和 MongoDB，我有一个文本区域供用户向博客添加文本。

我想要的是用户能够将图像 URL 放入文本区域并提交他的帖子，应用程序将显示一个图像来代替该 URL。我怎样才能做到这一点 ？

我试图简单地在其中添加一个 URL，但它不起作用。我还尝试向某些文本添加强标签，但没有得到应用。由于我将是唯一能够发帖的用户，因此我也希望拥有该功能。

这是创建新帖子的 HTML 部分：

<div class="field">
     <label>Contenu</label>
     <textarea name="body"></textarea>
</div>

显示帖子（我只显示身体部分）：

<div class="description">
     <p><%=blog.body%></p>
</div>

如果您想查看我的帖子的 CREATE 路线（确实有效）：

router.post('/blogs',middleware.isLoggedIn,function(req,res){
        var titre = req.body.title;
        var image = req.body.image;
        var body = req.body.body;
        var author = {
            id : req.user._id,
            username : req.user.username
        }
        var newBlog ={title:titre ,image:image, body:body, author:author};
        Blog.create(newBlog, function(err,newBlog){
            if(err){
                console.log(err);
                res.render('blog/new');
            }
            else
            {
                console.log(newBlog);
                res.redirect('/blogs');
            }
        });
});

我想要的是当我在文本区域中使用“强”之类的标签时，将用户输入（只有我用于帖子）转换为 URL 输入或字体样式的图像。

标签： javascripthtmlcssnode.js

解决方案

您不能直接在 textarea 控件中显示图像。

您可以获得的关闭是在其上覆盖图像，但它不会成为文本区域中信息的一部分。也就是说，文本不会在它周围流动，并且在发布表单时它不会包含在 textarea 的数据中。

也许可写的 div （内容可编辑）更适合您的目的。html

但是您可以使用 contenteditable 属性指定元素的内容是否可编辑。

注意：当元素上没有设置 contenteditable 属性时，该元素将从其父元素继承它。

<div contentEditable="true"> type here
    <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" />
</div>

但请阅读此链接：为什么 ContentEditable 很糟糕

推荐阅读