单击添加图像后，TINYMCE添加输入字段

Question

我正在寻找解决问题的一些想法。

我使用TINYMCE在我的页面上添加文字。我希望在将文字添加到文本后，在我的表单中出现带有文字的选项标签，它将出现在照片的顶部。

你有任何想法怎么做吗？

Answer 1

我建议你做的是利用它的图像插件中的现有image_caption选项。

https://www.tinymce.com/docs/plugins/image/

将使用以下内容包装嵌入的图像：

<figure class="image">
<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="" />
<figcaption>Caption</figcaption>
</figure>

使用css样式将图标设置在图像顶部

figure.image {
  position: relative;
  padding: 0;
  margin: 0;
}

figure.image > figcaption {
    position: absolute;
    bottom: 10px;
    left: 10px;
  z-index: 3;
  padding: 5px;
  background-color: rgba(255,255,255,0.6);
}

jsfiddle：https://jsfiddle.net/v90vqt48/4/