Build: markitUp, fancybox, elFinder - a great replacement for WYSIWYG editors
I have been engaged in writing content management systems for sites for a long time and I always used visual editors in them. In view of the fact that I often not only write cms, but also provide further support for them, I’m fed up with the fact that users regularly strive to subtilize html-code (I’m generally silent about copy-paste from the Word). And from this year, I began to insert markitUp with markdown support instead of the visibility editors.
Indeed, it is easier in 3-4 hours to explain the basics of html markup than to wean the user to copy-paste from the Word. Everything is great in markitup, but there is not enough opportunity to upload files to the server and insert links to them.
Today I decided to devote time to the symbiosis of wonderful jquery plugins: markitUp, fancybox, elFinder. I decided to share the result of my work.
Need : fancybox , markitUp , elFinder . Jquery and jquery ui can also be useful, although I ship them from the CDN.
Example html code page with the editor.
')
And the contents of the script.js file:
In the
Search and replace in set.js is not the most elegant approach to editing the markitUp config, but for example it will do.
Well, a few pictures that I left:
Editor himself
File Manager window:
When inserting, a pop-up appears with a request for the title property for the img tag:
Result of work:
Working example in the archive
A live example (thanks to KarNed )
Indeed, it is easier in 3-4 hours to explain the basics of html markup than to wean the user to copy-paste from the Word. Everything is great in markitup, but there is not enough opportunity to upload files to the server and insert links to them.
Today I decided to devote time to the symbiosis of wonderful jquery plugins: markitUp, fancybox, elFinder. I decided to share the result of my work.
Need : fancybox , markitUp , elFinder . Jquery and jquery ui can also be useful, although I ship them from the CDN.
Example html code page with the editor.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> </head> <body> <form> <textarea id="post-content"></textarea> <button></button> </form> <div id="markitup-elfinder"></div> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css"/> <link rel="stylesheet" type="text/css" href="js/markitup/skins/simple/style.css"/> <link rel="stylesheet" type="text/css" href="js/markitup/sets/markdown/style.css"/> <link rel="stylesheet" type="text/css" href="js/elfinder/css/elfinder.min.css"/> <link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css"/> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script>google.load("jqueryui", "1");</script> <script src="js/markitup/jquery.markitup.js"></script> <script src="js/markitup/sets/markdown/set.js"></script> <script src="js/elfinder/js/elfinder.min.js"></script> <script src="js/elfinder/js/i18n/elfinder.ru.js"></script> <script src="js/fancybox/jquery.fancybox.pack.js"></script> <script src="js/script.js"></script> </body> </html> ')
And the contents of the script.js file:
function markitupElfinder(){ $('#markitup-elfinder').elfinder({ lang: 'ru', url : '/admin/dash/fm/', // getFileCallback:function(file){ $.markItUp({ replaceWith:''}); $.fancybox.close(); } }).elfinder('instance'); $.fancybox({ content: $('#markitup-elfinder') }); } $(document).ready(function(){ $("#post-content").markItUp(mySettings); });
In the
js/markitup/sets/markdown/set.js find a string of the type {name:'Picture', key:'P', replaceWith:'![[![Alternative text]!]]([![Url:!:http://]!] "[![Title]!]")'} and replace it with {name:'Picture', key:'P', call: 'markitupElfinder'} .
Search and replace in set.js is not the most elegant approach to editing the markitUp config, but for example it will do.
Well, a few pictures that I left:
Editor himself
File Manager window:
When inserting, a pop-up appears with a request for the title property for the img tag:
Result of work:
Working example in the archive
A live example (thanks to KarNed )
Source: https://habr.com/ru/post/141450/
All Articles