vuegg - Vue.jsプロジェクトの画面を作成 MOONGIFT
ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。 そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。 vueggの使い方 メイン画面です。右側に並んだツールを左側のエディタにドロップします。 ドロワーの設定もできます。 vueggで作った内容はVue.jsのプロジェクトとしてダウンロードができます。プロトタイプ開発にも使えますし、画像などを適用すれば精度の高いデザインツールとしても使えるでしょう。コンポーネントも数多く用意されているので、多くのWebサービスで使えそうです。 vueggはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 vueg
CKEditor のフォントのプルダウンメニューをカスタマイズする
concrete5 8.x で採用されている CKEditor のフォントファミリーのプルダウン項目の変更方法です。 設定は、application/config/site.php に記載します。 フォントファミリーはセミコロンで区切って記述します。スラッシュで区切ることで、実際に適用されるfont-familyの値とプルダウンメニューに表示されるラベルをそれぞれ指定できます。 <?php return [ 'sites' => [ 'default' => [ 'editor' => [ 'ckeditor4' => [ 'custom_config_options' => [ 'font_names' => "Arial/Arial, Helvetica, sans-serif;Osaka/Osaka, sans-serif;" ] ] ] ] ] ];
html - CKEditor 30でタグを囲むことをオフにします - 初心者向けチュートリアル
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; -これは私にとって完璧に機能します。 ブラウザのキャッシュをクリアしようとしましたか？これは時々問題です。 jQueryアダプターを使用してチェックアウトすることもできます。 <script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script> <script type="text/javascript"> $(function() { $('#your_textarea').ckeditor({ toolbar: 'Full', enterMode : CKEDITO
エディタの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
Class Config (CKEDITOR.config) | CKEditor 4 API docs
Stores default configuration settings. Changes to this object are reflected in all editor instances, if not specified otherwise for a particular instance. Read more about setting CKEditor configuration in the documentation. Allowed content rules. This setting is used when instantiating CKEDITOR.editor.filter. The following values are accepted: CKEDITOR.filter.allowedContentRules – defined rules wi
WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説
CKEditorとは？ CKEditorとは、Webサイトの入力エリアを WYSIWYG形式のエディタにするツールです。 オープンソースで軽量、かつ、導入の手間が非常に簡単な WYSIWYGエディタで、最古参のエディタの一つです。 かつては「FCKeditor」と称していましたが、バージョン 3になるときに「CKEditor」に改称しました。 WYSIWYGエディタは、各社からいろいろなものが提供されていますが、いろいろと触ってみるのもいいですが、一つのものを選んでじっくり深く掘り下げていく方が多様な使い方に対応できると思います。 そして、その深く掘り下げていく WYSIWYGエディタとして「CKEditor 4」を選んでおけば問題ないと考えています。 CKEditor 4 オフィシャルサイト https://ckeditor.com/ckeditor-4/ ちなみに、2017年11月14
WYSIWYG エディタの CKEditor4 にアップロード機能を追加する (CKEditor+KCFinder)
はじめに 高機能な WYSIWIG エディタである CKEditor に、KCFinder を連携させて、画像やファイルのアップロード機能を追加します。 環境 OS : Windows 7 Pro 64bit Webサーバ : Apache 2.4.4 (XAMPP 5.6.12) PHP : 5.6.12 (XAMPP 5.6.12) CKEditor : Version 4.6.2 CKEditor の設定 CKEditor の本体を、以下よりダウンロードします。 CKEditor4 パッケージを選ぶ必要がありますが、今回は Standard Package を選択します。 ダウンロードした zip ファイル、をプロジェクトの直下に解凍します。
Laravel で エディタ(ckeditor)を実装する ①｜NANASE
今回は、laravelでエディタを使って投稿できるようにする方法について書きます。 エディタ使うエティタはckeditorというものを使います。ckeditorを表示するとこんな感じです。ブログ記事などでもしかしたら、一度使ったことがある方もいるかも知れません。 上の例はメニューを減らしたので、初期の状態よりはかなり少なくなっています。本来はこれだけ機能があり、かなり高機能です。 ckeditor を使えるようにするまずコマンドで以下を実行します。 composer require unisharp/laravel-ckeditorそして、config/app.php内のprovidersの中にUnisharp\Ckeditor\ServiceProvider::class,を追加します。 'providers' => [ . . . Unisharp\Ckeditor\ServicePr
Tiny, opensource, Bootstrap WYSIWYG rich text editor from MindMup
bootstrap-wysiwyg tiny wysiwyg rich text editor for Bootstrap About This tiny (5KB, < 200 lines) jQuery Bootstrap plugin turns any DIV into a WYSIWYG rich-content editor, inspired by CLEditor and bootstrap-wysihtml5. Here are the key features: Automatically binds standard hotkeys for common operations on Mac and Windows Drag and drop files to insert images, support image upload (also taking photos
bootstrap-wysiwygで画像アップロード対応してみた。（fuelphp） - Qiita
public function action_index(){ $new_name = 'img_'.date('ymtHis'); $config = array('path' => DOCROOT.'assets/img/upload/', 'new_name'=>$new_name, 'ext_whitelist'=> array('jpg','jpeg','gif','png','JPG')); \Fuel\Core\Upload::process($config); if(\Fuel\Core\Upload::is_valid()){ \Fuel\Core\Upload::save(); $files = \Fuel\Core\Upload::get_files(); foreach ($files as $file){ $file_name = preg_replace('/.
WEB上で複雑なレイアウトのページを自由にWYSIWYGで編集できる「grapesjs」:phpspot開発日誌
GitHub - artf/grapesjs: Free and Open source Web Builder Framework. Next generation tool for building templates without coding GrapesJS Demo WEB上で複雑なレイアウトのページを自由にWYSIWYGで編集できる「grapesjs」 ブロックやカラムをドラッグ＆ドロップで自由に配置し、テキストをその場で編集できる高機能なエディタをオープンソースで自分のアプリに組み込めます。 関連エントリ Markdownが書けるWYSIWYGエディタ「TOAST UI Editor」
オンラインWYSIWYGエディタリンク集 - Qiita
以下はAwesome text editingからリンクされているオンラインエディタのリンク集です。 昔はCKEditorとTinyMCEの二択だったような気がするけど、いつの間にかずいぶん増えていた。 最近はどれを選んでも十分な機能を持ってるし、脆弱性さえ無ければどれを選んでもまあ問題ないでしょう。 そういやWYSIWYGって聞かなくなったよね。 Trix サンプル。 一般的な機能。ドキュメントがわかりやすい。 CKEditor 2003年から存在する老舗中の老舗だが古くささは全くない。 インラインエディタとかすごい。 Squire サンプル。 昔のCKEditorっぽい見た目。 デザイン目的ではなくドキュメントを書くことを重視しているようだ。 ProseMirror 複数人でのリアルタイム同時編集に対応している。すごい。 Scribe サンプル。 正直見た目が一番わかりやすい。 だが公
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Class CKEDITOR (CKEDITOR) | CKEditor 4 API docs
課題 #1040: CKEditorでPタグを自動挿入しない機能 - baserCMS機能要望
CkeditorをjQueryで入力不可にする方法
summernoteを日本語化するには？
summernoteについてのメモ - Qiita
Summernote - Super Simple WYSIWYG editor
Markdownが書けるWYSIWYGエディタ「TOAST UI Editor」:phpspot開発日誌