常见配置
使用markdown语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WangEditor Markdown示例</title>
<link rel="stylesheet" type="text/css" href="path/to/wangeditor.css">
</head>
<body>
<div id="editor"></div>
<script type="text/javascript" src="path/to/wangeditor.js"></script>
<script type="text/javascript">
var editor = new wangEditor('#editor');
editor.config.menus = [
'head', // 标题
'bold', // 粗体
'italic', // 斜体
'underline', // 下划线
'quote', // 引用
'list', // 列表
'link', // 链接
'table', // 表格
'code', // 代码块
'undo', // 撤销
'redo' // 重复
];
editor.config.mode = 'markdown';
editor.create();
function getMarkdownContent() {
var content = editor.txt.html();
// 将content进行Markdown解析和渲染
// ...
}
</script>
</body>
</html>初始化时设置默认的字体、字号
设置默认行高、字体和字号。
const defaultContent = [
{
type: 'paragraph',
lineHeight: '1.5',
children: [
{ text: '', fontFamily: '黑体', fontSize: '32px' }
]
},
]
const editor = E.createEditor({
selector: '#editor-text-area',
content: defaultContent,
config: editorConfig
})Vue 中可以设置 defaultContent 。
<Editor :defaultContent="defaultContent" />其他配置
全屏 & 预览 & 查看源码
入门使用
常用插件
- wangEditor-plugin-md: 在 wangEditor 中使用基本的 markdown 语法。
- editor-for-vue