提问者:小点点

使用javascript和php动态地在段落之间放置图像


我想建立一个内容管理系统,但我不能够找到逻辑,如何插入和检索内容与一些图像插入段落。 我发现一些库给textarea提供了额外的功能,比如在段落之间添加图像,但我不知道应该如何将它们保存到数据库中,以及如何检索段落之间带有图像的内容。

话虽如此,我知道如何分别保存图像和文字。 有想法的人可以帮助理解它是如何做到的。


共1个答案

匿名用户

这个概念可能解决了您试图实现的目标的一个方面:

您可以将任何图像转换为base64并将其嵌入到HTML中。 您还可以使用style属性将内联css嵌入到html中,并将该图像浮动到段落的左侧或右侧。 下面是一个例子:

null

<img style="float:right;" src="data:image/jpeg;base64,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">
<p>This paragraph is wrapping around an image (shown right) that is embedded into the html via base64. You can convert any image to base64 online.
<p>This could all be save into a database, and when rendered by a web browser, it would look about like how you see it here.</p>
<p>Good Luck!</p>