Symfony、TinyMCE 和 Bootstrap 灯箱答案

【问题标题】：Symfony, TinyMCE and Bootstrap LightboxSymfony、TinyMCE 和 Bootstrap 灯箱
【发布时间】：2018-02-21 00:34:09
【问题描述】：

在 Symfony 开发的博客应用程序中，我定义了 -by TinyMCE 及其插件 Justboil.me- 一个带有 RTE 文本区域的表单，用于创建一些文本 + 图像，例如在 url http://localhost/myApp/Blog/1/Post/6/edit强>。

因此，文本+图像在 url http://localhost/myApp/Blog/1/Post/6 处呈现。到目前为止，一切都很好。

现在我也想要一个灯箱效果，Bootstrap Lightbox。

所以问题是，我如何让 TinyMCE 创建 Bootstrap Lightbox 需要的 html？我不知道该怎么做。

如果我尝试手动插入以下代码

<div class="example">
<ul class="thumbnails">
<li class="span2"><a class="thumbnail" href="#demoLightbox" data-toggle="lightbox"> <img src="/bundles/myBundle/imgta/myImage.jpg" alt="Click to view the lightbox" /> </a></li>
</ul>
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1">
<div class="lightbox-content"><img src="/bundles/myBundle/imgta/myImage.jpg" />
<div class="lightbox-caption">
<p>Your caption here</p>
</div> </div></div></div>

我得到一个凌乱的弹出框，但它包含整个前端页面本身http://localhost/myApp/Blog/1/Post/6，而不是只是带有标题的图像。不知何故，这是因为上面的链接呈现为http://localhost/myApp/Blog/1/Post/6#demoLightbox/（这是因为我有两个相互冲突的 JS）

我迷路了！谢谢，干杯

【问题讨论】：

标签： tinymce lightbox

【解决方案1】：

最终，解决问题变得很容易。以下两步就足够了：

A.我的 Symfony 3.4 开发的博客包含一个 show.html.twig 模板来呈现博客文章的单一视图。（如果你熟悉 Symfony，你就会知道我在说什么）。

在其中添加以下JS + css + html行：

  {% block css %}
  <link rel="stylesheet" type="text/css"  href="{{ asset('bundles/myblog/css/bootstrap-lightbox/bootstrap-lightbox.css') }}"  media="all" />
  {% endblock %}

  {% block javascripts %}
  <script type="text/javascript" src="{{ asset('bundles/myblog/js/bootstrap-lightbox/bootstrap-lightbox.min.js') }}"></script> 


  <script type="text/javascript">
  $(function() {
    $('.pop').on('click', function() {
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));
        $('.lightbox-caption').html( $(this).find('img').attr('alt'));
        $('#imagemodal').modal('show');   
    });     
   });
   </script>
   {% endblock %}

  ....

  <div id="imagemodal" class="modal fade" tabindex="-1">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-body"><button class="close" type="button" data-     dismiss="modal">&times;<span class="sr-only">Close</span></button> 
  <img class="imagepreview" style="width: 100%;" />
  <div class="lightbox-caption">&nbsp;</div>
  </div>
  </div>
  </div>
  </div>

B.破解Justboil.me 一点点。文件dialog.v4.js，第63行，用<a class="pop" href="#"> | </a>包装输出：

 tinymce.EditorManager.activeEditor.insertContent('<a class="pop" href="#"> <img src="' + result.filename +'"></a>');

就是这样！

【讨论】：