jodit-pro
Version:
PRO Version of Jodit Editor
268 lines (244 loc) • 6.14 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Jodit Pro</title>
<link rel="stylesheet" href="./build/jodit.css" />
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i"
rel="stylesheet"
/>
</head>
<body>
<div class="example-box">
<h1>
Jodit PRO <a href="https://xdsoft.net/jodit/pro/">Buy it</a>
</h1>
<textarea name="editor" id="editor" cols="50" rows="10"></textarea>
</div>
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica,
Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-weight: 300;
line-height: 1.5;
text-rendering: optimizelegibility;
background-color: #f5f2f0;
}
p,
h1 {
margin-top: 0;
}
h1 a {
color: #5a5a5a;
}
.example-box {
display: flex;
min-height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (max-width: 500px) {
.example-box {
align-items: stretch;
padding: 16px;
}
}
</style>
<script src="./build/jodit.js"></script>
<script src="./build/plugins/keyboard/keyboard.js"></script>
<script src="./build/plugins/paste-code/paste-code.js"></script>
<script src="./build/plugins/google-maps/google-maps.js"></script>
<script src="./build/plugins/export-docs/export-docs.js"></script>
<script src="./build/plugins/paste-from-word/paste-from-word.js"></script>
<script src="./build/plugins/mobile-view/mobile-view.js"></script>
<script src="./config.js"></script>
<script>
const editor = new Jodit('#editor', {
// theme: 'dark',
// extraPlugins: ['tune-block'],
// buttons: [
// 'source',
// '|',
// {
// group: 'font-style',
// buttons: []
// },
// {
// group: 'list',
// buttons: []
// },
// {
// group: 'font',
// buttons: []
// },
// '|',
// 'brush',
// 'image',
// 'align',
// '|',
// 'preview',
// 'googleMaps',
// 'exportDocs'
// ],
// removeButtons: ['changeCase', 'classSpan', 'lineHeight'],
width: 762,
minHeight: '21px',
iframe: true,
// iframeStyle: '',
showPlaceholder: false,
// iframeCSSLinks: [
// 'src/plugins/paste-from-word/assets/content.css',
// 'src/plugins/paste-from-word/assets/document-mode.css'
// ],
defaultFontSizePoints: 'pt',
pasteFromWord: {
enable: true
},
language: 'en',
exportDocs: {
// ajax: {
// url: 'http://localhost:8081/'
// }
},
googleMaps: {
API_KEY: 'AIzaSyDjnR03hxN8fo0QJ85Jkkvk2DALTh3eynY'
},
pasteCodeHLJS: {
insertTemplate: (jodit, language, value) =>
`<pre><code class="hljs language-${language}">${Jodit.modules.Helpers.htmlspecialchars(
value
)}</code></pre>`,
highlightLib: {
js: [
'//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js'
],
isLangLoaded(lang) {
if (lang === 'html') {
return true;
}
return Boolean(hljs.listLanguages()[lang]);
},
langUrl: (lang) =>
`//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/${lang}.min.js`,
css: [
'//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css'
// 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/github.min.css'
],
highlight: (code, language) => {
return hljs.highlight(code, { language: language })
.value;
}
}
},
highlightSignature: {
schema: {
'[^\\s]+@[a-z\\.-]+': (jodit) =>
jodit.createInside.element('strong'),
'\\$\\{([^}]+)\\}': (jodit, matched) => {
let color = 'yellow'; // all another macros will be `yellow`
switch (matched[1]) {
case 'formSubmittedDate':
color = 'red';
break;
case 'formSessionURL':
color = '#0f0';
break;
}
return jodit.createInside.element('span', {
style: {
backgroundColor: color
}
});
}
}
},
// toolbar: false,
// buttons: [],
// "textIcons": true,
// disablePlugins: ['pasteFromWordPro'],
keyboard: {
// showLayoutSwitcher: false,
extraKeyButtons: [
{
key: 'λ',
hotkey: 'ctrl+1'
},
'β' // Will have hotkey alt+2
]
},
uploader: {
url: 'https://xdsoft.net/jodit/finder/?action=fileUpload'
},
filebrowser: {
ajax: {
url: 'https://xdsoft.net/jodit/finder/'
},
height: 580
},
autofocus: true,
events: {
afterConstructor: () => {
// editor.filebrowser.setMod('modal', true).open();
}
}
});
editor.waitForReady().then(() => {
const names = [
'@mary',
'@jain',
'@entany',
'@isaak',
'@ivan',
'@fedya',
'@yakov',
'@jhon',
'@lena',
'@elvin'
];
editor.e.fire('registerAutocompleteSource', (query) => {
return names
.filter((value) => value.indexOf(query) === 0)
.map((value) => ({
title: value,
value
}));
});
});
</script>
<div style='margin: 100px auto; max-width: 1024px;padding-bottom: 100px'>
<div id='browser'></div>
</div>
<script>
Jodit.plugins.wait('finder').then(() => {
const finder = new Jodit.modules.FileBrowserPro({
buttons: Jodit.atom([
'filebrowser.settings',
'fullsize',
]),
license: '',
ajax: {
url: 'https://xdsoft.net/jodit/finder/'
},
height: 580
});
finder.setMod('static', true).open();
document.getElementById('browser').appendChild(finder.container);
});
</script>
</body>
</html>