↖️ ⬛️ ⏏️ ビルド：markitUp、fancybox、elFinder-WYSIWYGエディターの優れた代替品 👨🏾‍✈️ 🎆 🛵

私は長い間ウェブサイトのコンテンツ管理システムを書いており、常にビジュアルエディターを使用しています。私はしばしばcmsを書くだけでなく、それらに対するさらなるサポートも提供するという事実を考慮して、ユーザーがhtmlコードでスマートになろうと定期的に努力しているという事実にうんざりしています（通常、Wordからのコピーアンドペーストについては黙っています）。そして今年から、visivigエディターの代わりにmarkdownをサポートするmarkitUpを挿入し始めました。

実際、Wordからのコピーと貼り付けからユーザーを引き離すよりも、3〜4時間でhtmlマークアップの基本を説明する方が簡単です。マークアップではすべてが優れていますが、サーバーにファイルをアップロードし、それらへのリンクを挿入する機能がありません。

今日は、素晴らしいjqueryプラグイン、markitUp、fancybox、elFinderの共生に時間を割くことに決めました。私は自分の仕事の結果を共有することにしました。

以下が必要になります： fancybox 、 markitUp 、 elFinder 。 JQueryとjquery uiも便利かもしれませんが、CDNからロードしています。

エディターを使用したページのHTMLコードの例。

<!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>

また、script.jsファイルの内容：

 function markitupElfinder(){ $('#markitup-elfinder').elfinder({ lang: 'ru', url : '/admin/dash/fm/', //        getFileCallback:function(file){ $.markItUp({ replaceWith:'![]('+file.url+' "[![:]!]")'}); $.fancybox.close(); } }).elfinder('instance'); $.fancybox({ content: $('#markitup-elfinder') }); } $(document).ready(function(){ $("#post-content").markItUp(mySettings); });

js/markitup/sets/markdown/set.js

{name:'Picture', key:'P', replaceWith:'![[![Alternative text]!]]([![Url:!:http://]!] "[![Title]!]")'}

を{name:'Picture', key:'P', call: 'markitupElfinder'}

ます。

set.jsでの検索と置換は、markitUp構成を編集するための最もエレガントなアプローチではありませんが、例としては役立ちます。

さて、私から出てきたいくつかの写真：

編集者自身

マネージャーファイルウィンドウ：

貼り付けると、ポップアップが表示され、imgタグのtitleプロパティが要求されます。

仕事の結果：

アーカイブ内の作業例

ライブ例（ KarNedに感謝）

ビルド：markitUp、fancybox、elFinder-WYSIWYGエディターの優れた代替品

More articles: