Question

我正在使用Tinymce作为文本区域。我在同一页面上也有一个输入类型文件。在移动设备上，Tinymce隐藏了输入type =“ file”。有什么办法告诉Tinymce不要隐藏输入吗？

我可以通过使用标签来解决该问题，将标签包裹在图像上以供用户单击以浏览，但随后它不会像通常那样显示所选文件名。除非有一种显示所选文件名的方法。否则，用户单击并选择文件，并且它实际上没有向用户显示已选择了文件。我希望只为type =“ file”显示正常的“选择文件”。

 <script src="js/jquery-3.3.1.min.js"></script>
 <script src="https://cloud.tinymce.com/5/tinymce.min.js"></script>
 <form>
 <textarea id="something" rows="3"></textarea> 
 <input type="file" id="thefile" accept="image/*">
 <button type="submit" id="submitbutton">Save</button>
 </form> 
 <script>
 tinymce.init({
  selector: 'textarea',
  height: 400,
  menubar: false,
  plugins: [
    'advlist autolink lists link charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime table paste code help wordcount'
  ],
  toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft 
  aligncenter alignright alignjustify | bullist numlist outdent indent | 
  removeformat | help',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ]
});
</script>

Answer 1

浏览时，我发现有人在Github上打开了一个有关此bug的问题（仍在版本：5.0.15（2019-09-02）内发布），该问题是由移动电话引起的 CSS： skins \ ui \ oxide-dark \ skin.mobile.min.css 。

通过在您自己的CSS中覆盖输入文件的属性 webkit “可见性”，它可以正常工作：

input[type="file"]::-webkit-file-upload-button {
     display: block;
}

最好在您自己的CSS中执行此操作，以免TinyMCE CSS在以后的更新中出现。

希望这对您有所帮助。

使用tinymce mobile时隐藏的输入类型文件

1 个答案: