ckeditor-classic-math-custom
Version:
Thư viện ckeditor có mathType
231 lines (223 loc) • 8.71 kB
HTML
<!--
Copyright (c) 2014-2021, CKSource - Frederico Knabben. All rights reserved.
This file is licensed under the terms of the MIT License (see LICENSE.md).
-->
<html lang="en" dir="ltr">
<head>
<title>CKEditor 5 ClassicEditor build</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./mathquill/mathquill.css">
<link rel="icon" type="image/png" href="https://c.cksource.com/a/1/logos/ckeditor5.png">
<style>
.ck.ck-editor{
width: 1000px ;
}
section {
height: 40px ;
}
p[class*="active"]{
width: 1000px;
}
</style>
</head>
<body data-editor="ClassicEditor" data-collaboration="false">
<header>
<div class="centered">
<h1><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener noreferrer"><img src="https://c.cksource.com/a/1/logos/ckeditor5.svg" alt="CKEditor 5 logo">CKEditor 5</a></h1>
<nav>
<ul>
<li><a href="https://ckeditor.com/docs/ckeditor5/" target="_blank" rel="noopener noreferrer">Documentation</a></li>
<li><a href="https://ckeditor.com/" target="_blank" rel="noopener noreferrer">Website</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="message">
<div class="centered">
<h2>CKEditor 5 online builder demo - ClassicEditor build</h2>
</div>
</div>
<div class="centered">
<div class="row row-editor">
<div class="editor-container">
<div class="editor hay-cuu-lay-em" >
Hello
<p><span class="math-type-nnanh" data-math-nnanh="123123">\\(123123\\)</span>Hello </p>
<!-- <img src="https://via.placeholder.com/1000x300/02c7cd/fff?text=Placeholder%20image" alt="CKEditor 5 rocks!"> -->
</div>
<div class="editor2 hay-cuu-lay-em" >
Hello
Hello <span class="math-type-nnanh" data-math-nnanh="\frac{1}{33}">\(\frac{1}{33}\)</span> <span class="math-type-nnanh" data-math-nnanh="123">\(123\)</span>12313
<!-- <img src="https://via.placeholder.com/1000x300/02c7cd/fff?text=Placeholder%20image" alt="CKEditor 5 rocks!"> -->
</div>
</div>
</div></div>
<div id="editorViewer">123123123</div>
</div>
</main>
<footer>
<p class="okila active-know"><a href="https://ckeditor.com/ckeditor-5/" target="_blank" rel="noopener">CKEditor 5</a>
– Rich text editor of tomorrow, available today
</p>
<p>Copyright © 2003-2021,
<a href="https://cksource.com/" target="_blank" rel="noopener">CKSource</a>
– Frederico Knabben. All rights reserved.
</p>
</footer>
<p>Type math here: <span id="math-field"></span></p>
<p>LaTeX of what you typed: <span id="latex"></span></p>
<p>Solve <span id="problem">ax^2 + bx + c = 0</span>.</p>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<!-- <script src="./mathquill/mathquill.js"></script> -->
<script>
var mathFieldSpan = document.getElementById('math-field');
var latexSpan = document.getElementById('latex');
var MQ = MathQuill.getInterface(2);
var mathField = MQ.MathField(mathFieldSpan, {
spaceBehavesLikeTab: true, // configurable
handlers: {
edit: function() { // useful event handlers
latexSpan.textContent = mathField.latex(); // simple API
}
}
});
// mathField.write('\\sqrt{13}');
var staticField = MQ.StaticMath(document.getElementById('problem'));
// var mathFieldPro = MQ.MathField(document.getElementById('problem'));
// mathFieldPro.latex("\\sqrt(13)")
</script>
<script src="ckeditor.js"></script>
<!-- <script>ClassicEditor
.create( document.querySelector( '.editor' ), {
toolbar: {
items: [
'bold',
'italic',
'strikethrough',
'underline',
'|',
'mathTypeNNAnh',
'insertTable',
'mediaEmbed',
'|',
'undo',
'redo'
]
},
placeholderConfig: {
types: [ 'date', 'color', 'first name', 'surname' ]
},
cloudServices: {
// tokenUrl: () => new Promise( ( resolve, reject ) => {
// const xhr = new XMLHttpRequest();
// xhr.open( 'GET', 'https://example.com/cs-token-endpoint' );
// xhr.addEventListener( 'load', () => {
// const statusCode = xhr.status;
// const xhrResponse = xhr.response;
// if ( statusCode < 200 || statusCode > 299 ) {
// return reject( new Error( 'Cannot download new token!' ) );
// }
// return resolve( xhrResponse );
// } );
// xhr.addEventListener( 'error', () => reject( new Error( 'Network Error' ) ) );
// xhr.addEventListener( 'abort', () => reject( new Error( 'Abort' ) ) );
// xhr.setRequestHeader( customHeader, customValue );
// xhr.send();
// }),
tokenUrl: 'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt',
uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/'
},
nnanhMathType:{
libScript:{
styleCss: "/build/mathquill/mathquill.css",
jqScript: "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js",
mathScript: "/build/mathquill/mathquill.min.js",
}
},
language: 'vi',
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
licenseKey: '',
} )
.then( editor => {
window.editorNNAnh = editor;
})
.catch( error => {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: j92ccuqpufj0-91dtbae0cujn' );
console.error( error );
} );
</script> -->
<script
type="text/javascript"
id="MathJax-script"
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg-full.js"
></script>
<script>ClassicEditor
.create( document.querySelector( '.editor2' ), {
toolbar: {
items: [
'bold',
'italic',
'strikethrough',
'underline',
'|',
'mathTypeNNAnh',
'insertTable',
'mediaEmbed',
'|',
'simpleBox',
'placeholder',
'|',
'undo',
'redo'
]
},
placeholderConfig: {
types: [ 'date', 'color', 'first name', 'surname' ]
},
// cloudServices: {
// tokenUrl: 'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt',
// uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/'
// },
nnanhMathType:{
libScript:{
styleCss: "/mathquill/mathquill.css",
jqScript: "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js",
mathScript: "/mathquill/mathquill.min.js",
}
},
language: 'vi',
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
licenseKey: '',
} )
.then( editor => {
window.editorNNAnh = editor;
})
.catch( error => {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: j92ccuqpufj0-91dtbae0cujn' );
console.error( error );
} );
</script>
</body>
</html>