ページにセクシーなエディターを埋め込む

この投稿が退屈で面白くないと思われる場合は、事前に謝罪します)

彼のプロジェクトの開発中に、彼はメッセージエディターを埋め込むタスクに直面しました。 とても楽しく、軽く、同時に機能的なものが欲しかった。 そのため、画像をバッファから挿入し、最後のアクションを元に戻すことができます。もちろん、フォントを操作するためのあらゆる種類の基本的な機能です。

そして、ライブラリに付属するエディターに目を向けました
ドジョツールキット
道場ツールキット


このライブラリについてのRuNetでは、率直に書かれているので、私の経験を共有したかったです

私はjsでのプログラミング経験がないことをすぐに予約します。したがって、おそらく、この投稿は「戦いと検索、発見と非表示」の原則に従って生活しているダミーと同じものにとって興味深いでしょう

そのため、ライブラリを埋め込むには、いくつかの手順を実行する必要があります。

  1. ダウンロードしてデプロイ)
  2. スクリプトを初期化する
  3. フォーム自体に追加する
ポイント1-サイズはすぐに怖いです、ライブラリとともに、フォルダにかなりランダムに散らばったたくさんの例がありますが、初心者にはそれだけです。 フォルダー全体を解凍するだけで、必要なものがわかります-後で。

2. 初期化にも問題ありませんでした。ヘッダー領域に数行追加するだけで、適切なパスを記述できます。






3. 実際にエディターを埋め込む
このため、このライブラリは全体的にセクシーであるため、接続が簡単です。
textareaをdivのスタイルで囲み、dojoType ..パラメーターを設定するだけで十分です:

". htmlspecialchars(($doc['body'])) ."


できた onclick ..イベントをサブミットに固定するために残ります:
<input type=submit onclick='console.log(dijit.byId('body').getValue().length)' value='". $lang['submit'] ."' style='width:100%'>

そしてすべて?
そうではありません)今、最も興味深いのはグリッチをキャッチすることです)
幸いなことに、それらの多くはありません)最初のバグは、onsubmitでのイベントの不適切な処理に関連しています(幸いなことに、Googleはこの質問に答えましたが、残念ながら、私は再びそれを見つけることができませんでした)。
2番目は、一般的なバグではありませんが、テキストを解析するときに、一部の文字がHTMLコードに置き換えられます。 たとえば、YouTubeからビデオへのリンクを挿入するときに一般的に干渉するもの。
これは非常に簡単に修正され、次の行をコメントアウトするだけです。
//str = str.replace(/&/gm, "&").replace(/</gm, "<").replace(/>/gm, ">").replace(/"/gm, """);
RichText.jsライブラリのescapeXml関数

さて、最後に、ディレクトリにあるファイルの数を減らすために、必要なライブラリのみをfirebugで選択できます。

この方法で準備したライブラリは、 ここに投稿しました
その結果 、比較的小さく(約200 kb)、非常にセクシーなエディターを得ました)

次のようになります。
http://msexy.ru/data/pictures/dojo_editor.png

そして、ビジネスでエディターを突く
このサイトで可能

ああ、私は一瞬を完全に忘れました。 ユーザーがバッファを介してではなく、手動で挿入するリンク(http://、hrefなし)-次のような簡単な処理を挿入できます。
function url_process($text) {
if ( strstr($text,"\"http")){
return $text;
} else{
$text = preg_replace ('/http:\/\/([^",)<>\s]*)/', "\\1", $text);
}
return $text;
}


UPD

コメントでは、 スタークは別のエディターを提案しました: nicedit Just 30! kb

その結果、私は道場からアイコンを添付することで自分のウェブサイトに埋め込みました)

アイコンはここから個別にダウンロードできます。

Source: https://habr.com/ru/post/J17750/


All Articles