eManual_cubeLMS

CHN_LECTURE DETAILS - Supported HTML Tags in Description


您可以在 Description 中输入 Html 标签以创建目录。

在原有的 Lecture Details 中,Description 过去会被识别为纯文本,但现已支持识别 Html 标签。


1. Hyper Link 应用

<a href="URL">Text</a>

这是一个在点击文本时会跳转到一起输入的 URL 地址的 a 标签。

<a href="http://cubelms.crscube.io">Clicking this link will direct you to the LMS login page.</a>

在 Description 中,将鼠标悬停在输入的 '前往 LMS 登录页面。' 上时,光标会变为指针。

这表示已应用超链接,点击时会跳转到指定的 URL 地址,即 LMS 登录页面(http://cubelms.crscube.io)。

*参考: 该功能仅在 Contents Type 为 Video 时可使用。

image-20250520-003851.png


2. 跳转到Video的指定时间点

<button onclick="javascript:window.open( \'URL/#/MyLectureVideo?lecture=' + window.location.href.split('/').pop() + '&video=Playback start time (seconds)' , \'_self\')">Text</button>

  • URL: io, kr, co.kr 的 URL 即可。

  • LMS 的各服务器域名 URL 地址如下。

    • SVC: https://cubelms.crscube.io

    • EDU: https://edu-cubelms.crscube.io

  • Playback start time (seconds): 表示开始播放的时间点。请以秒为单位输入,例如要跳转到 3:14 时,输入 194 即可。

  • Text: 表示将显示在 Description 中的文字。点击该文本时,会打开 Video 弹窗并播放。


<button onclick="javascript:window.open( 'https://cubelms.crscube.io/#/MyLectureVideo?lecture=' + window.location.href.split('/') .pop() + '&video=100' , '_self')">Clicking this will start playback from the specified timestamp.</button>

这样输入的代码表示,点击上面的句子时,在 'http://-cubelms.crscube.io'上注册的当前 Lecture 的 Video 的 100秒起开始播放。

*注 : 该功能仅在 Lecture 的 Contents Type 为 Video 时才可使用。

image-20250520-004552.png
image2020-3-3_18-41-27.png


3. 文本格式设置

1) 指定要应用格式的区域

<span>Text to apply/span>

可以使用 Span 标签来设置位于该开始标签<span>和结束标签 </span>之间输入的 Text 的样式。

Plain text without formatting
<u><span style="color:green">Text with formatting applied</span></u>
image-20250520-010431.png

2) 更改文字颜色

<span style="color:Color name">Text to apply</span>

只需用英语填写要输入到 color 中的颜色名称,即可应用。

要指定颜色,可以填写颜色的英文名称或颜色代码。

代表性的颜色有 blue, red, yellow, pink 等,其他各种颜色代码请参考以下 URL。

https://www.w3schools.com/colors/colors_names.asp 

<span style="color:red">Text to be changed to red</span>
<span style="color:blue">Text to be changed to blue</span>
image-20250520-010734.png

3) 更改字体大小

<span style="font-size:size">Text to apply</span>

您可以输入 font size 标签中指定的字体大小来更改文本大小。

默认情况下,输入 px 后即可按输入的数字调整文本大小。

<span style="font-size:50px">Text with a font size of 50px</span>
<span style="font-size:40px">Text with a font size of 40px</span>
<span style="font-size:30px">Text with a font size of 30px</span>
image-20250520-010842.png

4) 加粗

<b>Text to apply</b>

请在 b 标签之间输入要应用不同粗细的文本。

Text with normal weight
<b>Bold text</b>
image-20250520-011127.png

5) 应用下划线

<u>Text to apply</u>

请将要应用下划线的文本输入在 u 标签之间。

Non-underlined Text
<u>Underlined text</u>
image-20250520-015208.png

6) 应用斜体文本

<i>Text to apply</i>

请将要以斜体应用的文本输入到 i 标签之间。

Non-italic text
<i>Italicized text</i>
image-20250520-015349.png


4. 组合使用标签时

如果要同时更改文本的颜色和大小,如下 ;进行分隔即可同时应用。

在双引号内,将要应用的格式以分号(;)分隔后输入。

<span style="font-size:40px; color:red">Text in red with a font size of 40px</span>
image-20250520-015436.png

在嵌套输入标签时,可以同时指定多种格式。

只要正确填写开始标签和结束标签,即使不考虑顺序,也可以同样适用

<u><b><i><span style="color:red">Enter text using multiple tags</span></i></b> </u>
<i><b><u><span style="color:blue">Enter text using multiple tags</span</u></b></i>
image-20250520-015716.png


5. 应用

您可以应用从指定时间点开始播放的代码和用于美化文本的标签,如下所示。

<b><span style="color:blue; font-size:20px">Clicking an item in the table of contents below will start playback from the corresponding timestamp.</span></b>

<button onclick="javascript:window.open( 'http://cubelms.crscube.io/#/MyLectureVideo?lecture=' +window.location.href.split('/').pop() + '&video=100' , '_self')"><u>1. Create Study......................1:40</u></button>

<button onclick="javascript:window.open( 'http://cubelms.crscube.io/#/MyLectureVideo?lecture=' +window.location.href.split('/').pop() + '&video=150' , '_self')"><u>2. Study Information......2:30</u></button>

<button onclick="javascript:window.open( 'http://cubelms.crscube.io/#/MyLectureVideo?lecture=' +window.location.href.split('/').pop() + '&video=180' , '_self')"><u>3. Set Property..............3:00</u></button>

<button onclick="javascript:window.open( 'http://cubelms.crscube.io/#/MyLectureVideo?lecture=' +window.location.href.split('/').pop() + '&video=230' , '_self')"><u>4. Set EDC......................3:50</u></button>
image-20250520-015943.png