Trusted WYSIWYG editorFamiliar content tools ready to use out-of-the-box Install TinyMCE to add a fully-featured, sleek and intuitive rich text editor to your app – in just a few lines of code.
とある友人に教えても経ったTinyMCEという WYSYWIGWYSIWYG な HTML エディタライブラリがやばそう。 JavaScript で記述された LGPL でオープンソースな クロスプラットフォームの 多言語対応もしてて 簡単に使える ライブラリ。似たようなものに htmlArea というのがあって結構昔に話題になってたんですが、導入がめんどくさかったりブラウザによってはまともに動かなかったりとか色々面倒な感がありました。TinyMCE の方はと言いますと、Installation instructions にもあるとおり、 <html> <head> <title>TinyMCE Test</title> <script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script> <script type=
この投稿は 12年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 最近続いているWordPressエントリーの続きです。ところでみなさん、HTMLタグは好きですか? 僕はというと、特に好きとかはなくて、「セマンティックWebを実現するために大事だとは思うけど、書きたくはない」という感じです。 さて、WordPressにはTinyMCEというWYSIWYGエディタがついています。これはWordPressの中の人ではなくMoxiecodeというスウェーデンの人が作ったオープンソースのソフトですね。 今回はいかにタグ打ちをせずに済ませるかという点にしぼってご説明します。たぶんリンク集みたいになると思いますが、カスタマイズの方法は大体下記の通りです。 TinyMCEでの見映え自分のブログと統一する(初級) TinyMCEに元からあるボタンを追加す
TinyMCE for Movable Typeは、標準的CMSであるMovable Typeの更新機能を、飛躍的に高める高機能WYSIWYGエディタです。誰でも無償で利用でき、インストールも簡単。HTMLの知識のない方でも、ワープロのように簡単に更新が行えます。ホーム 投稿を、より簡単に…、より美しく、それがTinyMCE for Movable Type ようこそ、TinyMCE for Movable Typeの世界へ TinyMCE for Movable Typeは、Movable Typeの更新機能を、飛躍的に高めるAjaxな高機能WYSIWYGエディタです。誰でも無償で利用でき、インストールも簡単。HTMLの知識のない方でも、ワープロのように簡単に更新が行えます。 はじめに このサイトは「TinyMCE for Movable Type」の公式サイトです。 TinyMCE f
TinyMCE Advancedの設定画面 TinyMCE Advancedのダウンロード TinyMCE Advancedのダウンロードは、WordPressの本家からダウンロードしてください。 ダウンロードはこちら→WordPress › TinyMCE Advanced « WordPress Plugins TinyMCE Advancedの使用方法 本家サイトからダウンロードし、/wp-content/plugins/フォルダの中にアップロードします。 「管理画面」→「プラグイン」で有効にし、設定は、「管理画面」→「管理」→「TinyMCE Advanced」をクリック。 必要なボタンをここで追加することが出来ます。 ※ビジュアルエディタを使用するときは、 「管理画面」→「ユーザー」→「自分のアカウント」で、「ビジュアルエディタを使用する」にチェックをいれないと、 ビジュアルエデ
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WordPressの投稿機能(ビジュアルエディタ)は、デフォルトの状態では次の操作ができない。 表の挿入、または編集YouTube 動画コードの挿入画像の回りに余白を挿入など、コンテンツの読みやすさを高めるための操作ができないと、HTMLでタグを直打ちしなければならなくなる。これでは、せっかくコンテンツマーケティングを始めたばかりの初心者には大変である。 そこで、今回ご紹介するのが「 TinyMCE Advanced 」というプラグインだ。 それでは早速、TinyMCE Advanced の設定方法と使い方をご紹介していこう。
WordPressのビジュアルエディタに自作したボタンを追加する方法についてのメモです。 TinyMCEのプラグイン作成手順メモにもなっています。 ver2.5以下は確認してないのでどうだか分かりません。多分TinyMCEのバージョンが違うので動かないと思います。 ver2.7は動きました。 ver2.9も動きました。 ©Fugue Icons サンプルとして▼こういうテーブルをボタン1発で追加出来るようにします。 Table Sample Caption Name Address プラグインとかで記事のテンプレートを作っておくという手もあるけど、ボタン挿入の方が汎用的に使えるので楽です。 エディタへのテキスト挿入以外にもいろいろな事がやれます。 結構面倒くさいので初心者向きではありません。 あとついでにエディタ内のスタイル変更についても解説しています。 なお、この方法はTinyMCE A
TinyMCEを使ってブログ記事やウェブページのフィールドを編集可能にします。 「概要」フィールドやカスタムフィールドで作成したフィールドにも適用可能です。 また利用するWYSIWYGエディタの機能も簡単に調整することができます。 記事 2008.09.29: TinyMCE-MTPlugin とは 2008.09.29: TinyMCE-MTPlugin の使い方 2008.09.29: TinyMCE-MTPlugin のスクリーンショット 2009.06.30: TinyMCE で利用するタグ リリース 2009.11.03: TinyMCE-MTPlugin 0.1.13 / 0.2.1 をリリース 2009.09.03: TinyMCE-MTPlugin 0.2.0ベータ1 をリリース 2009.06.30: TinyMCE-MTPlugin 0.1.11 をリリース 2009.
投稿テンプレートを作成!便利なWordPressプラグイン「TinyMCE Templates」の使い方 こんにちは、エンジニアの段田です。 WordPressで記事を書いていると記事構成がだいたい固まってくるので、「技術系記事」「まとめ記事」等で投稿の内容をテンプレート化したくなります。テンプレート化できれば1から書く手間が省けますので、効率化につながります。 今回は、そんな希望を叶えるプラグイン「TinyMCE Templates」を紹介します。 TinyMCE Templatesの導入方法 さっそく導入方法から見ていきましょう! ダウンロード まずは、WordPress Pluginsから「TinyMCE Templates」をダウンロードしましょう。 https://wordpress.org/plugins/tinymce-templates/ インストール つぎに、インストール
[要旨] htmlArea のライバルとでもいうべき Javascript で記述された WYSIWYG な html エディタを2つ紹介します。 [キーワード] htmlエディタ,WYSIWYG,htmlArea
トップ > Movable Type > 今日のMovable Type 4.2:MT4.2で無償で利用できるTinyMCEプラグイン登場!TinyMCE-MTPlugin 今日のMovable Type 4.2:MT4.2で無償で利用できるTinyMCEプラグイン登場!TinyMCE-MTPlugin 2008年10月 4日 03:40 といっても、TinyMCE-MTPluginは僕らが作ったモノではなく、ToI企画の天野 卓(あまの たく)さんの手によるものだ。 TinyMCE-MTPluginはすでにリリースされた、MT4系対応のTinyMCEプラグインにはない機能も加わった優れモノであり、以下の特長がある。 MTOSだけでなく、MTでも無償で利用できる インストールするだけで利用できる ボタンセットのカスタマイズが管理画面からおこなえる フィールド(カスタムフィールド可)に対
案件で要望があって調べたのでメモ。テーマのfunctions.php、または自作プラグインからTinyMCEをカスタマイズする方法です。TinyMCE関連のプラグイン要らんなコレ。 クライアントワークで毎回同じ設定にするわ!という方や、デザインとぴったりマッチしたエディタにしたい!という方、エディタの機能を制限したい方向け。 ボタンを追加する TinyMCEのボタンが入る行は4行用意されていて、1行目から順に mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4 のフィルターが用意されている。3行目と4行目は初期設定では空だ。ここでは3行目にスタイルの選択(styleselect)、フォントの選択(fontselect)、フォントサイズの選択(fontsizeselect)、テキストの背景色の選択(backcolor)を足している
TinyMCE3用に絵文字を入力できるプラグインを作った。 DoCoMo、au、SoftBankの3キャリアに対応。 ダウンロードはこちら↓ TinyMCE携帯絵文字入力プラグイン インストール方法: 1. ダウンロードしたtinymce_emoji_plugins.zipを解凍 2. emojidocomo, emojiau, emojisoftbankの3フォルダをtinymce/pluginsディレクトリに移動 3. TinyMCEを使いたいhtmlファイル中に以下のコードを記述 <script type="text/javascript" src="path/to/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "a
Character strings to demonstrate some of the Advanced Typography plugin’s features Select the characters in the list below and choose Tools → Typography → Enhance. Not really an arrow glyph: -> "Double tear-drop quotation marks and apostrophes aren't typographically elegant." But they should be honored in a code-fragment: "true". (c) symbol (tm) symbol 30C is 86F 🤖 Try out AI Assistant! Below are
TinyMCEとは 「見たまま編集」ができるHTMLエディターの一つ。 CKEditorと並ぶ代表的なWYSIWYG(ウィジウィグ)エディター。 仕様 CakePHPで作成しメルマガ編集画面に、TinyMCEを実装する。 エディター内に携帯絵文字プラグインを実装する。 導入方法 TinyMCE をダウンロード。Download の Main Package にある tinymce_x_x_x_x.zip をクリック。 解凍後、tinymce/jscripts/ディレクトリ内にあるtiny_mceディレクトリのみを、 CakePHPの app/webroot/jsディレクトリ内に配置。 日本語化パッケージをダウンロード。[Japanese] のチェックボックスを選択し、一覧の下にある[Download]ボタンをクリック。 解凍後、tinymce_lang_packディレクトリ内の3つの
LGPLの下で配布されているMoxiecodeのTinyMCE(Tiny Moxiecode Editor)は、HTMLタグを知らないユーザでもHTML形式でフォーマットされたテキストを入力できるJavaScriptプログラムだ。 TinyMCEは、多数のブログシステムやコンテンツ管理システムにバンドルされている。自作のWebアプリケーションでTinyMCEを使うなら基本設定を利用するのが手っとり早いが、詳細設定は依存関係や競合関係の解決を行うために複雑になる可能性がある。本稿では、WebページにTinyMCEを統合するヒントとアドバイスをいくつか提供する。 TinyMCEは、多くのGNU/Linuxディストリビューション内のパッケージや、zipまたはtar/gzipのアーカイブとして入手できる。プログラムをインストールするには、TinyMCEのディレクトリ構造をWebサイトのルートディレ
2月頃、リッチテキストエディタの TinyMCE のXSS脆弱性を報告しました。 特にセキュリティの修正をしたといったアナウンスはありませんが、数日前に公開された4.3.9でこの問題が修正されています。Twitterのプロフィールにも、「World's #1 most popular open source #WYSIWYG editor」 とあるくらい、世界的にも非常によく使われているリッチテキストエディタのようですので、更新を促すためにこの記事を書きます。 XSS脆弱性は 4.3.8 以下のバージョンにあります。 僕の知る限りでは、TinyMCEのPreview Plugin機能を使っていなければ影響を受けません。 この機能を呼び出さないようにするか、4.3.9以上に更新してください。 これ以下は、技術的な説明になります。この脆弱性の発生原因は、技術的にも少し面白いです。 発火する場所
TinyMCE pluginでは、tinymceconf.csを置くことで、TinyMCEの表示をカスタマイズできます。で、標準ではいっぱい表示されてうざいので、適当に選んでみました。こんな感じの1行のツールバーが表示されます。 あと、日本語ファイル(ja.js)も直してます。 以下の内容をtinymceconf.csというファイル名でTracEnvのtemplatesフォルダに保存してください。なお、 force_p_newlineはEnterキーを押したときに<P>ではなく<BR />を挿入する「Enterキーを押したら改行だろう」というWord好きの人向けの設定となっています。「Enterキーを押したら<P>に決まってる!」というHTMLエディタ好きの人は、trueに設定してください。 <script language="javascript" type="text/javascri
WYSIWYGで編集できるエディタは、一般ユーザをはじめ、HTMLに不慣れな人でも簡単に文字装飾が施せるので便利だ。単なるテキストでは分かりづらい情報でも、装飾や文字の配置を工夫することでコンテンツを分かりやすくすることができる。 様々なWYSIWYGエディタが存在するが、Webブラウザ向けに高機能なものを探しているならこちらをどうぞ。 今回紹介するオープンソース・ソフトウェアはTinyMCE、Webベースの高機能WYSIWYGエディタだ。 TinyMCEはMOStlyCEという名称でMambo CMSのコンテンツ編集機能として利用されている。十分に多機能なCMSでも使えるレベルということだろう。ツールバーの項目が数多く、相当な機能が実装されているのが分かるはずだ。 単純な文字装飾はもちろん、ファイル管理、画像の簡易編集と管理、XHTML対応、MS Wordの貼付け対応、プラグイン機能など
英語のマニュアルの翻訳 † Category:TinyMCE TinyMCEとは TinyMCEのインストール サンプル 言語パック リファレンス TinyMCEの設定 TinyMCEを操作するボタン類について TinyMCEのプラグイン TinyMCEのJavaScriptのAPI? TinyMCEのコマンド|TinyMCE/Command? カスタマイゼーション TinyMCEのプラグインを作る? TinyMCEの言語パックを作る? TinyMCEのテーマを作る? TinyMCEを圧縮して送る PHPを使った場合? Microsoft.NETを使った場合? JSPを使った場合? ColdFusionを使った場合? 手引き PHPを使った例? Custom Filebrowserとして使う例? Ruby on Railsを使った例? Tips and tricks Turn TinyMC
サンプルとデモページで実際の動作を通して学ぶTinyMCEの設定方法 以前の投稿「PukiWikiをビジュアルエディタ(TinyMCE)で編集できるプラグインを作成」で、TinyMCEについて学びました。その際の知見をフィードバックできればと思い、まとめを作りました。 「はじめてTinyMCEを使う」「TinyMCEをとことんまでカスタマイズしたい」といった方々にお役に立てたら幸いです。 TinyMCEとは TinyMCEとはリッチエディタの一種です。 リッチエディタとはざっくり言えば実際の見た目と同じ画面で編集できるエディタのことです。モニター画面と印刷結果を一致させるために使われたWYSIWYG(ウィジウィグ)が有名です。html用途ではTinyMCEの他にCLEditorもよく知られています。 TinyMCEはHTML用のリッチエディタで、HTMLタグを打つこと無く装飾されたWebペ
WordPressのビジュアルエディタをさらに便利にするプラグインTinyMCE Advancedを紹介します。 記事投稿時にとっても役に立ってくれる機能がたくさんつまったエディタTinyMCEですが、まったく使わないボタンがあったり、逆に必要なボタンが表示されてなかったりしませんか? そういうときにこのプラグインが役に立ちます。 ダウンロード ダウンロードは以下から。WordPress本家のプラグインカテゴリです。WP2.7ならもちろん管理画面からインストール可能です。 WordPress.ORG:TinyMCE Advanced 使い方 ボタンの追加と削除 プラグインを有効化すると設定メニューにTinyMCE Advancedという項目がでてきます。これが設定画面へのリンクです。 操作はとっても簡単。ボタンを追加するときは下のボタンアイコンを上にドラッグ&ドロップする
前の投稿で紹介した、TinyMCE用TypePad絵文字プラグインを「TinyMCE Advanced」っていうプラグインで簡単にボタン追加できるようにしたよ こんな感じ この絵文字追加プラグインのファイルは、以下からダウンロードできます。 Download:tinymce-advancedemoji.zip インストール方法: 上記ダウンロードファイルを解凍してできたフォルダを、全てWordPressのプラグインフォルダに入れます 管理画面のプラグインの設定から「TinyMCE Advanced」のプラグインを有効にします これで、インストール完了です あとは、プラグインの設定画面を見てもらうと「Typepad Emoji」という項目が追加されていますので、 それを、上の「Drag and Drop領域」にドラッグアンドドロップして「Save Changes」を押下してください。そうする
TinyMCE という AJAX (JavaScript) ベースの HTML エディタのライブラリがある( オンラインのデモはこちら )。これは単体のエディタとして使えように提供されているものではなく、 Drupal などの CMS と連動できることを目的として作られている。もちろん自分でこのライブラリを利用する HTML ページを 1枚書いて、オフラインで使ってもよいのだが、せっかくなので PHP と連動させてみた。作った HTML ソースは任意のメールアドレスに送信できるようにした。 ツールバーのカスタマイズは実はそんなに難しくない。詳しくはコードを見ていただきたいが、独断と偏見の最小構成で以下のようにカスタマイズしてみた。 設置の仕方だが、ウェブサーバに tinymce などのディレクトリを作ってそこに TinyMCE を解凍して置き、以下のスクリプトを index.php などの
WordPress2.9のバージョンアップに伴い、TinyMCE Advancedが3.2.7にアップグレードされましたので、日本語版も追加修正致しました。 WordPressを2.9にバージョンアップした方は、ダウンロードしてください。 TinyMCE Advanced3.3.9 日本語版配布 TinyMCE Advancedの設定画面 TinyMCE Advancedのダウンロード TinyMCE Advancedのダウンロードは、WordPressの本家からダウンロードしてください。 WordPress › TinyMCE Advanced « WordPress Plugins TinyMCE Advancedの使用方法 本家サイトからダウンロードし、/wp-content/plugins/フォルダの中にアップロードします。 「管理画面」→「プラグイン」で有効にし、設定は、「管理画
WordPressはビジュアルエディターを用いて、一般的なレンタルブログと同じように、日記感覚で記事を書いていくことができます。 しかし、標準のエディターでは必要最低限のボタンしかありませんので、もうちょっといろんなボタンが増やせたらいいなと思うことがあります。 今回解説したいプラグインはビジュアルエディターを強化するプラグインのTinyMCE Advancedです。 簡単に導入ができますのでビジュアルエディターを使用してWordPressの記事を作成していらっしゃる方は是非導入を検討してみてください。 TinyMCE Advanced メニュー プラグインのインストール 設定方法 プラグインのインストール TinyMCE AdvancedはWordPressの公式リポジトリで公開されていますので、簡単に導入が可能です。 管理画面から簡単にインストールできますので、プラグインのインストール
WordPress2.8のバージョンアップで、TinyMCE Advanced3.2.4が配布されました。 TinyMCE Advanced3.3.9 日本語版配布 TinyMCE Advanced3.2.4の日本語版を作成いたしましたので、 TinyMCE Advanced3.2.4 日本語版配布からダウンロードしてください。 WordPress2.7のバージョンアップに伴い、TinyMCE Advancedが3.2にアップグレードされましたので、日本語版も追加修正致しました。 若干表示がおかしいので、今後修正バージョンが出てくる可能性があります。 TinyMCE Advancedの設定画面 TinyMCE Advancedのダウンロード TinyMCE Advancedのダウンロードは、WordPressの本家からダウンロードしてください。 ダウンロードはこちら→WordPress ›
WordPress3.1のバージョンアップに伴い、TinyMCE Advancedが3.3.9にアップグレードされましたので、日本語版も追加修正致しました。 WordPressを3.1にバージョンアップした方は、ダウンロードしてください。 TinyMCE Advancedの設定画面 TinyMCE Advancedのダウンロード TinyMCE Advancedのダウンロードは、WordPressの本家からダウンロードしてください。 WordPress › TinyMCE Advanced « WordPress Plugins TinyMCE Advancedの使用方法 本家サイトからダウンロードし、/wp-content/plugins/フォルダの中にアップロードします。 「管理画面」→「プラグイン」で有効にし、設定は、「管理画面」→「管理」→「TinyMCE Advanced」をクリ
このプラグインについて TypePadの絵文字をWordPressの記事で使えるようにするプラグインです 本文中にちょこちょこと現れているTypePadのこんな絵文字達を記事中に簡単に挿入させることを目的としました。 下記のようにTinyMCEのインターフェース上のエリアに動作するように作ってあります。 正常にインストールされると上記のようにTinyMCE上にアイコンが現れます。 そのためWYSIWYGエディタがTinyMCEで無い場合はご利用いただくことは出来ません。 もしよろしければ、一言でも残してくれたら励みになります コメントはこちらのページかもしくは掲示板にでもお願いします WordPress.org プラグインディレクトリからの取得 WordPress本家 WordPress.org のプラグインディレクトリにも登録させて頂いております。 WordPress管理画面から直接ダウ
WordPressのテーマを配布、プラグイン解説や日本語版の配布、テンプレートタグによるカスタマイズ方法を紹介、WordPressのリファレンスサイトを目指しています。 TinyMCE Advancedの設定画面 TinyMCE Advancedのダウンロード TinyMCE Advancedのダウンロードは、WordPressの本家からダウンロードしてください。 WordPress › TinyMCE Advanced « WordPress Plugins TinyMCE Advancedの使用方法 本家サイトからダウンロードし、/wp-content/plugins/フォルダの中にアップロードします。 「管理画面」→「プラグイン」で有効にし、設定は、「管理画面」→「管理」→「TinyMCE Advanced」をクリック。 必要なボタンをここで追加することが出来ます。 ※ビジュアルエデ
TinyMCEは、 LGPLのオープンソフトウェアライセンスに基づいてMoxiecode Systems ABらによって開発されている JavaScript/HTML WYSIWYGエディターです。 MODxやJoomla!・WordPressなど様々なオープンソースWYSIWYGエディターとして組み込まれています。 TinyMCE の特徴 組み込みやすい コードは数行書くだけでOK。 カスタマイズ可能 テーマ、プラグイン対応。block invalid elements and force attributes. クロスブラウザ Mozilla, MSIE, FireFox, Opera, Safari and Chrome. 軽い PHP/.NET/JSP/Coldfusion などによる GZip圧縮で、TinyMCE は 75% サイズを小さくでき、読み込みを速くすることができます
CSS HappyLifeさんで配布されている「emoddy(絵文字プラグイン)」をTinyMCEで使えるようにプラグイン実装中。 TinyMCEのプラグインとしての実装なので、Nucleus・MODx・WordPress・Xoops・ZenCart…その他諸々で使えると思います。まだ完成してないですが、CSS HappyLifeさんに製作報告をお届けしたいのでとりあえずエントリー立てておきます。 追記 TinyMCE3の日本語ファイルを作成したエニセンス社からも、絵文字プラグインがリリースされています。偶然、同じタイミングです。 もうひとつ追記。できたので公開します。でもエニセンスさんのプラグインを少し改造して汎用的に使えるようにしたほうがよさそうな気がしないでもないですが。エニセンスさんのはダイアログ開いたまま連続入力できたりするので使いやすいです。
<span style="font-size: x-large; color: #ffff00; background-color: #99cc00;">あいうえお</span> <span style="font-size: x-large"><span style="background-color: #99cc00"><span style="color: #ffff00">あいうえお</span></span></span> この種の記述の場合、きめ細かい処理ができるのはTinyMCEのようです。このへんは設定次第なところでもあるのですが、今のところFCKeditorにはこのような処理を行なうオプションは存在しないみたいです。TinyMCEの場合、使用できる/できないタグ要素はもちろん、属性レベルまで細かく設定が可能です。ユーザに使わせたくないタグを具体的に制御することができます。
WordPress内蔵TinyMCEのバージョンが少し古かったため、同じv2系統の最新版であり最終版でもあるv2.1.3に差し替えました。ついでにツールバー構成を整理してみたりコンテキストメニュー(右クリックメニュー)を使えるようにしたり、画像プロパティダイアログを拡張したり、日本語化してみたり、TinyMCE本来の機能に対し多少チューニングを加えてみました。Table操作も簡単。WordPressのバージョンはME2.2.3で動作を確認しています。たぶん日本語版2.3.3でも稼働すると思います。 → 【ダウンロード】 WordPress2.2xまたは2.3x用の最新TinyMCEセット [ 608クリック ] wp-includes/js/ 内の「tinymce」ディレクトリを削除するかリネームで退避するなどしてから一式を差し替えてください。その他の設定は不要です。いちおう、テスト版とい
「IPWEditor」はウィジウィグエディタを設置する際にTinyMCEとFCKeditorをjQueryから扱えるようにするプラグインです。 最初から編集用のフォームを表示せずに、テキストをクリックする事で編集できるようにするajaxなアレを使う際にウィジウィグにもできるよ!という使い方ができるようです。 詳しくは以下 動作デモの動き デモはテキストをクリックする事でウィジウィグを表示させています。 ためしにTinyMCEを表示させると下のような感じになります。 TinyMCEを設置する際のコードは以下のようになるそうです。 HTML JS //jquery読み込み完了時に初期設定を行います。 $().ready(function() { var ed = new tinymce.Editor('myipwe1', { some_setting : 1 }); //指定のクラスが編集可能
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く