رابط های کاربری افزودنی ویرایشگر، واسط های کاربری افزودنی ویرایشگر
با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
افزودنی های ویرایشگر تعامل کاربر را از طریق منوها، دیالوگ ها و نوارهای کناری سفارشی شده امکان پذیر می کند. پیوندهای زیر اطلاعاتی را برای ساخت این نوع رابط ها ارائه می دهند.
منوهای افزودنی با استفاده از سرویس رابط کاربری پایه Apps Script ایجاد میشوند. موارد منوها نقاط شروع اولیه را برای استفاده از افزونه شما ارائه می دهند، اما باید آنها را طوری طراحی کنید که چرخه عمر مجوز افزونه را در نظر بگیرید.
نوارهای کناری و دیالوگ ها با استفاده از سرویس HTML Apps Script ایجاد می شوند. این سرویس به شما امکان می دهد ساختار و ظاهر رابط را با استفاده از HTML و CSS تعریف کنید. برای جزئیات بیشتر به ایجاد و ارائه HTML مراجعه کنید.
- همچنین می توانید تماس های ارتباطی سرویس گیرنده-سرور را تنظیم کنید تا اقدامات کاربر در رابط منجر به اقدامات انجام شده در سرورهای Google که فایل ویرایشگر در آن قرار دارد یا بالعکس شود.
- Apps Script همچنین یک نحو قالب را برای ساختن رابط های پویا آسان تر ارائه می دهد.
هنگام ساختن واسط های HTML برای افزودنی های ویرایشگر، باید از بسته CSS الحاقی ویرایشگر استفاده کنید تا به افزونه شما کمک کند شبیه ویرایشگرهای Google Workspace که گسترش می دهند به نظر برسد.
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده Oracle و/یا شرکتهای وابسته به آن است.
تاریخ آخرین بهروزرسانی 2025-07-30 بهوقت ساعت هماهنگ جهانی.
[null,null,["تاریخ آخرین بهروزرسانی 2025-07-30 بهوقت ساعت هماهنگ جهانی."],[[["\u003cp\u003eEditor add-ons enhance user interaction with custom menus, dialogs, and sidebars, built using Apps Script's UI and HTML services.\u003c/p\u003e\n"],["\u003cp\u003eAdd-on menus initiate add-on usage and should be designed considering the add-on authorization lifecycle.\u003c/p\u003e\n"],["\u003cp\u003eSidebars and dialogs, created with HTML service, allow for defining the add-on's interface structure and appearance using HTML, CSS, and client-server communication for dynamic interactions.\u003c/p\u003e\n"],["\u003cp\u003eThe Editor add-on CSS package ensures visual consistency with Google Workspace editors.\u003c/p\u003e\n"]]],["Editor add-ons allow user interaction via custom menus, dialogs, and sidebars. Menus, built with the Ui service, serve as starting points, requiring design consideration for the add-on authorization lifecycle. Sidebars and dialogs, created using the HTML service, utilize HTML and CSS for interface design. Client-server communication enables actions on the server based on user interface interactions. The editor add-on CSS package maintains a consistent look and feel with Google Workspace editors. Dynamic interface creation is supported via a template syntax.\n"],null,["# Editor add-on user interfaces\n\n[Editor add-ons](/workspace/add-ons/concepts/types#editor_add-ons)\nenable user interaction through customized menus, dialogs, and\nsidebars. The following links provide information building these types of\ninterfaces.\n\n- [Add-on menus](/workspace/add-ons/concepts/menus) are created using\n Apps Script's base [Ui service](/apps-script/reference/base/ui).\n Menus items provide initial starting points for using your add-on,\n but you must design them to take into account the add-on\n [authorization lifecycle](/workspace/add-ons/concepts/editor-auth-lifecycle#the_complete_lifecycle).\n\n- [Sidebars and dialogs](/workspace/add-ons/concepts/dialogs) are created using\n Apps Script's [HTML service](/apps-script/reference/html). This service\n lets you define the interface structure and appearence using HTML and CSS.\n See [Create and serve HTML](/apps-script/guides/html) for more details.\n\n - You can also set up [client-server communication](/apps-script/guides/html/communication) calls so that user actions in the interface result in actions taken on the Google servers where the editor file resides, or vice versa.\n - Apps Script also provides a [template syntax](/apps-script/guides/html/templates) to make building dynamic interfaces easier.\n- When building HTML interfaces for Editor add-ons, you should use the\n [Editor add-on CSS package](/workspace/add-ons/guides/css) to help your add-on\n look and feel like the Google Workspace editors\n they extend."]]