リッチテキストエディター（RTE）のJSライブラリ色々試してみた
リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ
Behind VS Code Extensions for JavaScript / TypeScript Linting and Formatting
# Behind VS Code Extensions for JavaScript / TypeScript Linting and Formatting This slides are used at VS Code Conference Japan 2024 https://vscodejp…
Quokka - JavaScript and TypeScript playground in your editor
Quokka.js runs JavaScript and TypeScript with instant feedback, displaying runtime values in your editor as you type. Quokka makes exploring, learning, and testing JavaScript / TypeScript blazingly fast. By default no config is required, simply open a new Quokka file and start experimenting. Focus on writing code instead of writing bespoke config files just to try a simple idea or learn a new lang
Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
雑にReactアプリを作りたい時に使ってるもの
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
JavaScript のメディアタイプと RFC 9239 | blog.jxck.io
Intro 長いこと作業が行われていた JavaScript の MIME タイプについての作業が完了し、RFC 9239 として公開された。 これにより、推奨される MIME タイプが text/javascript に統一されることになった。 かつて推奨されていた application/javascript ではなくなった経緯などを踏まえ、解説する。 JavaScript MIME Types HTTP で Response する際に指定する Content-Type は、その内容がなんであるかを Client に Indicate し、適切な処理を促すために使用される。 例えば HTML が text/html であったりするように、JS も内容はテキストなので text/javascript が自然に思える。 しかし、例えば MS が実装していた JS 互換の JScript は
Javascript Playground (Sandbox, Repl)
The #1 JavaScript playground and sandbox to write, run and repl it. JavaScript playground is perfect for learning and prototyping javascript sandboxes. Fast. Easy to use. Start javascript playground project using ready to use templates.
オンラインWYSIWYGエディタリンク集 - Qiita
以下はAwesome text editingからリンクされているオンラインエディタのリンク集です。 昔はCKEditorとTinyMCEの二択だったような気がするけど、いつの間にかずいぶん増えていた。 最近はどれを選んでも十分な機能を持ってるし、脆弱性さえ無ければどれを選んでもまあ問題ないでしょう。 そういやWYSIWYGって聞かなくなったよね。 エディタ Trix サンプル。 一般的な機能。ドキュメントがわかりやすい。 CKEditor 2003年から存在する老舗中の老舗だが古くささは全くない。 インラインエディタとかすごい。 Squire サンプル。 昔のCKEditorっぽい見た目。 デザイン目的ではなくドキュメントを書くことを重視しているようだ。 ProseMirror 複数人でのリアルタイム同時編集に対応している。すごい。 Scribe サンプル。 正直見た目が一番わかりやすい
オープンソースの「Visual Studio Code 1.3」登場。エディタがタブ操作可能に、エディタ機能をモジュール化しブラウザで立ち上がる「Monaco Editor」公開 － Publickey
Visual Studio Code 1.3ではエディタでタブ操作が可能になり、拡張機能をインストールし管理するための画面を追加するなどのほか、多くの新機能が追加されています。 エディタ部のタブ操作では、複数のファイルを開いたときにタブで任意のファイルを選択できるようになり、利便性が高まりました。 拡張機能を管理するためのユーザーインターフェイスが新たに追加され、現在インストールされている拡張機能の一覧や、新規インストールする拡張機能の検索などを行うことができるようになりました。 デベロッパーにとってインパクトが大きいと思われるのが、Visual Studio Code 1.3のエディタ機能が「Monaco Editor」として独立したモジュールになったことです。 Monaco EditorはNode.jsのモジュールとしてインストールできるnpmで配布が始まりました。 サンプルとして用意
Bootstrap Editor
Bootstrap Editor Webページを爆速で作成 「ログインもインストールも不要」です。(全76テンプレート) Bootstrap Editorはブラウザがあればいつでも使えます！ [ 2018-02-02 ] Bootstrap Editor に名前を戻しました。 [ 2018-05-12 ] Bootstrap4.1バージョンアップによる不具合を修正 [ テンプレート ] Bootstrap4 34枚 [ テンプレート ] Materialize 2枚 [ テンプレート ] Foundation 8枚 [ テンプレート ] AMP 9枚 [ テンプレート ] JavaScript/GoogleMap/vew.js 23枚 2018年1月15日 Coliss掲載（http://coliss.com/） 1. Code エディター：3色から選択（Emmet） 2. Templat
RunKit is Node prototyping
RunKit is a node playground. Full node environment, right in the browser with every npm package already pre-installed Create a Notebook Prototype and explore your ideas RunKit notebooks completely remove the friction of trying new ideas. With one click you'll have a sandboxed JavaScript environment where you can instantly switch node versions, use every npm module without having to wait to install
Draft.js
Extensible and CustomizableWe provide the building blocks to enable the creation of a broad variety of rich text composition experiences, from basic text styles to embedded media. Declarative Rich TextDraft.js fits seamlessly into React applications, abstracting away the details of rendering, selection, and input behavior with a familiar declarative API. Immutable Editor StateThe Draft.js model is
Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！
Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！ クロスプラットフォームでオープンソースな IDE 環境、Visual Studio Code が公開されたので試してみた。 拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。 Windows 環境で起動してみたらこんな画面だった。 なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。 フォルダーを開くことから始まる Visual Studio Code にはプロジェクトの概念はない。 [File] > [Open Folder] からフォルダーを開けばよい。 ためしに、過去に作った Node.js 製の livereloadx のフォルダーを開いてみた。 左側に
Thimble by Mozilla - An online code editor for learners & educators.
Thimble was a code editor for people who love the web. Looking for Thimble projects? Users migrated their projects to the Glitch platform in 2019. If you’re looking for a similar experience, go check them out! Learn more about Thimble and the transition to Glitch below. Mozilla loves the web and people like you who make it. Find out how we can celebrate and protect it together! HistoryThimble was
Rapid Prototyping in JavaScript • Matt DesLauriers
March 8, 2015 Rapid Prototyping in JavaScript Twitter: @mattdesl In this post I’ll outline a simple workflow for quick prototyping and creative development with JavaScript. It’s the workflow I’ve been using for some years now, and it is how I build most of my libraries, demos and client projects. Some examples of libraries/projects using this workflow: Audiograph color-wander webgl-wireframes pers
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - nicoespeon/abracadabra: JS & TS automated refactorings for the VS Code editor ✨ It's magic ✨
GitHub - brookhong/Surfingkeys: Map your keys for web surfing, expand your browser with javascript and keyboard.
GitHub - slab/quill: Quill is a modern WYSIWYG editor built for compatibility and extensibility
CodeSandbox: Instant Cloud Development Environments
nunuStudio