Clever Geek Handbook

MarkitUp！ -軽量jQueryエディター

はじめに



すべての人に挨拶！



最近では、1つのプロジェクトのエディターの機能をわずかに拡張する必要がありました。 しかし、私の場合に判明したように、いくつかの困難に遭遇しました。 この記事では、この状況から抜け出した方法を読者と共有します。



どうでしたか



エディターが少し更新されるはずのプロジェクトでは、ほとんどの場合、よく知られている昔のTinyMCEによって使用されました。 個人的に、私は彼に対して何もしません。 これは素晴らしい仕事をした優秀な編集者であり、現在さまざまなサイトで彼の職務を管理しています。 私自身はそれを私のプロジェクトの主なものとして使用しています。 しかし、トピックトピックに戻ります。これについてはこれ以上説明しません。



主なタスク：既存のエディターをあまり変更する必要はありませんでした。つまり、エディターの現在のバージョンにないタグを使用してフレームにテキストを追加する必要はありませんでした。

もちろん、最初は現在のエディター、つまりTinyMCEを完成させるだけのアイデアを思いつきました。 ドキュメントをよく読んで、私は一般的に、それについて複雑なものは何もないことに気付きました。 しかし、ネットワークで説明されている方法には重大な欠点がありました。



そしてここにそれらのいくつかがあります：



結局のところ、エディターの改良を完了する過程で、エディターを圧縮せずに使用する必要があります。 つまり、エディターのsrcファイルを自分で編集し、 YUI Compressor 、 JSMin、またはGoogle Closure Compilerなどのコンプレッサーで再度圧縮する必要があります。



私はすぐにこれについて考えました。 上記のオプションを選択した場合、少なくともエディターの今後の更新で問題が発生する可能性があります。



解決策





したがって、私は少し違う方法で行くことにしました。 このサイトは素晴らしいjQuery JavaScriptフレームワークを使用していたので、「他のエディターが見つからないのはなぜですか」と考えました。



よく検索して、 markItUpというエディターを見つけました！ 。

新しいエディターを選択するときに最初に気づいたこと：

  1. 設定の容易さと柔軟性。
  2. ブラウザー間の互換性に関する最小限の問題。


markItUpでさらに詳しく知る 、このエディターはその軽さにもかかわらず、非常に柔軟であることがわかりました。 これに加えて、テキスト操作のさまざまなモードもサポートしています。



ここにあなたが興味を持つかもしれない主なグッズがあります：

  1. 迅速かつ簡単な統合。
  2. ホットキーのサポート。
  3. Ajaxを使用したプレビュー。
  4. 簡単にカスタマイズ可能なスキン。


また、エディターでさまざまなタグのセットを操作できることにも注意する必要があります。

Html、BBcode、Wiki構文。



設置



エディターのインストールは非常に簡単です。

まず、エディター自体とjQueryを接続します。 



<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="markitup/jquery.markitup.js"></script>




次に、ファイルをエディター設定に接続する必要があります。これは間違いなく非常に便利です。 



 <script type="text/javascript" src="markitup/sets/default/set.js"></script>




そうでなければ、自分で設定する必要があります。 



 <script type="text/javascript" > mySettings = { ... } //   </script>




そして、ここで、例えば、作業構成はどのように見えるか： 



 function mySettings() { return { previewParserPath: '', onShiftEnter: {keepDefault:false, replaceWith:'<br />\n'}, onTab: {keepDefault:false, replaceWith:' '}, markupSet: [ {name:'H4', className:'editor-h4', openWith:'<h4>', closeWith:'</h4>' }, {name:'H5', className:'editor-h5', openWith:'<h5>', closeWith:'</h5>' }, {name:'H6', className:'editor-h6', openWith:'<h6>', closeWith:'</h6>' }, {separator:'---------------' }, {name: '', className:'editor-bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' }, {name: '', className:'editor-italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)' }, {name: '', className:'editor-stroke', key:'S', openWith:'<s>', closeWith:'</s>' }, {name: '', className:'editor-underline', key:'U', openWith:'<u>', closeWith:'</u>' }, {name: '', className:'editor-quote', key:'Q', replaceWith: function(m) { if (m.selectionOuter) return '<blockquote>'+m.selectionOuter+'</blockquote>'; else if (m.selection) return '<blockquote>'+m.selection+'</blockquote>'; else return '<blockquote></blockquote>' } }, {name: '', className:'editor-code', openWith:'<code>', closeWith:'</code>' }, {separator:'---------------' }, {name: '', className:'editor-ul', openWith:' <li>', closeWith:'</li>', multiline: true, openBlockWith:'<ul>\n', closeBlockWith:'\n</ul>' }, {name: '', className:'editor-ol', openWith:' <li>', closeWith:'</li>', multiline: true, openBlockWith:'<ol>\n', closeBlockWith:'\n</ol>' }, {separator:'---------------' }, {name: ' ', className:'editor-image', replaceWith:'<img src="[!['+'  :'+':!:http://]!]" />' }, {name: ' ', className:'editor-video', replaceWith:'<video>[!['+'  :'+':!:http://]!]</video>' }, {name: ' ', className:'editor-link', key:'L', openWith:'<a href="[!['+' url :'+':!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'  ...' }, {separator:'---------------' }, {name: '  ', className:'editor-clean', replaceWith: function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } } ] } }




CSSスタイルファイルも含める必要があります。 



 <link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" /> <link rel="stylesheet" type="text/css" href="markitup/sets/default/style.css" />




最後に、 markItUp自体をtextareaに接続します。 



 <script type="text/javascript" > jQuery(document).ready(function() { jQuery("#markItUp").markItUp(mySettings()); }); </script> ... <textarea id="markItUp"></textarea>




最後のいくつかのリンクへ：



今日は以上です。 ご清聴ありがとうございました。皆さんの成功を祈っています！


More articles:


All Articles