HTML 编辑器

创建一个具有即时预览和语法高亮的富 HTML 或 Markdown 编辑器。

HTML 编辑器允许您使用 HTML 或 Markdown 编写，同时生成实时预览。它包含一个工具栏，可帮助您更改文本外观，添加链接、图片、引用和列表，而无需编写代码。编辑器为 HTML 和 Markdown 提供语法高亮显示，您甚至可以切换到全屏模式，以便您可以不受干扰地处理您的内容。

用法

要应用此组件，您首先需要包含必要的 CodeMirror 和 marked 依赖项。为此，只需将相应的脚本添加到项目的头部即可。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>

        <!-- Codemirror and marked dependencies -->
        <link rel="stylesheet" href="codemirror/lib/codemirror.css">
        <script src="codemirror/lib/codemirror.js"></script>
        <script src="codemirror/mode/markdown/markdown.js"></script>
        <script src="codemirror/addon/mode/overlay.js"></script>
        <script src="codemirror/mode/xml/xml.js"></script>
        <script src="codemirror/mode/gfm/gfm.js"></script>
        <script src="marked.js"></script>

        <!-- HTML editor CSS and JavaScript -->
        <link rel="stylesheet" href="htmleditor.css">
        <script src="htmleditor.js"></script>
    </head>
    <body>
    </body>
</html>

之后，只需将 data-uk-htmleditor 属性添加到 <textarea> 元素即可。

示例

标记

<textarea data-uk-htmleditor>...</textarea>

Markdown

您还可以在 HTML 编辑器中编写 Markdown。只需将 markdown:true 选项添加到 data 属性即可。

示例

标记

<textarea data-uk-htmleditor="{markdown:true}">...</textarea>

选项卡模式

您还可以在 Markdown 和预览模式之间切换。只需添加 data-uk-htmleditor="{mode:'tab'} 属性。

示例

标记

<textarea data-uk-htmleditor="{mode:'tab'}">...</textarea>

JavaScript 选项

以下是通过属性设置选项的示例

data-uk-htmleditor="{mode:'split', maxsplitsize:600}"

选项	可能的值	默认值	描述
`mode`	'split', 'tab'	'split'	视图模式
`enablescripts`	布尔值	false	在预览中运行内联脚本和样式
`iframe`	布尔值或字符串	true	在 iframe 中显示预览。您可以将 URL 传递给要包含在 iframe 中的样式表
`toolbar`	数组	[ "bold", "italic", "strike", "link", "picture", ... ]	将显示在工具栏中的按钮列表
`maxsplitsize`	整数	1000	在拆分模式下切换到响应式选项卡模式时的最小浏览器宽度
`lblPreview`	任意字符串	'预览'	预览模式的标签字符串
`lblCodeview`	任意字符串	'Markdown'	代码模式的标签字符串

手动初始化元素

var htmleditor = UIkit.htmleditor(textarea, { /* options */ });