今回は、Advanced Custom Fields（アドバンス カスタムフィールド）のテキストエリアに 「リンクの付け外しだけ」を追加したい！」 を WYSIWYG エディター を使って実現します。 ただ、カスタムフィールドの WYSIWYGエディター を使うと、触られたくない無駄なツールがたくさんありますよね。 そこで、ツールバーに表示する機能を制限すれば良いというわけです。 デフォルトのWYSIWYGには「Full」と「Basic」がある カスタムフィールドの WYSIWYGエディターを作成することで、2つの標準メニュー（「Full」と「Basic」）が表示されるようになっています。 それぞれのツールバーを見ていきましょう。 WYSIWYGの「Full」 WYSIWYGの「Basic」 WYSIWYGエディターのツールバーを任意の機能のみ表示する では、ここから無駄なツールを取り除い
はじめに リッチエディタ（WYSIWIG）でよく出てくるのは、やはり「CKEditor」「Quill」「TinyMCE」あたりがよく聞くのですが、今後のためにも商用無料のMITライセンスかつオープンソースで利用出来そうなものを探していて、最終的に「Summernote」が色々な面で良さそうということで深堀りしているのと、単体設置方法の記事があまり無いなぁってことで、最近ド忘れも多いのでうっかりを無くすためにも基礎からメモ。 ちなみにデモは公式サイト（Summernote）へ Summernote選定の理由 ・商用無料のMITライセンスかつオープンソース ・様々なシーンで親和性が高そう（管理画面等でも使いやすそう） ・ツールバーが色々カスタマイズできそう ・オリジナル機能のボタンが簡単に作れそう ← 実際にはここで詰まった ・画像が特にアップロードせずに使うことができるっぽい ・動画もアップ
はじめに タイトルが長くなってしまいましたが、タイトルの通りなんですwww 前回、Summernoteのツールバーをカスタマイズしましたが、簡易な更新機能などを持たせたシステムのようなケースですと、WYSIWYG特有のコピペに対するスタイルの引継ぎ機能が余計な作業を発生させる原因になったりします。 プレーンなテキストでコピペしたいのにできないから、一旦メモ帳などにコピペして改めてエディタにコピペしたり、エディタにコピペした後クリーンボタンなどでプレーンテキストにしたりなど… 元からプレーンテキストでコピペされるのであればしなくていい作業が発生してしまいます。 （本格的なCMSの場合はあったほうが良い場合ももちろんあります） 今回はWordやブラウザからSummernoteのエディタ部分へコピペする際に、プレーンテキストでコピーされるようにカスタマイズしていこうと思います。 前回の記事の内容
無料で使えるHTMLエディタならDD Editorをご利用ください。ドラッグ＆ドロップの簡単操作で、HTMLメールを始めとするHTMLコンテンツを誰でも簡単に作成可能です。作品の保存・呼出し・ダウンロードも無料国産のWYSIWYGエディタをどうぞご活用ください。
メール不達のお知らせ 2018年11月1日まで、本サイトのお問い合わせメールが機能しておらず、メールを受け取ることができませんでした。この期間内にお問い合わせ頂いた方は、大変お手数ではございますが、再度お問い合わせページからご連絡ください。 Joomla!で記事を書く時に利用するのが「WYSIWYGエディタ」です。ホームページを作るためにはHTMLやCSSの知識が必要になりますが、WYSIWYGエディタを使えば知識のない一般のユーザでも自由にコンテンツを作る事ができるようになります。なお「WYSIWYG」とは「What You See Is What You Get」の頭文字をとった物で「見たままが得られる」という意味があります。 WSIWYGエディタにはたくさんの種類があり、Joomla!に標準搭載されているのは「TinyMCE」というエディタです。このTinyMCEは、Joomla!と
以前、Summernoteのツールバーのカスタマイズ記事を投稿した際に、ついでにSummernoteのエディタエリアの高さ設定をメモしましたが、ついでにその他の高さ設定をメモ。 以前の記事はこちら 以前の記事で このようにheight: 400と記述することで初期表示が400pxの高さで表示されることを説明しました。 この場合はエディタの記入が長くなっても高さ400pxから自動では変わらず、スクロールするかエディタ下部のつまみをドラッグしてエディタの高さを広げたりするかしかできません。 例えば、初期表示はある程度の高さで表示して、記入がエディタエリアを超えると自動的にエディタの高さが広がっていくようにすることもできます。 その場合は
はじめに 前回設置して日本語化まで済ませた「Summernote」ですが、自分のみで使うにはこのままでも良いのですが、お客様等に簡易なシステム構築して納品するような場合にはユーザービリティーの観点からもツールバーのカスタマイズは必須になってきます。 その為にはまず使える機能を理解しておこうということで、今回は標準機能で使えるボタンの説明というか備忘録。 前回記事の内容はこちら。 デフォルト状態で表示されるボタンやその他使えるボタンを、機能を含めて説明していきます。 バージョン情報 summernote lite var 0.8.18（2024年4月現在） 1. 標準表示のボタン（ツールバー内） インストール直後にツールバー内に表示される各種ボタンです。 ボタン システム名 機能
WYSIWYGエディタライブラリをMantineのRichTextEditorに変更した話 #2：ライブラリ選定
エディタライブラリの変更について こんにちは！ テイラーワークス プロダクトチームの谷本です。 前回に引き続き、自社プロダクトで使用しているWYSIWYGエディタのライブラリを変更した際の話をまとめていきます。 本記事は連載構成になっております。 本連載の構成 #1：概要 #2：エディタライブラリ比較、選定 ←本記事です📝 #3：エディタコンポーネント実装（UIカスタマイズと機能拡張） #4：旧エディタとの互換性対応、まとめ 今回は、ライブラリ比較から選定までの話をまとめます！ ライブラリ選定 ライブラリ比較検討 前提条件 1.Next.js+TypeScript対応していること 2.機能拡張できること 3.HTMLで保存できること ライブラリ比較（各情報は2023年2月時点） ライブラリ UI提供 導入しやすさ 拡張性 日本語対応 メモ
こんにちは。株式会社 Sally エンジニアの @piesukeです。 私たちは、マーダーミステリーを楽しむためのアプリ「ウズ」と、マーダーミステリーを制作してウズ上で遊べることが出来るアプリ「ウズスタジオ」、マーダーミステリーを検索できるサイト「マダミス.jp」を開発・運営しています。 私が最近やって良かったマーダーミステリーは「死神はトリックをかたらない」です。 今回は、弊社で採用しているテキストエディタ「Quill」の紹介と、ペースト時の書式設定カスタマイズ方法を解説します。 背景 弊社ではマーダーミステリーのアプリを運営していますが、一般的にゲームのようなグラフィカルな画面ではなく、文章が主役のアプリであり、装飾の重要性が高いです。また、作家の方々が文章を書く際に、装飾を簡単に行えるようにすることが重要でした。 元々文章の装飾・表示には マークダウン を使用していましたが、以下の点
開発しているエンタープライズWebアプリケーションで、wysiwygエディタを用いたUIコンポーネントを作成することとなったため、JSライブラリの選定を行いました。 同じようにwysiwygエディタの利用を検討している方々への情報共有のため、調査結果や所感を書いてみました。 前提 Vue2での利用を前提に調査しています。 Quill 機能 インラインコンテンツ 太字表記 文字色変更 フォント変更 インラインコード 斜体 リンク 文字サイズ 取り消し線 上付き文字/下付き文字 下線 ブロックコンテンツ 引用 見出し H1～H6まで選択可能 インデント 箇条書き テキストの配置（中央揃え、右揃え、左揃え） テキストの方向 オプションで利用する機能を選択することができる。 更に、ツールバーで利用できる機能とエディタ内で利用できる機能を分けることも可能。 （例えば、ツールバー上では太字ボタンを非表
はじめに 前回、Summernoteのエディタ部分へWordやブラウザからコピペする際に、プレーンテキストでコピーされるようにカスタマイズする方法を解説しましたが、蛇足だったかなぁと反省。 ただ、自分的には必要な機能だったのでメモとしては有りかなぁということで、今回はSummernoteでオリジナル機能を持たせるために専用のボタンを作成してツールバーに表示する方法をメモっていこうと思います。 前回の記事の内容はこちら 1. 基本のソース 以前投稿した「【WYSIWYGエディタ】Summernoteのツールバーカスタマイズ」のソースです。 <!DOCTYPE html> <html lang="ja"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Summernote Test</t
Draft.jsでのWYSIWYGエディタ作成
はじめに Draft.jsはFacebook謹製のリッチテキストエディタを作るためのフレームワークです。 詳しい説明はこの記事が丁寧に書いて下さっているので割愛します。 https://qiita.com/YudaiTsukamoto/items/264f333e90a1edb818a3#はじめに 今回の記事は太字や下線などの文字装飾、文字サイズの変更、画像、リンクの挿入、文字揃えの機能を導入する方法のまとめになります。 デモ 全体 装飾などがない雛形としては以下のコードになります。 EditorState.createEmpty()で空白のeditorStateを作成し、それをuseStateで管理しています。 import * as React from 'react'; import './style.css'; import { Editor, EditorState, } fro
はじめに こんにちは。kosukein38です。 業務でRails4系のアプリケーションにWYSIEIGエディタを導入する必要があったため、そのライブラリの導入手順やできることについて、まとめておきます。 ※知識の整理目的も含まれるため、少々冗長になる可能性があります。適宜読み飛ばしていただければと思います。 こんなのをメールの本文入力フォームに導入します。 対象者 WYSIEIGエディタが何かということを知りたい方 Rails4系のアプリケーションにWYSIEIGエディタを導入する方法が知りたい方 Rails6系以降はTrixというWYSIEIGエディタをベースにした、Action Textというリッチテキスト機能が導入されているため、Rails6系以降のアプリケーションに対してはこちらを利用するのが良いかと思います。 結論 gem ckeditorとその拡張機能を使って、Rails4系
はじめに 自分のみが使うような場合は、ツールバーをカスタマイズする必要は特にありませんが、仕事でお客様に簡易なシステムを提供したりするようなケースだと、ユーザービリティの観点からもツールバーのカスタマイズは必須だと思います。 「何でもできる」は魔法の言葉ですが、「言うは易く、行うは難し」ってやつです。 あくまでも私の私見ですが、仕事をしていて思うのは今までの納品先のお客様の9割方がネットリテラシーがさほど高くない…というか、はっきり言って低い方ばかりでした。 これは業種にも左右されるのかもしれませんが、ソースコードをあれこれできるお客様に私の場合は出会ったことがほぼありません。 といこともあり、私の場合はカスタマイズとは言っても機能制限の方が主になってきます。 お客様の利用環境や納品するものに合わせてカスタマイズが必須になってくるのです。 おっと、このままではグチっぽくなってしまうので、前
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ACFのWYSIWYGエディターをリンクの付け外しだけにするカスタマイズ - Qiita
【WYSIWYGエディタ】Summernoteの使い方（日本語化） - Qiita
【WYSIWYGエディタ】Summernoteでコピペした時プレーンテキストでコピーしたい - Qiita
HTMLエディタならDD Editor | 無料で使える国産WYSIWYGエディタ
WYSIWYGエディタを使いこなす - 基本編 - Joomla!の道しるべ
【WYSIWYGエディタ】Summernoteのエディタの高さ設定 - Qiita
【WYSIWYGエディタ】Summernoteのボタンの種類 - Qiita
WYSIWYG エディタ「Quill」の紹介と、ペースト時の書式設定をカスタマイズする方法
WYSIWYGエディタのライブラリを比較する - Qiita
【WYSIWYGエディタ】Summernoteのオリジナルボタンの作り方 - Qiita
RailsアプリケーションにWYSIWYGエディタ（CKEditor）を導入する - Qiita
【WYSIWYGエディタ】Summernoteのツールバーカスタマイズ - Qiita