### Install Rhino Editor via NPM
Source: https://context7.com/context7/rhino-editor_vercel_app-tutorials-getting-started/llms.txt
Installs the rhino-editor package using npm, the recommended method for modern JavaScript projects. No additional configuration is needed after installation, as the editor automatically registers the custom element.
```bash
# Install the rhino-editor package
npm install rhino-editor
# No additional configuration needed - ready to use
```
--------------------------------
### Basic HTML Usage of Rhino Editor
Source: https://rhino-editor.vercel.app/tutorials/getting-started/index
Demonstrates how to render the Rhino Editor on a webpage using a simple HTML tag. This is the most basic way to display the editor once it has been installed and configured.
```html
```
--------------------------------
### Manually Install Rhino Editor Assets for Rails
Source: https://context7.com/context7/rhino-editor_vercel_app-tutorials-getting-started/llms.txt
Downloads the Rhino Editor CSS and JavaScript files from a CDN and places them in the Rails asset pipeline and vendor directories. It also includes a step to remove conflicting ActionText CSS.
```bash
# Download CSS file to Rails asset pipeline directory
curl -Lo ./app/assets/stylesheets/rhino-editor.css https://unpkg.com/rhino-editor/exports/styles/trix.css
# Download JavaScript bundle to vendor directory
curl -Lo ./vendor/javascript/rhino-editor.js https://unpkg.com/rhino-editor/exports/bundle/index.module.js
# Remove conflicting ActionText CSS to prevent style conflicts
rm ./app/assets/stylesheets/actiontext.css
```
--------------------------------
### Import Rhino Editor in JavaScript Application
Source: https://context7.com/context7/rhino-editor_vercel_app-tutorials-getting-started/llms.txt
Imports the Rhino Editor package and its CSS into your application's entry point. This makes the `` custom element globally available without further setup.
```javascript
// index.js - Import Rhino Editor in your application entry point
import "rhino-editor"
import "rhino-editor/exports/styles/trix.css"
// The element is now available globally
// No additional setup required - the element auto-registers
```
--------------------------------
### Install Rhino Editor with npm
Source: https://rhino-editor.vercel.app/tutorials/getting-started/index
Installs the rhino-editor package using npm. After installation, you can import the editor and its styles into your JavaScript project. This method automatically registers the custom element.
```shell
$npm install rhino-editor
```
```javascript
// index.js
import "rhino-editor"
import "rhino-editor/exports/styles/trix.css"
```
--------------------------------
### Use Rhino Editor in HTML
Source: https://context7.com/context7/rhino-editor_vercel_app-tutorials-getting-started/llms.txt
Demonstrates basic and form integration usage of the Rhino Editor custom element in an HTML file. The `` tag is used directly, and it can be included within a form for submission.
```html
Rhino Editor Example
```
--------------------------------
### Manual Importmap Installation for Rails
Source: https://rhino-editor.vercel.app/tutorials/getting-started/index
Provides commands to manually download Rhino Editor's CSS and JavaScript files and configure Rails' importmap and application JavaScript files. This workaround addresses potential issues with the default importmap flow. It also suggests removing conflicting CSS files.
```shell
$curl -Lo ./app/assets/stylesheets/rhino-editor.css https://unpkg.com/rhino-editor/exports/styles/trix.css
$curl -Lo ./vendor/javascript/rhino-editor.js https://unpkg.com/rhino-editor/exports/bundle/index.module.js
$# Remove actiontext css to avoid conflicts.
$rm ./app/assets/stylesheets/actiontext.css
```
```diff
# config/importmap.rb
# ...
- pin "trix"
- pin "@rails/actiontext", to: "actiontext.esm.js"
+ pin "rhino-editor", to: "rhino-editor.js"
```
```javascript
// app/javascript/application.js
// ...
- import "trix"
- import "@rails/actiontext"
+ import "rhino-editor"
```
--------------------------------
### Use Rhino Editor in Rails Forms
Source: https://context7.com/context7/rhino-editor_vercel_app-tutorials-getting-started/llms.txt
Shows how to integrate the Rhino Editor into a Rails form using the `` tag. It includes setting the `name` attribute for form submission and pre-populating with existing `post.content`.
```erb
<%= form_with(model: post, local: true) do |form| %>
<%= form.label :content %>
<%= form.submit %>
<% end %>
```
--------------------------------
### Basic HTML Integration with Rhino Editor
Source: https://context7.com/context7/rhino-editor_vercel_app-tutorials-getting-started/llms.txt
This snippet demonstrates the simplest way to use Rhino Editor by adding the `` custom element directly to an HTML page. It shows how to include the editor, set initial content, and integrate it within an HTML form. The JavaScript part imports the editor module and shows how to access its value and listen for changes.
```html
Rhino Editor - Basic Usage
My Blog Post Editor
```
--------------------------------
### Import Rhino Editor in Rails Application JS
Source: https://context7.com/context7/rhino-editor_vercel_app-tutorials-getting-started/llms.txt
Imports the Rhino Editor into the main application JavaScript file for Rails. This replaces any existing Trix or ActionText imports and makes the editor available across all Rails views.
```javascript
// app/javascript/application.js - Import Rhino Editor in application entry
// Remove Trix and ActionText imports:
// import "trix"
// import "@rails/actiontext"
// Add Rhino Editor import
import "rhino-editor"
// The editor is now available in all Rails views
// CSS is automatically included via the asset pipeline
```
--------------------------------
### Configure Importmaps for Rhino Editor in Rails
Source: https://context7.com/context7/rhino-editor_vercel_app-tutorials-getting-started/llms.txt
Configures the importmap.rb file in a Rails application to use the vendored Rhino Editor JavaScript file. This involves removing default Trix and ActionText pins and adding a new pin for rhino-editor.
```ruby
# config/importmap.rb - Configure importmap to use vendored file
# Remove Trix and ActionText pins, add Rhino Editor
pin "application", preload: true
# Remove these lines if present:
# pin "trix"
# pin "@rails/actiontext", to: "actiontext.esm.js"
# Add Rhino Editor pointing to vendored file
pin "rhino-editor", to: "rhino-editor.js"
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.