ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
canvas-lms/doc/api/editor_button_tools.md

9.5 KiB
Raw Blame History

Rich Content Editor Button Tools

The methods outlined here use resource selection, which is deprecated.

See the Content Item documentation to design a tool that can add content to the RCE in a way that conforms with the most up to date IMS LTI standard.

An extension to standard LTI, external tools can be configured to appear as buttons in the rich content editor. When a tool is configured, users will see it appear in the rich content editor for any pages inside the appropriate course/account. If a user clicks the button, a popup will appear where the external tool will be loaded. The tool should direct users to select or build some piece of content, then submit that content to the tool. The tool will then redirect the user to the LTI success URL with some additional parameters. Canvas will take this information and use it to embed rich content into the appropriate editor window.

If there are many editor buttons configured for a course, Canvas will show the first 3 as icons, and add a "more tools" icon that will show the rest of the configured tools in a dropdown.

When tools are loaded as rich editor buttons, Canvas sends an additional parameter to notify the tool of the directive, ext_content_return_types=embed_content. When a tool receives this directive, it means Canvas is expecting the tool to redirect the user to the LTI success URL with some additional parameters. These additional parameters tell Canvas what type of content to embed, as listed below. Remember to URL encode parameter values such as url.

Remember, to prevent unexpected security warnings for users, it's recommended that all URLs you return be over SSL (https instead of http).

Possible Redirect Parameters

to embed an image:

return_type=image_url (required)
url=<url> this is used as the 'src' attribute of the embedded image tag (required)
alt=<text> this is used as the 'alt' attribute of the embedded image tag (required, can be empty string)
width=<number> this is used as the 'width' style of the embedded image tag (required)
height=<number> this is used as the 'height' style of the embedded image tag (required)

examples:

If the launch_presentation_return_url were http://www.example.com/done, possible return URLs could include:

to embed an iframe:

return_type=iframe (required)
url=<url> this is used as the 'src' attribute of the embedded iframe (required)
title=<text> this is used as the 'title' attribute of the embedded iframe (optional)
width=<number> this is used as the 'width' style of the embedded iframe (required)
height=<number> this is used as the 'height' style of the embedded iframe (required)

examples:

If the launch_presentation_return_url were http://www.example.com/done, possible return URLs could include:

to embed a link:

return_type=url (required)
url=<url> this is used as the 'href' attribute of the inserted link (required)
text=<text> this is the suggested text for the inserted link. Highlighted content will be overwritten by this value. (required)
title=<text> this is used as the 'title' attribute of the inserted link (optional)
target=<text> this is used as the 'target' attribute of the inserted link (optional, only '_blank' is allowed as a value)

examples:

If the launch_presentation_return_url were http://www.example.com/done, possible return URLs could include:

to embed an external tool link:

return_type=lti_launch_url (required)
url=<url> this is URL that will be used to load the external tool (required)
title=<text> this is used as the 'title' attribute of the inserted external tool link (optional)
text=<text> this is the suggested text for the inserted link. Highlighted content will be overwritten by this value. (required)

examples:

If the launch_presentation_return_url were http://www.example.com/done, possible return URLs could include:

Remember that these links would only work if the current tool or some other tool was set to match on either the exact URL returned or the domain (in this case othersite.com)

to embed any other rich content:

For other types of rich content (such as a video tag, a large block of text, etc.) we also support the oEmbed standard. oEmbed works by giving Canvas an additional URL that can be queried to retrieve the block of content to be embedded. See http://oembed.com for more details about how oEmbed works

return_type=oembed (required)
url=<url> this is the oEmbed resource URL (required)
endpoint=<url> this is the oEmbed API endpoint URL (required)

examples:

If the launch_presentation_return_url were http://www.example.com/done, possible return URLs could include:

Settings

All of these settings are configurable for the "editor_button" placement in the tool configuration

  • url: <url> (optional)

    This is the URL that will be POSTed to when users click the button in any rich editor. It can be the same as the tool's URL, or something different. Domain and URL matching are not enforced for editor button links. In order to prevent security warnings for users, it is recommended that this URL be over SSL (https). This is required if a url is not set on the main tool configuration.

  • icon_url: <url> (optional)

    This is the URL of the icon that will be shown on the button in the rich editor. Icons should be 16x16 in size, and can be any standard web image format (png, gif, ico, etc.). It is recommended that this URL be over SSL (https). This is required if an icon_url is not set on the main tool configuration.

  • text: <text> (optional)

    This is the default text that will be shown if a user hovers over the editor button. This can be overridden by language-specific settings if desired by using the labels setting. This text will also be shown next to the icon if there are too many buttons and the tool is available in the "more tools" dropdown. This is required if a text value is not set on the main tool configuration.

  • labels: <set of locale-label pairs> (optional)

    This can be used to specify different label names for different locales. For example, if an institution supports both English and Spanish interfaces, the text in the link should change depending on the language being displayed. This option lets you support multiple languages for a single tool.

  • selection_width: <number> (required)

    This value is the explicit width of the dialog that is loaded when a user clicks the icon in the rich editor.

  • selection_height: <number> (required)

    This value is the explicit height of the dialog that is loaded when a user clicks the icon in the rich editor.

  • enabled: <boolean> (required)

    Whether to enable this selection feature.