【问题标题】:Get summernote and Lightbox working together让 Summernote 和 Lightbox 协同工作
【发布时间】:2016-06-25 17:41:11
【问题描述】:
我正在尝试写一篇关于 Django 的博客,这是我在 Django 中的第一次体验。我想要将 Summernote 和 Lightbox 结合起来,让它们以下列方式协同工作:
• 点击插入图片:
Summernote panel
summernote 在 Lightbox 中插入图片。它的工作方式类似于Lightbox home page 中的示例。
我应该修改什么以及如何修改?
提前致谢!
【问题讨论】:
标签:
django
lightbox
summernote
【解决方案1】:
首先,这并不是一个好的解决方案,而是一种解决方法。
您可以使用正则表达式来匹配和分离<img> 标签。
Summernote 将输入的数据以与此类似的方式存储在数据库中:
<p>Test content</p><p>test content</p><p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJcAAABxCAMAAADvXMHUAAAAsVBMVEU8WJn///////08WZjp7fM8WZZZcKH///s4VZgsTY8vUZTN1d9CX5tzhLHl6+yNnroYR44wT5UUPoebpcEzVJKbqsE6WZP3+vtRZpzz9PiirMFOZ5q6wtN6jK/V3OIoSZK0u9Cqtc3BzNdvgakALog/XZIMPI+HlLOsusvHzNuBl7BieqOPnL8ANIeDjLNsgKPw9O5vf7MAKHwrTYaUqLg0Voc3UqGwv8hObZlibKAfRpYdBdWuAAAGsklEQVR4nO2YeZejKBeHVURBU1GUuJQLiZl0Yqe2mZpeJt//gw2bWyrV5+2ad5Y/+J2cVEQuPFzgcinLMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL67wpAKfBvcyyFSCD1Ya6/Mh703gvIVg/bmmsHP9IuoEGcJNW7zb8rCFFAkrhCt7uF9N5Wcj/EBZ+jbZuvVz9tCFb7qG5zN7ntbbKzbd/5MBfyuKVjr1c/7TDyrCxvckHk5c5f8Zfksj/CRe982Wty62VGNvb/h+unLUeum/6KO8lVbqLoCD6wr/42rlC2myaEkH9pHm9xAc0V8eAFf8AFZr4EQkMQHrnk46IJ8XDVp7TSTf2IC1kjF0J8xEjrqhYNKJ0KAaRB8JVaSy5KaUCWlkiYLVsSRRS+5brqtqgyxbU5FEXFn5VWgGDNwBtfeU0UPZ0LwA35WIPM2/PFeFcgAiauQ3X3EB33BUJy+ACRlffEzbxVoLuDiAFvLyoduCVYcKGiKsRHY8WtrXej+Ha" data-filename="download.png" style="width: 151px;"><br></p>
您可以使用正则表达式将其分成几部分,然后通过用<a> 标签包装<img> 标签来回显这些部分,然后为<a> 标签提供任何您需要让灯箱工作的类。您可以按照下面的示例用 php 编写并尝试用 python 编写:
$pattern = '/(<img\s?)(src=")([^"]*)(")([^>]*)(>)/';
$string = '...summernote data like the example above...';
$split = preg_split($pattern, $string, -1, PREG_SPLIT_NO_EMPTY);
$x = preg_match($pattern, $string, $matches);
if(isset($x) && $x == true){
echo $split[0].'<a class="lightbox-something" href="'.$matches[3].'">'.$matches[0].'</a>'.$split[1];
}
else{
echo $split[0];
}
preg_split 在匹配失败时返回一个包含输入字符串的单个元素的数组,即没有 img 标签,因此$split[0]
preg_match 在字符串中搜索与给定正则表达式匹配的字符串在模式中。
$matches :如果提供了匹配项,则将其填充为搜索结果。 $matches[0] 将包含与完整模式匹配的文本,$matches[1] 将包含与第一个捕获的带括号的子模式匹配的文本,依此类推。