如何更改 TinyMCE 中插入图片的功能?
How to change the functionality for inserting images in TinyMCE?
我的网络应用程序有上传图片的功能,还有附加信息,比如图片标题、描述、标签、版权信息等。我使用 TinyMCE 编辑网页,但我不想让图片在其中上传编辑。我只想让用户在已经上传到服务器的图片中选择。
将 TinyMCE 中的 "Insert Image" 功能更改为以下内容是否相对容易:
- 按下 "Insert Image" 按钮时,会弹出一个自定义对话框。
- 该对话框的内容是服务器上图像的网格视图。此处不应存在上传功能。
- 通过 radio-button 选择了一张图片。
- 当按下对话框中的 "Insert Selected Image" 按钮时,一些生成的 HTML 被插入到编辑器光标处,而不仅仅是
<img>
标签。
我浏览了 TinyMCE documentation,我知道 file_picker_callback
。我会使用它并编写自己的 javascript 函数来打开自己的对话框吗?如何控制文档中插入的内容?
TinyMCE 有 API 可以创建您自己的工具栏按钮,这些按钮可以打开对话框来执行您需要的任何任务。
一种方法是使用 TinyMCE UI:https://www.tiny.cloud/docs/ui-components/dialog/
另一种方法是使用嵌入您创建的远程网页的 URL 对话框。 https://www.tiny.cloud/docs/ui-components/urldialog/
无论哪种情况,您都可以使用 TinyMCE API(例如 insertContent()
)将结果 HTML 放入编辑器。
我的网络应用程序有上传图片的功能,还有附加信息,比如图片标题、描述、标签、版权信息等。我使用 TinyMCE 编辑网页,但我不想让图片在其中上传编辑。我只想让用户在已经上传到服务器的图片中选择。
将 TinyMCE 中的 "Insert Image" 功能更改为以下内容是否相对容易:
- 按下 "Insert Image" 按钮时,会弹出一个自定义对话框。
- 该对话框的内容是服务器上图像的网格视图。此处不应存在上传功能。
- 通过 radio-button 选择了一张图片。
- 当按下对话框中的 "Insert Selected Image" 按钮时,一些生成的 HTML 被插入到编辑器光标处,而不仅仅是
<img>
标签。
我浏览了 TinyMCE documentation,我知道 file_picker_callback
。我会使用它并编写自己的 javascript 函数来打开自己的对话框吗?如何控制文档中插入的内容?
TinyMCE 有 API 可以创建您自己的工具栏按钮,这些按钮可以打开对话框来执行您需要的任何任务。
一种方法是使用 TinyMCE UI:https://www.tiny.cloud/docs/ui-components/dialog/
另一种方法是使用嵌入您创建的远程网页的 URL 对话框。 https://www.tiny.cloud/docs/ui-components/urldialog/
无论哪种情况,您都可以使用 TinyMCE API(例如 insertContent()
)将结果 HTML 放入编辑器。