如何将TinyMCE与WPForms集成

Question

我正在尝试将TinyMCE与WPForms集成在WPForms博客帖子提交插件中。

我用下面的代码插入了一个HTML字段

   <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
   <script>
       tinymce.init({
       selector: '#wpforms-421-field_7'
    });

​

这种方式的工作原理是集成了TinyMCE，但布局很糟糕。此外，使用此方法上传的图像实际上不会反映在实际页面中。

​

​

如何正确集成TinyMCE和WPForms，以便在文本区域插入图像并将其保存在提交的帖子中？

Answer 1

您在请求中提出了几个不同的问题……让我试着解决每一个问题：

1 - TinyMCE在渲染页面中看起来很奇怪， TinyMCE的菜单、工具栏和状态栏都是加载TinyMCE的主网页的一部分。因此，如果您将CSS加载到影响这些元素的页面上，您可能会得到如下所示的奇怪的可视结果。

我会使用你的浏览器的开发工具来找出什么CSS正在影响事情。

2 -如何使用TinyMCE上传图像？

关于您如何尝试允许用户通过TinyMCE上传图像，您根本没有给我们任何细节。有一个插入图像选项，您可以通过图像插件公开，但它需要一些后端编码来接收图像并对其进行处理。

https://www.tiny.cloud/docs/plugins/image/#image_uploadtab https://www.tiny.cloud/docs/plugins/image/#file_picker_callback

还有一个问题- Wordpress已经有了一个媒体库和一个可以与之交互的UI，同时使用TinyMCE来创建内容-为什么你要尝试在WP自己的媒体库之外做一些事情？

Answer 2

在使用WPForm创建提交博客帖子的表单时，作者似乎希望用TinyMCE代替文本区。

​

图片来源：https://wpforms.com/how-to-allow-users-to-submit-blog-posts-on-your-wordpress-site/

问题是TinyMCE没有提供WPForm，尤其是帖子内容。您可能会遇到脚本错误或UI问题。您可以使用WPForm以外的其他插件。否则，编写一些自定义代码，特别是用于WPForm中的帖子提交插件。

Answer 3

必须将Wpforms设置为“无样式”，并选中“全局加载资产”。