Skip to content

Take control over what external links and embedded media is permitted in the Trix editor via copy/paste

License

Notifications You must be signed in to change notification settings

hopsoft/trix_embed

Repository files navigation

Trix Embed

Take control over what external links and embedded media is permitted in the Trix editor via copy/paste

Table of Contents

Dependencies

Setup

bundle add trix_embed
yarn add trix-embed@$(bundle show trix_embed | ruby -ne 'puts $_.split(/-/).last')
import Trix from 'trix'
import "@rails/actiontext"
import { Application, Controller } from '@hotwired/stimulus'
import TrixEmbed from 'trix-embed'

const application = Application.start()
TrixEmbed.initialize({ application, Controller, Trix })

Features

Allow / Block Lists

Configure allow and/or block lists for external links and embedded media in your Trix editors.

⚠︎ Block lists have precendence!

  • allowed link hosts
  • blocked link hosts
  • allowed media hosts
  • blocked media hosts

Note that you can also use wildcards * in any of lists.

Template Overrides

TODO: document...

Basic Usage

Allow Lists

  • Allow everything

    <form>
      <input id="content" name="content" type="hidden">
      <trix-editor id="editor" input="content"
        data-controller="trix-embed"
        data-trix-embed-allowed-link-hosts-value='["*"]'
        data-trix-embed-allowed-media-hosts-value='["*"]'>
      </trix-editor>
    </form>
  • Allow links to all hosts and allow media (images, videos, etc.) from the following hosts: vimeo.com, voomly.com, youtube.com

    <form>
      <input id="content" name="content" type="hidden">
      <trix-editor id="editor" input="content"
        data-controller="trix-embed"
        data-trix-embed-allowed-link-hosts-value='["*"]'
        data-trix-embed-allowed-media-hosts-value='["vimeo.com", "voomly.com", "youtube.com"]'>
      </trix-editor>
    </form>

Block Lists

  • Block everything

    <form>
      <input id="content" name="content" type="hidden">
      <trix-editor id="editor" input="content"
        data-controller="trix-embed"
        data-trix-embed-block-link-hosts-value='["*"]'
        data-trix-embed-block-media-hosts-value='["*"]'>
      </trix-editor>
    </form>

    ...or simply.

    <form>
      <input id="content" name="content" type="hidden">
      <trix-editor id="editor" input="content" data-controller="trix-embed">
      </trix-editor>
    </form>
  • Block links to the following hosts: 4chan.org, 8chan.net, thepiratebay.org and block media (images, videos, etc.) from the following hosts: deviantart.com, imgur.com, tumblr.com

    <form>
      <input id="content" name="content" type="hidden">
      <trix-editor id="editor" input="content"
        data-controller="trix-embed"
        data-trix-embed-blocked-link-hosts-value='["4chan.org", "8chan.net", "thepiratebay.org"]'
        data-trix-embed-blocked-media-hosts-value='["deviantart.com", "imgur.com", "tumblr.com"]'>
      </trix-editor>
    </form>

Persistence

You'll need to ensure any embedded attachments are prepared for persistence.

class ContentController < ApplicationController
  def create
    Example.create content: TrixEmbed::Attachment.rewrite_for_storage(params[:content].to_s)
  end
end

Sponsors

Proudly sponsored by

Developing

git clone https://github.com/hopsoft/trix_embed.git
cd trix_embed
bin/dev

Releasing

  1. Run yarn and bundle to pick up the latest
  2. Bump version number at lib/trix_embed/version.rb. Pre-release versions use .preN
  3. Bump version number at package.json (make sure it matches). Pre-release versions use -preN
  4. Run yarn build - builds both the Ruby gem and the NPM package
  5. Commit and push changes to GitHub
  6. Run rake release
  7. Run yarn publish --no-git-tag-version --access public --new-version X.X.X (use same version number)
  8. Create a new release on GitHub (here) and generate the changelog for the stable release for it

License

The gem is available as open source under the terms of the MIT License.

About

Take control over what external links and embedded media is permitted in the Trix editor via copy/paste

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published