@xmzang/wang_editor_formula_custom
Version:
wangEditor formula 公式自定义插件
51 lines (44 loc) • 1.73 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wangEditor formula demo</title>
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<style>
textarea {
outline: none;
}
</style>
</head>
<body>
<p>wangEditor formula demo</p>
<p>LateX 语法示例 <input value="c = \pm\sqrt{a^1 + b^2}" style="width: 200px;"></p>
<div>
<div id="toolbar-container" style="border: 1px solid #ccc; border-bottom: none;"></div>
<div id="editor-container" style="border: 1px solid #ccc; height: 400px;"></div>
</div>
<div style="margin-top: 20px; display: flex;">
<div style="flex: 1; padding-right: 5px;">
<textarea id="text-html" style="width: 100%; height: 300px;"></textarea>
</div>
<div style="flex: 1; padding-left: 5px;">
<textarea id="text-json" style="width: 100%; height: 300px;"></textarea>
</div>
</div>
<!-- <button id="btn1">change attr</button>
<w-e-formula-card id="formula1" value="c = \\pm\\sqrt{a^1 + b^3}"></w-e-formula-card>
<script>
document.getElementById('btn1').addEventListener('click', () => {
const formula1 = document.getElementById('formula1')
if (Math.random() > 0.5) {
formula1.setAttribute('value', `c = \\pm\\sqrt{a^3 + b^3}`)
} else {
formula1.setAttribute('value', `c = \\pm\\sqrt{a^1 + b^2}`)
}
})
</script> -->
</body>
</html>