タグ

ckeditorに関するmiya1972のブックマーク (11)

  • エディタのconfig設定(CKEditor編) | 生産性向上のためのお役立ちブログ|株式会社プロフェッサ

    エディタのconfig設定(CKEditor編) 初めまして。技術者のMioです。 CMS構築をしていると、よくCKEditorとTinyMCEの設定を行う機会があります。 今回は備忘録も兼ねて、よく利用する設定をご紹介します! よく利用するconfig設定 // スペルチェック機能OFF config.scayt_autoStartup = false; // ○○タグを書きたい!(MTタグの場合もこの書き方でOK) config.protectedSource.push(/<[$/]?○○[sS]*?>n?/g); // phpソースを書きたい! config.protectedSource.push( /<?[sS]*??>/g ); // テンプレート挿入時に編集中の内容と置き換えるデフォルトのチェックを外す。 config.templates_replaceContent = f

  • CKFinder | File manager with image editing for CKEditor

    Demo With CKEditor 5, you can move the entire content creation process to your own application. No more copy-pasting from third party tools. Try demos

    CKFinder | File manager with image editing for CKEditor
  • ブログ記事等のエディタを実装する際はCKEditor!さらに便利でカッコよく使い易く!サンプルソースあり - Qiita

    ブログ記事等のエディタを実装する際はCKEditor!さらに便利でカッコよく使い易く!サンプルソースありJavaScriptjQueryCKEditor 簡単なJavaScriptの実装でエディタが作成できる! CKEditorとは CKEditorを読み込んだ初期表示はこんな感じです。wordpressでブログ記事を書いたことがある方なら、おなじみのエディタだと思われます。 このCKEditor、初期状態でもかなり高機能です。例えば、下の画像のようにソースコード表示ができ、ソースコードを編集することができます。 また、ソースコード表示ではなくHTMLの表示結果を編集することもできます。(HTMLを知らない人でも編集可能) 下の画像では、見出しを選択して打ち消し線ボタンをクリックし、見出しに打ち消し線を付けています。 CKEditorの実装 CKEditor( CDN )を読み込み、scr

    ブログ記事等のエディタを実装する際はCKEditor!さらに便利でカッコよく使い易く!サンプルソースあり - Qiita
  • [baserCMS]エディタで絵文字を使う。|mani-lab|mani-lab

    絵文字といっても画像です。CKeditorで絵文字を使う方法が、色々なところに転がっていたので、baserCMSで出来るかどうかのメモにして残しておきます。(テンプレート等で、ガラケー時代からある携帯キャリア別の絵文字を使う場合は、他の方のブログにKtai-Libralyを使った情報があります。) 参考サイト ・FCKeditor Japan 絵文字画像のセット(Smily_TypePad_Kit1.zip)をダウンロードできます。 ・ユニキャストラボ WordPress向けの記事です。参考になりました。 1.CKeditorをappフォルダ側へコピーする もともとbaserフォルダ側にあるCKeditorのファイル群を、appフォルダ側に移します。baserフォルダ側で操作しても反映しますが、今後のアップデートを考えると、app側で処理したほうが問題が少なさそうです。 /baser/ve

  • [CKEditor] インストール方法メモ | umbrella_process blog

    オープンソースで高機能、日語完全対応なWYSIWYGエディタ「CKEditor」を導入する機会があったので、インストール方法をメモっときます。 CKEditorのデータをダウンロード 公式サイトからダウンロードします。 http://ckeditor.com/download 解凍したファイル一式をアップロード アップロードする位置は任意です。ここでは、ルートディレクトリ上に「ckeditor」フォルダを作ってアップロードするとして解説を進めます。 設定ファイルを修正 設定ファイルは「/ckeditor/config.js」になります。こちらを必要に応じて修正します。言語設定を日語にすればとりあえず使えます。 config.language = 'ja'; エディタを導入したいtextareaがあるページのソースを修正 まず、ckfinderのJavascriptファイルを読み込みます

  • WYSIWYGエディタ選考会にて、CKEditorを評価してみました。 - motooLogue

    PHP / ソーシャルサービスなどのWebテック系情報と、ガジェットやドローン、日々のアレコレを綴るブログ。 (仰々しいタイトルですが、ただお試しで使ってみただけです。すみません) クライアント様から「WYSIWYGエディター入れてくれや。画像もアップロードできるやつね。ヨロ!」てなオーダーが来たのでさっそく調査。 「WYSIWYGってなによ!」って人はこちら。 数年前にWeb制作会社所属のときにもよく使ってたTinyMCEを入れてみたけど、日語化のプロジェクトが中途半端で、かつ、プラグインで対応できてた画像アップロードや管理機能が有料になっとるんで却下。 日語インターフェイス対応で、その日語が不自然じゃなくて、機能的にシンプルなもので、画像アップロード&管理ができるWYSIWYGエディターを探してたら、CKEditorに遭遇。ちょいと前まではFCKEditorと名乗ってたみたい。な

    WYSIWYGエディタ選考会にて、CKEditorを評価してみました。 - motooLogue
  • [CakePHP] CKEditorとCKFinderの導入 | Ks web Design

    ■CKEditorの実装手順メモ 1. ダウンロード http://ckeditor.com/download 2. 解答したckeditorフォルダを下記のように配置 /app/webroot/js/ckeditor/ 3. Viewファイルの修正 <?php //insert head echo $javascript->link('ckeditor/ckeditor', false); ?> //CKEditorを反映させるテキストエリア <?php echo $this->Form->input('content', array('type'=>'textarea', 'label'=>'内容', 'id'=>'editor')); ?> <script type="text/javascript"> var editor = CKEDITOR.replace( 'editor

  • EC-CUBEにCKEditorをつける | Maya Web Project Official Blog

    古い記事の補足です。 管理画面の商品詳細画面に CKEditor をつけます。 (当時はfckeditor で書いたのですが、下の公式のダウンロード画面を見ると fckeditor の開発自体は終了したようなので CKEditor にて書きます) なお、EC-CUBE 体は http://hoge.foo/ 直下に配置したものとします。 まず、CKEditor のアーカイブをここから取得して 解凍してできたフォルダを EC-CUBE のフォルダにコピーします。 削除していいファイルがあるはずですが、ちょっと時間掛けて吟味します。 (“_”で始まるファイル・フォルダは削除できると思います) 次に、CKEditor は利用するページ内に該当の JS ファイルへのリンクを張らなくてはならないので、Smarty テンプレートファイル /data/Smarty/templates/de

  • リッチなWYGIWYGシステムをお手軽に導入する「CKEditor」

    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

  • PHP x Ajax = CMS ! » [CakePHP] CKEditorヘルパー(見たまま編集エディター)

    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

  • 『高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]』

    CKEditor は、高機能でありながらもカスタマイズも可能で、ブログの書き込み画面のようなボタンによる編集を容易に実現できるWYSIWYGエディタです。 デモページ も同サイト内に公開されています。 WYSIWYGエディタは、数々公開されていたりしますがあまりにも多機能すぎるとアプリに適用した際に、ユーザーが使いこなせなかったり、複雑すぎるところからサポートが返って面倒になったりもします。 なので、提供される機能からさらに一部を公開したり、アプリの画面要件に沿ってうまく組み込めたり出来るものが無いかを探しているときに見つけました。 しかも日語に対応してくれていますので、ボタンの説明(alt属性)がちゃんと日語で表示されます。 また、フォーム要素(テキストボックスやラジオボタン、チェックボックスなど)を埋め込む機能もあるため、カスタマイズ次第ではCMSのアプリを作ることも可能かもしれま

    『高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]』
  • 1