HTMLエディタを自作！「簡易的なHTMLエディタをhtml/css、javascriptで作成する方法」
現在、自作でホームページのCMSを作成しているのですが、記事作成画面となる「エディタ画面」も自作してみましたので、ここでまとめておこうと思います。 先に画像を貼っておきます。下のような簡易的なやつになります。 htmlのtextarerが入力画面となっていて、隣にあるdiv要素で作ったboxに入力した内容が反映される感じになってます。 Ajaxのような非同期通信にも見えますが、そんな高度な事はしておらず、javascriptのkey up関数で、キーボード入力が検知（キーが上がった瞬間）されれば、textareaの内容がdiv要素に渡されるだけの、簡易的なプログラムになります。 簡単なHTML/CSSとjavascriptで作成できるので、しょぼいですがなにかの参考になれば幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset
超爆速でWYSIWYGエディターを組み込む - Qiita
こんなオーダーが。 「いい感じで記事をかける機能導入して！」 「ヘッドレスCMS使えばすぐできるから！」 ほほう。では軽く調査しよう。 〜数日後〜 いや、簡単にはできないですぜ。少なくとも使用するメリットないっすね。 そもそも、ランニングコストかかりますぜ。 「じゃあいい感じに導入して！」 「できるだけ早くね！」 そんなこんなで、超爆速でWYSIWYGエディターを組み込んだ話を。 初めに 既存システムは割とレガシー。 PHP 7.2 Laravel Framework 7.25.0 MySQL 5.7 jQuery 3.5.1 Bootstrap そもそもWYSIWYGエディターとは？ WYSIWYG（アクロニム: ウィジウィグ）とは、コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容（特に印刷結果）が一致するように表現する技術。What You See
公式ドキュメントよりも詳しいTinyMCEの使い方（基本編）
サンプルとデモページで実際の動作を通して学ぶTinyMCEの設定方法 以前の投稿「PukiWikiをビジュアルエディタ（TinyMCE）で編集できるプラグインを作成」で、TinyMCEについて学びました。その際の知見をフィードバックできればと思い、まとめを作りました。 「はじめてTinyMCEを使う」「TinyMCEをとことんまでカスタマイズしたい」といった方々にお役に立てたら幸いです。 TinyMCEとは TinyMCEとはリッチエディタの一種です。 リッチエディタとはざっくり言えば実際の見た目と同じ画面で編集できるエディタのことです。モニター画面と印刷結果を一致させるために使われたWYSIWYG（ウィジウィグ）が有名です。html用途ではTinyMCEの他にCLEditorもよく知られています。 TinyMCEはHTML用のリッチエディタで、HTMLタグを打つこと無く装飾されたWebペ
L'eclat des jours(2018-09-11)
_ TinyMCEの使い方 SimpleMDEをしばらく使っていたが色を付けたいというような要望があって、そりゃマークダウンにはないし、かといって直接spanを書かせるわけにもいかないし、というわけでいろいろWYSIWYG系のブラウザ用エディターを調べて、結局TinyMCEに落ち着いた。 が、ドキュメントがいまいちわかりにくくて、どのプラグインが追加有償なのかといったこともなかなかわかりにくい。でも、まあ、そのあたりは解決して（一番使いたいのはTextColorでこれはデフォルトプラグインだし、次に使いたいのはTableで、これもデフォルトプラグインだった）が、一番の問題点は、入力されたデータをどう扱えるか、だった。 それ以外の使い方はなんかおかしなドキュメント(懇切丁寧だが、同じことを何度も何度も繰り返して書いてあるコピペプログラミングみたいな感じ）に書いてあるし、日本語でもうすこしまと
見出しから目次を生成するJavaScriptのライブラリ「toc.js」を使ってみる
ページ内にある見出しから目次を自動生成するJavaScriptのライブラリ「toc.js」を使ってみます。 設定方法 Githubのページから一式をダウンロードします。 ダウンロード後にファイルを解凍して、ターミナル(Windowsの場合はコマンドプロンプト)でtoc-masterへ移動します。 cd 設置したディレクトリまでのパス/toc-master 必要なパッケージをインストールします。 npm install パッケージのインストール完了後、ビルドを実行して必要なファイルを生成します。 npm run build distディレクトリが生成されるので、その中にあるtoc.bundle.jsを読み込ませます。 <script src="toc.bundle.js"></script> 目次を追加する要素を用意します。 <div class="toc" data-toc="h1,h2,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TinyMCE Docs | Text Color Plugin
Self Hosted WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCE
jsコンソールさんにAjaxのgetが非同期だよ(？)と指摘される | monologue