文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

HTML 编辑器

发布于 2019-05-26 16:28:27 字数 2935 浏览 1084 评论 0 收藏 0

创建可以实时预览并且带有语法高亮的富文本编辑器或Markdown编辑器。

这个HTML编辑器可以你在输入HTML或Markdown时，生成实时预览。它包含一个工具栏，帮助你无需任何代码就能进行文本的编辑、添加链接、图片、引用和列表等。本编辑器还为HTML代码和Markdown代码提供了语法高亮，并且你还能切换全屏模式，让你可以不受任何干扰专注于内容的撰写。

用法

使用这个组件，你首先必须引入必要的 CodeMirror 和 marked 依赖。要实现它，只需要在项目的header加入适当的脚本代码就行。

注意使用此组件需要额外添加 htmleditor.css 文件，在css/components文件夹中。此组件需要额外添加 htmleditor.js 文件，在js/components文件夹中。

<!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 和 marked 依赖 -->
<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 编辑器的 CSS 与 JavaScript -->
<link rel="stylesheet" href="htmleditor.css">
<script src="htmleditor.js"></script>
    </head>
    <body>
    </body>
</html>

最后，再为 <textarea> 元素添加 data-uk-htmleditor 属性就行了！。

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

Markdown

还可以在HTML编辑器中编写Markdown。只需为data属性添加 markdown:true 选项就行。

<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'	视图模式
`toolbar`	Array	[ "bold", "italic", "strike", "link", "picture", ... ]	工具栏上显示的按钮列表
`maxsplitsize`	integer	1000	触发由分割模式切换到选项卡模式的响应式行为的最小浏览器视口宽度。
`lblPreview`	任意 string	'Preview'	预览模式的标签字符串（Label string）
`lblCodeview`	任意 string	'Markdown'	代码模式的标签字符串（Label string）

手动初始化

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据