javascript-寻找一种方法来呈现网页上文字周围的轮廓

据我所知这是不可能的.

我想围绕在网页上浮动图片周围流动的文本绘制轮廓.任何CSS或Javascript技巧都可以帮助解决这个问题,我们将不胜感激.

可怕的模型:http://i.stack.imgur.com/Wf7BW.png

.

编辑:

此指向Aloha Editor的演示的链接将使您对大纲的目的有所了解:http://www.aloha-editor.org/demos/wordpress-demo/

为什么?

在我正在使用的CMS中,用户可以在网站前端的contentEditable div中编辑信息.在上述情况下,在整个div周围有轮廓会给用户造成混乱,因为他们无法编辑该黑色块.

目前,我一直在添加一个类来围绕可编辑的内容创建轮廓.起初效果很好,但是一旦我对格式有了一点创意(例如,div底部没有空白,内容包裹在带有大纲的div中),事情就开始变得笨拙和丑陋.如果有某种方法可以将div的文本用适当间隔的轮廓包裹起来,而我可以在网站上一致地应用它,那将使事情变得容易得多.另外,我对上面概述的内容结构陷入僵局.

除了向用户传达可以在页面上编辑哪些文本的大纲之外,我还欢迎其他想法.我正在尝试在内部< p>上设置背景颜色contentEditables中的元素,但是看起来不像具有轮廓.

解决方法:

好吧…使用Javascript可以完成所有事情!
就我而言,我有一种使用jQuery的疯狂解决方案.它适用于您的模型,并进行了一些调整,可以在不同情况下工作,只需对其进行调整即可.

这个想法是使用jQuery在图像周围插入边框并隐藏不需要的边框.宽度,高度和位置是根据图像尺寸动态计算的.

享受:http://jsfiddle.net/E64w3/

上一篇:javascript-在contenteditable中插入自定义标签


下一篇:iOS用contenteditable滚动时,光标不会刷新定位的处理方法