Demo The modern, secure way to upload and store your images and files. Edit images in CKBox, then add them into CKEditor. Try it now
FCKEditorと言えば、Webベースで使えるWYSIWYGエディタとして有名なソフトウェアだ。しかし既に多数の機能が実装され、コアに手を入れて改造しようとはとても思えない代物になっている。 次期FCKEditor また、多機能ゆえに動作が重たいのが難点だった。そうした問題点を解決できそうなのが次期FCKEditorだ。 今回紹介するオープンソース・ソフトウェアはCKEditor、FCKEditor3.0以降のソフトウェアだ。 FCKEditorは3.0以降から名前が変わり、CKEditorとなる。それに伴って様々な機能拡張がなされている。大きな点として、スキン機能とともに枠の色替え機能が実装されたことだ。なお対応ブラウザはFirefox2以上、IE6以上、Opera9.5以上、Safari3以上となる。 APIによる独自拡張 Ajaxとの親和性も高まっており、ダブルクリックで編集モード
2009年11月| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Movable Type 5.0用WYSIWYGエディタの決定版打!堂々の公開! 2009年11月9日(月)ToI企画の天野さんとの共同プロジェクトによる、CKEditor for Movable Type 1.00公開(※以下、CKEditor for MTと省略)。このプラグインはFCKEditorの後継WYSIWYGエディタである、CKEditorを日本語ローカライズ化してMovable Type 5.0で利用できるようにしたものだ。 CKEditorは、FCKeditorのよさを引き継ぎながら、より動作は軽快に、拡張性にも優れた設計になっており、操作はFCKeditorに慣れた人なら、なにも問題はないだ
ダウンロード 下記URLからダウンロードします。 「CKBuilder」を選択すれば、プラグインをカスタマイズしてダウンロードすることができます。 ここでは「ckeditor_4.1.1_standard」を使用します。 Download | CKEditor.com 使い方 「Sample」フォルダ以外を自分の作業フォルダへコピーします。 ファイル構成は下記図のようにします。 作成した「index.html」に下記を記述します。 index.html <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea> <script src="ckeditor/ckeditor.js"></script> これだけでtextareaがWYSIWYGに早変わり! ちなみに「ckedit
CKEditor は、高機能でありながらもカスタマイズも可能で、ブログの書き込み画面のようなボタンによる編集を容易に実現できるWYSIWYGエディタです。 デモページ も同サイト内に公開されています。 WYSIWYGエディタは、数々公開されていたりしますがあまりにも多機能すぎるとアプリに適用した際に、ユーザーが使いこなせなかったり、複雑すぎるところからサポートが返って面倒になったりもします。 なので、提供される機能からさらに一部を公開したり、アプリの画面要件に沿ってうまく組み込めたり出来るものが無いかを探しているときに見つけました。 しかも日本語に対応してくれていますので、ボタンの説明(alt属性)がちゃんと日本語で表示されます。 また、フォーム要素(テキストボックスやラジオボタン、チェックボックスなど)を埋め込む機能もあるため、カスタマイズ次第ではCMSのアプリを作ることも可能かもしれま
Home | CKEditor FCKEditorの次世代バージョンのWYSIWYGエディタ「CKEditor」がリリースされたようです。 FCKEditor といえば JavaScript の WYSIWYGエディタとしてかなりの定番ですね。 特徴は以下。 ・フルアクセシビリティの強化 ・ハイパフォーマンス ・完全カスタマイズ可能&多機能 実際の見た目も、次のようなフラットで、よりWEBサイトになじむUIになっているようです。 関連エントリ まだまだあったJavaScript製のWYSIWYGエディタコンプリート
WPを使ったWeb制作の納品時の 選択肢の一つとして覚えておいて 損は無さそうなのでメモ。記事投稿 のWYSIWYGを使いやすいCKEditor に変更するプラグイン。スタイルも カスタマイズできます。 CKEditorに入れ替えるのでCKEditorでも出来るスタイルの変更も管理画面で行なえます。 上記のようにWordPressの標準装備のWYSIWYGをCKediterに変えます。標準は標準でいいところがあるのであくまで選択肢の一つですかね。以下にちょっとだけ紹介します。 画像 画像にidやclass、heightなどなど色々加えられます。URLを指定するのでアップロードしてから使う感じですね。 テーブル 簡単にテーブルを作成することが出来ます。 テキスト装飾 テキストの装飾も色々出来ます。背景色を付けたり、n乗の表現もワンクリック。 ぜひCKediterのデモを触ってみてください。C
Namespace CKEDITOR.config Stores default configuration settings. Changes to this object are reflected in all editor instances, if not specified otherwise for a particular instance. Defined in: core/config.js. Field Summary Field Attributes Field Name and Description
It has been a long time coming, but after almost 4 years of research, planning and developing, we give you a totally new experience in rich text editing — CKEditor 5. For those who are not familiar with CKEditor 5 yet — it is a powerful framework that enables you to create any kind of text editing solution and include real-time collaborative editing inside. # Overview Here is a general overview of
CKEditor Ecosystem Documentation Samples, tutorials, developer guides, functionality overview, deep dive into the architecture, API reference. CKEditor 5 A powerful WYSIWYG framework delivering a fully customizable editing experience. Getting startedChoose the right rich-text editor for your needs, install it, and configure it properly. FeaturesGet to know features for creating rich content, editi
twitter facebook hatena google pocket ブログやCMSのほとんどには、見たままのものがそのまま表示されるWYGIWYGシステムが導入されています。 このWYGIWYGをお手軽に導入でき、かつリッチな「CKEditor」を紹介します。 sponsors 使用方法 導入は非常に簡単です。 CKEditorからファイル一式をダウンロードします。 <script type="text/javascript" src="ckeditor.js"></script> あとはtextareaにclassなどを振るだけです。 <textarea class="ckeditor" id="editor" name="editor" cols="80" rows="10"></textarea> ▼オプション スキン:見た目を変えられます。 <form> <textarea
「世界中の1%の人々へ」の蒲生さんと「ToI企画」の天野さんの共同プロジェクトによる、CKEditor for Movable Type プラグインが公開されています。 以下、「【Movable Type 5.0】AjaxなWYSIWYGエディタCKEditor for MT公開」の記事からの引用でプラグインを紹介します。 このプラグインはFCKEditorの後継 WYSIWYG エディタ「CKEditor」を日本語ローカライズ化してMovable Type 5.0で利用できるようにしたものです。 CKEditor for MTには、以下の特徴があります。 出力コードが正確 動作が軽快 機能が豊富 使いやすい カスタマイズが簡単 CKEditorはFCKeditorの使いやすさと、TinyMCEの持つ拡張性を備えており、どちらのWYSIWYGエディタよりも素晴らしい、WYSIWYGエディタ
独学-者(どくがくもん)の独り言勉強中の備忘録とか、独り言とか、日常とか。 あと、ダジャレとか。 / 現在PHP独学中。 / 本業はコンビニオーナー。日々是精進/パソコンCKEditorのツールバーカスタマイズメモJavaScript CKEditorのツールバーカスタマイズをめもっとく。 ※フルバージョン <script type="text/javascript"> CKEDITOR.config.toolbar = [ ['Source','-','Save','NewPage','Preview','-','Templates'] ,['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker'] ,['Undo','Redo','-','Find','Replace','-','S
CakePHPに限らず、自作でCMSを作っているとブログのように自由にフォントカラーを変更したい、自由に好きな箇所に画像を入れたいなどまるでWordPressの記事投稿のように行いたいケースもあるかと思います。 そこで大変便利なのがCKEditorとCKFinderです。 CKEditorはJavascriptベースで動き、まるでブログCMSのようなプラットフォームを提供してくれます。 これだけすぐれたUIでしかも無料なので 使わない手はありません。 CakePHP以外にも使えるよ CKEditorはCakePHPはもちろん、WordPressやEC-CUBEなんかにも導入できます。CakePHPに導入するのはあくまでも一例にすぎません。
ブログ記事等のエディタを実装する際はCKEditor!さらに便利でカッコよく使い易く!サンプルソースありJavaScriptjQueryCKEditor 簡単なJavaScriptの実装でエディタが作成できる! CKEditorとは CKEditorを読み込んだ初期表示はこんな感じです。wordpressでブログ記事を書いたことがある方なら、おなじみのエディタだと思われます。 このCKEditor、初期状態でもかなり高機能です。例えば、下の画像のようにソースコード表示ができ、ソースコードを編集することができます。 また、ソースコード表示ではなくHTMLの表示結果を編集することもできます。(HTMLを知らない人でも編集可能) 下の画像では、見出しを選択して打ち消し線ボタンをクリックし、見出しに打ち消し線を付けています。 CKEditorの実装 CKEditor( CDN )を読み込み、scr
CKEditorとTinyMCEは好みの問題もあるけど、 両方共に画像等のリソース管理ブラウザー機能が有償ライセンスになっている。 このお陰で同機能を導入出来ない方が多いみたい。 そんな方には、KCFinderがオススメ。 CKFinderと比べて名前が胡散臭い雰囲気だけど、必要機能は実装されている。 各種AjaxなHTMLエディタとの統合は、デモサイトを参照。 そんな訳で、お目当てのCKEditorとの統合に挑戦する。 早速は、それぞれダウンロードしてきて展開する。 今回は取説の通り、全て/var/www/html/* に配置した。 まずは、CKEditorの設定ファイル ( config.js )をKCFinderのサンプルを参考に編集する。 CKEDITOR.editorConfig = function(config) { config.language = 'ja'; confi
どもども、職場で誕生日を迎えてしまったishidaです。 MovableTypeにはいろいろなプラグインがありますが、ちょっとお仕事でWYSIWYGプラグインである CKEditor for Movable Type をインストールしてみました。 今後も同じカスタマイズを幾度とすると思うのでメモします。 CKEditorプラグインをインストールするとボタンが以下のような感じになります。 わかりにくいので説明も入れてみました。 図をクリックで拡大します。 ボタンがたくさんあっても何でもできちゃう感じですね。 でもいろいろありすぎて、クライアントさんに使ってもらいたくない機能もあったりします。 そこでこのボタンさせあればいいでしょって感じにカスタマイズしてみました。 表示させるボタンのカスタマイズは [ システム ] → [ プラグイン ] の設定から行います。 デフォルトでは、「ボタンのセッ
Thunderbirdでメッセージの新規作成や返信を行うとき、その作成画面は別ウィンドウで開くようになっています。 しかし、せっかくタブ機能があるのですから、こうした画面もタブで開くことができればいいですね。 Thunderbirdに「Compose for Thunderbird」というアドオンをインストールしておけば、高機能エディタ付きの作成画面をタブで開くことができるようになります。 「Compose for Thunderbird」は、Thunderbirdでメッセージの新規作成や返信作業を実行すると、その画面を新しいタブに開き、高度なメッセージ編集を行うことができるというものです。 アドオンをインストール後、メッセージの新規作成などを実行すると、以下のように新規タブでカスタムされた作成画面が開くようになります。 画面内のメッセージ本文記述部では、WYSIWYGエディタの[CKEd
WordPressの投稿画面のCKEditor 上記のボタン以外に、設定画面で機能ボタンを追加する事も出来ます。 基本的に、TinyMCE Advancedと使い方は同じで、記事のレイアウトを確認しながら、記事を書くスタイルです。 CKEditorの設定画面 CKEditorのトップ画面です。 CKEditorの基本設定画面 WordPressのビジュアルエディタ部分のスキンを変更したり、コメントエディタの設定もできたりします。 CKEditorの詳細設定画面 CSSの設定も可能です。自分で作成したCSSも読み込むこともできます。 CKEditorのアップロード設定画面 アップロードの設定もできます。アップロードの管理者権限も設定することができます。 CKEditorの設定ファイル画面 設定ファイルの変更もできます。 CKEditor For WordPressのダウンロード先 WordP
俺にとってイけてるckeditorの設定。 俺の ckeditor/config.js 設定例 多すぎるツールボタンを削った 日本語設定 フォント追加 language変更 改行コードはBRがいい CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: config.language = 'ja'; // config.uiColor = '#AADC6E'; CKEDITOR.config.toolbar = [ // ['Source','-','Save','NewPage','Preview','-','Templates'], ['Source','-','Preview','-','ShowBlocks','-','Tem
できること 「ブログ記事」や「ウェブページ」を編集する際に、WYSIWYGエディタとしてCKEditorを利用できるようにします。 「本文/続き」だけでなく、「概要」やその他カスタムフィールドで追加したフィールドにも適用することができます。 日本語でのWebサイト制作に適した設定がデフォルトとなるように調整をしています。(変更内容) TypePadが配布している絵文字を挿入することができます。 インストール ダウンロードページから「CKEditor-x.x.x.zip」をダウンロードします。(x.x.xにはバージョン番号が入ります) ダウンロードしたファイルを展開します。 CKEditor-x.x.x/plugins/CKEditor を、インストール先のMTに plugins/CKEditor としてアップロードします。 CKEditor-x.x.x/mt-static/plugins/
CKEditor for Movable Typeの出力ソースをカスタマイズする方法 Posted by Hideki at 2011年8月 3日 20:16 タグ: Movable Typeカスタマイズ Facebookでシェア ToI企画さまのWebサイトで公開されている「CKEditor for Movable Type 1.073」は、Movable Typeのリッチテキストエディタを拡張し、HTMLに不慣れな方でもWord感覚で編集が出来るようになる素晴らしいツールです。カスタムフィールドにもリッチテキストエディタを適用できるあたり、本当にすごいですよね。 ただ、マークアップになれている人は「開始タグの後ろになぜ改行が入るのか」「ソースコードのタブインデントを無しにしたい(or スペースにしたい)」など、出力されるソースコードの整形方法を変更したいという希望を持っていることと思い
This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website. If you look for an information about very old ve
CKEditor CodeSnippet は、Drupal のコンテンツ編集で CKEditor の CodeSnippet プラグインを使えるようにするモジュール。有効にすると、ツールバーの「コードスニペットを挿入」ボタンで開くモーダルウィンドウから言語とコードを入力することで、ハイライト表示のコード片をコンテンツに挿入できる。 これを使って sites/default/services.yml ファイルの内容を入力しようとして、言語の選択肢に YAML がないことに気づいた。指定できる選択肢は、テキストフォーマットの設定(admin/config/content/formats)で選択するが、そもそもそこに YAML がない。 記述言語に応じてコード内のキーワードをハイライト表示する機能は highlight.js によるが、もしかして使用しているファイルに YAML サポートが含まれ
新しくなったCKEditor4のボタンの配置をカスタマイズしてみたいと思います。 自分流のボタン配置で操作性アップ!! WordPressの場合になりますが、 ボタンの設定は、 管理画面メニューの CKEditor > File Editor の中の、 プルダウンメニュー「ckeditor.config.jp」 の 24~46行目に記載してあります。 { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, // { name: 'forms' }, '/', { na
オープンソースで高機能、日本語完全対応なWYSIWYGエディタ「CKEditor」を導入する機会があったので、インストール方法をメモっときます。 CKEditorのデータをダウンロード 公式サイトからダウンロードします。 http://ckeditor.com/download 解凍したファイル一式をアップロード アップロードする位置は任意です。ここでは、ルートディレクトリ上に「ckeditor」フォルダを作ってアップロードするとして解説を進めます。 設定ファイルを修正 設定ファイルは「/ckeditor/config.js」になります。こちらを必要に応じて修正します。言語設定を日本語にすればとりあえず使えます。 config.language = 'ja'; エディタを導入したいtextareaがあるページのソースを修正 まず、ckfinderのJavascriptファイルを読み込みます
アンダースコアから始まるディレクトリー以外(直下のファイルも含む)を /html/user_data/packages/default/js/ckeditor/ に配置する。 /data/Smarty/templates/default/admin/design/main_edit.tpl <div> - <textarea name="tpl_data" rows=<!--{$text_row}--> style="width: 100%;"><!--{$arrPageData.tpl_data|escape|smarty:nodefaults}--></textarea> + <script type="text/javascript" src="<!--{$TPL_DIR}-->js/ckeditor/ckeditor.js"></script> + <textarea name="
WYSIWYGのHTMLテキストエディタ「CKEditor」開発チームは11月14日、最新版「CKEditor 4.3」をリリースした。ウィジェット機能を導入、Internet Explorer 11にも対応した。 CKEditorはWebコンテンツの作成に適したオープンソースのHTMLテキストエディタ。インライン編集、Microsoft Wordからのペーストといった編集機能やカスタムツールライブラリ、安定性などを特徴とする。対応WebブラウザはFirefoxやInternet Explorer、Opera、Google Chrome、Safariなど。ダウンロードは940万回に達しており、登録開発者は15万人以上という。ライセンスはGPL/LGPL/MPLで、開発はポーランドCKSourceが行っている。 CKEditor 4.3は7月に公開されたバージョン4.2に続く最新版で、画像な
JSer.info #354 - Mozilla、Microsoft、Google、W3Cが協調してウェブ開発のドキュメントをMDN Web Docsに集約していくことを発表しました。 Mozilla brings Microsoft, Google, the W3C, Samsung together to create cross-browser documentation on MDN - The Mozilla Blog 目に見える変化としては、MSDNのドキュメントがMDNにリダイレクトされていきます。 ブラウザ固有のドキュメントに関してはMicrosoft Edge documentation - Microsoft Edge Development | Microsoft Docsなどに残ります。 Documenting the Web together - Microsof
Movable Typeのコミュニティ機能でCKEditorプラグインを利用するカスタマイズを紹介します。 「CKEditor」はオープンソースの高機能WYSIWYGエディタです。これをMovable Typeで使えるようにしたものが「CKEditorプラグイン」です。 下のスクリーンショットはコミュニティ掲示板のトピック投稿画面のカスタマイズ前後のイメージです。カスタマイズ後はCKEditorによるWYSIWYGエディタが表示されます。フォントのデザインはもちろん、画像の表示も可能です。 カスタマイズ前 カスタマイズ後 以下、カスタマイズ方法です。 1.プラグインファイルの修正 プラグインのデフォルト状態では、投稿画面のテンプレートを再構築する際に必要な情報が取得できないため、プラグインファイルの一部を修正します。 CKEditorプラグインのCKEditor/lib/CKEditor/
おはようございます!rmascoです。 さて!好評の(?)ckeditorカスタマイズ第3弾です! 過去の記事はこちらからどうぞ! ckeditorカスタマイズ方法(その1) ckeditorをカスタマイズするのに必要な情報や簡単な例を書いた記事です ckeditorカスタマイズ方法(その2) リンクなどの機能で表示されるダイアログをカスタマイズ方法を書いた記事です ckeditorカスタマイズ方法その3の内容 ckeditorについているボタン。 非常に多くのボタンがついていますが、 普段使わねーってボタンもあるかと思います。 ボタンの表示非表示に関しては、設定ファイルを変更するだけで、 簡単に表示非表示を変えることができます。 CKEditorのツールバーカスタマイズメモ CKEditorのツールバーをカスタマイズ じゃあ、増やしたい時はどうでしょう? たとえば youtubeのIDを
CKEditorとは WEB上で「見たまま編集」ができるWYSIWYGエディタのオープンソース。 FCK Editor が ヴァージョン3.0から名前が変わり、CKEditorとなった。 ヴァージョンアップにともなって、スキン機能や枠の色替え機能を実装。 対応ブラウザはFirefox2以上、IE6以上、Opera9.5以上、Safari3以上、Google Chrome。 CakePHPにCKEditorを実装する方法 CKEditorをダウンロード。 解凍後、ckeditorフォルダを app/webroot/js/ に配置して、アップロード。 CkeditorHelper をダウンロードして、app/views/helpers/ckeditor.php に配置し、アップロード。 ■app/views/helpers/ckeditor.php <?php class CkeditorH
PHP / ソーシャルサービスなどのWebテック系情報と、ガジェットやドローン、日々のアレコレを綴るブログ。 (仰々しいタイトルですが、ただお試しで使ってみただけです。すみません) クライアント様から「WYSIWYGエディター入れてくれや。画像もアップロードできるやつね。ヨロ!」てなオーダーが来たのでさっそく調査。 「WYSIWYGってなによ!」って人はこちら。 数年前にWeb制作会社所属のときにもよく使ってたTinyMCEを入れてみたけど、日本語化のプロジェクトが中途半端で、かつ、プラグインで対応できてた画像アップロードや管理機能が有料になっとるんで却下。 日本語インターフェイス対応で、その日本語が不自然じゃなくて、機能的にシンプルなもので、画像アップロード&管理ができるWYSIWYGエディターを探してたら、CKEditorに遭遇。ちょいと前まではFCKEditorと名乗ってたみたい。な
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く