ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。 そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。 vueggの使い方 メイン画面です。右側に並んだツールを左側のエディタにドロップします。 ドロワーの設定もできます。 vueggで作った内容はVue.jsのプロジェクトとしてダウンロードができます。プロトタイプ開発にも使えますし、画像などを適用すれば精度の高いデザインツールとしても使えるでしょう。コンポーネントも数多く用意されているので、多くのWebサービスで使えそうです。 vueggはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 vueg
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;" ] ] ] ] ] ];
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編） 初めまして。技術者の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
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
CKEditorとは？ CKEditorとは、Webサイトの入力エリアを WYSIWYG形式のエディタにするツールです。 オープンソースで軽量、かつ、導入の手間が非常に簡単な WYSIWYGエディタで、最古参のエディタの一つです。 かつては「FCKeditor」と称していましたが、バージョン 3になるときに「CKEditor」に改称しました。 WYSIWYGエディタは、各社からいろいろなものが提供されていますが、いろいろと触ってみるのもいいですが、一つのものを選んでじっくり深く掘り下げていく方が多様な使い方に対応できると思います。 そして、その深く掘り下げていく WYSIWYGエディタとして「CKEditor 4」を選んでおけば問題ないと考えています。 CKEditor 4 オフィシャルサイト https://ckeditor.com/ckeditor-4/ ちなみに、2017年11月14
はじめに 高機能な 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というものを使います。ckeditorを表示するとこんな感じです。ブログ記事などでもしかしたら、一度使ったことがある方もいるかも知れません。 上の例はメニューを減らしたので、初期の状態よりはかなり少なくなっています。本来はこれだけ機能があり、かなり高機能です。 ckeditor を使えるようにするまずコマンドで以下を実行します。 composer require unisharp/laravel-ckeditorそして、config/app.php内のprovidersの中にUnisharp\Ckeditor\ServiceProvider::class,を追加します。 'providers' => [ . . . Unisharp\Ckeditor\ServicePr
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のダウンロード先: mindmup/bootstrap-wysiwyg bootstrap-wysiwygの画像挿入はデータURIスキームでテキスト化されているので、 これをアップロードに変更してみた。 1. Rangeの取得 挿入時、キャレット位置に挿入する為、Rangeを取得する。 ※editor内を操作したときのみに取得する。 var range = null; $("#editor").bind("keypress click", function(){ var sel = document.getSelection(); range = sel.getRangeAt(0); });
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」
以下はAwesome text editingからリンクされているオンラインエディタのリンク集です。 昔はCKEditorとTinyMCEの二択だったような気がするけど、いつの間にかずいぶん増えていた。 最近はどれを選んでも十分な機能を持ってるし、脆弱性さえ無ければどれを選んでもまあ問題ないでしょう。 そういやWYSIWYGって聞かなくなったよね。 エディタ Trix サンプル。 一般的な機能。ドキュメントがわかりやすい。 CKEditor 2003年から存在する老舗中の老舗だが古くささは全くない。 インラインエディタとかすごい。 Squire サンプル。 昔のCKEditorっぽい見た目。 デザイン目的ではなくドキュメントを書くことを重視しているようだ。 ProseMirror 複数人でのリアルタイム同時編集に対応している。すごい。 Scribe サンプル。 正直見た目が一番わかりやすい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
