📜  tinymce 不可编辑块 (1)

📅  最后修改于: 2023-12-03 15:35:20.253000             🧑  作者: Mango

Markdown 的语法相比于传统的 HTML 更加简洁明了,但在某些情形下需要使用到 HTML 的部分标签来实现一些复杂的效果。而对于现代化的富文本编辑器,它们往往集成了 Markdown 语法编辑和 HTML 编辑的功能,用户可以通过切换模式来使用不同的语法来编辑文本内容。

然而,在实际的开发过程中,我们可能会遇到一些情形,比如要展示一段代码或者播放一个嵌入式的视频,这些内容都是无法编辑的块级元素,用户不能够以 Markdown 的方式来编辑这些内容,需要用到 HTML 的方式来进行编辑。

这时候,我们可以使用 tinymce 不可编辑块 的功能来解决这个问题。tinymce 是一款基于 JavaScript 的富文本编辑器,它可以通过插件的方式来扩展一些功能,不可编辑块就是其中的一种。

不可编辑块可以被用作包裹各种块状元素,比如段落、标题、列表、引用等等,使它们在页面上呈现为单一的矩形块,与其它内容分离开来。同时,这些被包裹的内容是不可编辑的,用户无法对其进行更改。

下面是一个示例代码片段,展示了如何使用 tinymce 不可编辑块 编辑和展示一段 HTML 代码:

<!-- markdown -->

这是一段Markdown文本,其中包含了一段HTML代码:

<blockquote class="my-blockquote" contenteditable="false">
    <p>这是一个带有阴影效果的HTML块状引用。</p>
    <pre><code>int main() {
        printf("Hello, world!\n");
        return 0;
    }</code></pre>
</blockquote>

这是一段普通文本。

<!-- tinymce -->

<p>这是一段Markdown文本,其中包含了一段HTML代码:</p>

<pre>&lt;blockquote class="my-blockquote" contenteditable="false"&gt;
    &lt;p&gt;这是一个带有阴影效果的HTML块状引用。&lt;/p&gt;
    &lt;pre&gt;&lt;code&gt;int main() {
        printf("Hello, world!\n");
        return 0;
    }&lt;/code&gt;&lt;/pre&gt;
&lt;/blockquote&gt;</pre>

<p>这是一段普通文本。</p>

需要注意的是,不可编辑块需要通过 CSS 来进行样式定义,比如上例中的 .my-blockquote,同时需要在标签上设置 contenteditable="false" 来使其不可编辑。

以上就是关于 tinymce 不可编辑块 的介绍,它可以帮助我们更好地利用 Markdown 和 HTML 的优点,灵活地编辑和展示带有更复杂结构的内容块。