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で、これもデフォルトプラグインだった）が、一番の問題点は、入力されたデータをどう扱えるか、だった。 それ以外の使い方はなんかおかしなドキュメント(懇切丁寧だが、同じことを何度も何度も繰り返して書いてあるコピペプログラミングみたいな感じ）に書いてあるし、日本語でもうすこしまと
PHPコードのボトルネックを調査して改善した話
ボトルネックと向き合う ハローみなさん、エジソンです。 みなさんは、PHPで楽しくプログラムしていますか？ 僕は先日、とある機能で、パフォーマンスが著しく悪く、実用に耐えられない箇所を発見しまして、その箇所の修正に取り組んでいました。その時に得た知見を、本記事で披露したいと考えました。 ある全体の作業工程の中で、特定の工程が遅い事により、全体に影響を及ぼしてしまう事を、ボトル（首）が細い事で水の通りが悪くなる事になぞらえて、ボトルネックと呼びます。 ボトルネックの特定 ボトルネックを解消する手順は以下の通りです。 ボトルネックとなっている箇所を特定する 該当箇所を修正する 修正後にどれだけ処理速度が改善したかを確認する 期待されている場合は、OK。そうでなければ、「1」に戻って再調査。 一番やってはいけない事は、「2」から取りかかる事です。はやる気持ちをぐっとこらえて、まずはボトルネックと
DMARC をなめるな - 弁護士ドットコム株式会社 Creators’ blog
Gmailが「メール送信者のガイドライン」を改訂し、なりすましメールへの対策を強化する旨を発表しています。今までは原則、なりすましメール対策の有無にかかわらず、メールはいちおうは届いていました。しかし今後は、なりすましとみなされたメールは届かなくなる方向に向かいつつあります。 なりすましメールとみなされないようにするために、メール送信者には、「メール送信ドメイン認証」への対応が求められます。メール送信ドメイン認証の技術には、主に以下の3つがあります。 SPF: Sender Policy Framework (RFC 7208) DKIM: DomainKeys Identified Mail (RFC 6376) DMARC: Domain-based Message Authentication, Reporting, and Conformance (RFC 7489) SPFは従来
よくある質問 | reCAPTCHA | Google for Developers
reCAPTCHA Enterprise を使用するべきですか？ reCAPTCHA Enterprise では、1 か月あたり 100 万件の評価が無料で、追加機能もご利用いただけます。ほとんどのデベロッパーには、リアルタイム分析などの その他の機能から始めることをおすすめします。 こちらから無料で開始できます。 reCAPTCHA をサードパーティのソリューションで使用できますか？ はい。reCAPTCHA（非 Enterprise バージョン）と reCAPTCHA Enterprise の両方を使用できます。通常、サードパーティ ソリューションは公開鍵と、秘密鍵または API キーを要求します。秘密鍵と API キーは、信頼できる第三者にのみ渡してください。 v2 または v3 から reCAPTCHA Enterprise に移行するにはどうすればよいですか？ 移行プロセスが完了
【Google推奨】reCAPTCHAのロゴを非表示にする方法【画像で解説】 | JIKORICH
reCAPTCHAを非表示にするならGoogleの指示に従いましょう reCAPTCHAを非表示にする方法は大体この３つ。 直接faunction,phpにコードを追加する方法プラグインを使用する方法Google公認の方法←本記事で解説 本記事で解説するのは、３番のGoogle公認の方法です。 なぜGoogle公式の方法が良いのか理由を解説すると、 functions.phpにコードを記述する方法 初心者向けとは言えないので別の記事で解説予定。 プラグインを使用する方法 プラグインの使用であれば、初心者でも簡単に導入することができます。 しかし、 ロゴが非表示にならなかったケースもあるそうで、実際僕もロゴが表示されたまま、原因を突き止めようにも初心者なので問題がどこにあるかもわからず・・・ 結局断念しました。 その他のプラグインとの相性もあったりするので、うまく非表示になるか調整までに時間
WordPressマルチサイトで、複数の子サイトを１つのテーマで管理する方法
WordPressのテーマを配布、プラグイン解説や日本語版の配布、テンプレートタグによるカスタマイズ方法を紹介、WordPressのリファレンスサイトを目指しています。 WordPressのマルチサイトはサブドメイン形式と、 サブディレクトリー形式があります。 サブドメイン形式を中心に説明しますが、 サブディレクトリーに対応するソースはその都度記載します。 目次 はじめに メリット・デメリット 注意事項 ディレクトリー構成 サブドメイン名フォルダ内のディレクトリーとファイルの役割 子テーマ直下のディレクトリーとファイルの役割 サブドメイン名を取得して、子テーマのfunctions.phpに記述する場合 マルチサイトの管理サイトが、サブドメインではない場合 マルチサイトの管理サイトが、サブドメインである場合 サブディレクトリー名を取得して、子テーマのfunctions.phpに記述する場合
BurpSuiteの使い方 ②通信の書き換え編 | 株式会社レオンテクノロジー
こんにちは、ヒロセです。 この記事では、Webアプリケーションのセキュリティ診断に使用されるローカルプロキシツール「Burp Suite」の基本的な使い方について記載します。 今回は、HTTP通信の書き換えについて記載します。前回(BurpSuiteの使い方 ①初期設定編)の記事はこちら。 以下の方に向けて記載しています。 脆弱性診断に興味がある人 自分で自身のサイトを簡易診断したい人 Burp Suiteの基本的な使い方を学びたい人 ※なお、本記事の内容を自身の管理するサイト以外で絶対に行わないでください。不正アクセスとみなされる場合があります。 目次 やられサイトをダウンロードする やられサイトをローカルで動作させる ブラウザからやられサイトにアクセスする HTTP通信の書き換え まとめ やられサイトをダウンロードする 脆弱性診断は、診断を許可されたサイトもしくは自身で管理するサイト以
WordPress パーマリンク リライトルール
デフォルト（基本のパーマリンク）では上記のようにパラメータから成るクエリ文字（クエリ変数）を使った構成になっていて「Ugly パーマリンク」 とも呼ばれています。 WordPress（のシステム）は URL に含まれるこれらのパラメータ（クエリ変数）を基にどのページを表示するかを特定することができます。 http://example.com/?p=123 の場合、p は投稿の ID を意味するので WordPress は投稿の ID が 123 の投稿を表示します。 パブリッククエリ変数 標準で利用可能なパラメーター（パブリッククエリ変数）は WP クラスのプロパティ $public_query_vars として wp-includes/class-wp.php に定義されています（以下は version 5.2.2 の例です）。 カスタム投稿タイプやカスタム分類を設定している場合は、それ
【WordPress】コメント一覧のHTMLをカスタマイズする例｜Walker_Commentクラス
【WordPress】コメント一覧のHTMLをカスタマイズする例WordPressには、ツリー状のHTMLデータ構造を処理するWalkerクラスがあり、コメント一覧のHTMLは、Walkerクラスを継承しているWalker_Commentクラス内で処理されています。 また、Walker_Commentクラスはwp-includes/class-walker-comment.phpファイルで定義されています。 例では、そのWalker_Commentクラスを継承したサブクラスで、コメント一覧のHTMLをカスタマイズします。 カスタマイズする箇所以下、例でカスタマイズする箇所となります。 コメント投稿者名のフォーマットを変更コメント投稿者のアバターを削除コメント日時のリンクを削除コメント時刻を削除コメントリプライボタンを削除コメント本文内でHTMLタグの利用不可一部のHTMLタグを変更一部のc
Wordpressの管理画面でコメント一覧に列を追加してカスタムフィールドを表示させたりソートしたり列を削除したりする方法｜I'll be NET
Wordpressの管理画面のコメント一覧には、通常下記の項目が表示されます。 投稿者 コメント内容 返信先 投稿日 コメントフォームでカスタムフィールドを入力させている場合など、管理画面のコメント一覧上に入力されたカスタムフィールドの情報を表示させたり、また不要な項目を除去するには、function.phpの編集が必要です。 //管理画面のコメント一覧にカスタムフィールドを表示する function my_manage_comment_columns($columns) { //列を追加 $columns['nickname'] = "ニックネーム"; //"nickname"列のラベルを「ニックネーム」にする return $columns; } add_filter( 'manage_edit-comments_columns', 'my_manage_comment_columns
webエンジニアの「業務委託単価表」が公開 - Digital Shift Times（デジタル シフト タイムズ） その変革に勇気と希望を
Resource株式会社は、3,000の実績データをもとにwebエンジニアの業務委託単価表を公開したと発表した。 現在の単価が適正単価なのか、次の単価レンジに行くにはどうすれば良いか、開発発注プラットフォーム「ISSUE」の実績を使い調査したとのことだ。 2022年11月ではISSUE上に1,800人以上のユーザーデータと2,000以上の単価診断結果があるという。またISSUEではクラウドソーシング形式で企業とマッチングすることにより、報酬を獲得することができる。その際の契約時給単価を今回の相場作成の参考にしているとのことだ。 ・1,000〜2,000円 インターン・アルバイトレベル。プログラミングを始めたての学生や勉強中の人が対象になる。実務経験としては0〜1年ほどの人が当てはまる。プログラミングの概念を学んでいる段階なので、外部APIなどの公式ドキュメントを理解するのが難しい場合もある
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TinyMCE Docs | Text Color Plugin
Self Hosted WYSIWYG HTML Editor | Trusted Rich Text Editor | TinyMCE
【WordPress・VSCode】PHP Intelephense拡張でWordPress関数がエラーとして扱われてしまう問題解決方法
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
WordPressコメント周りのカスタマイズ | KumaTechLab
WordPressマルチサイトにおいて、WordPress関数を外から呼び出す時のエラー回避方法