Remove Image upload with Trix (or a better alternative WYSIWYG)

I've been trying to modify Trix, but I just cannot find a way.

I want a text editor like Gumtree, but I can't find any, the best one (most simplistic design) is Trix, however, there seems to be no documentation and modifying it feels impossible.

Is there a way to completely remove the ability to upload images with the Trix editor?

If not, what other suggestions are there? (free)

I tried Tiny and CKE both are bloated I just want a normal text editor so people can format their text like normal and then it saves it as HTML

So the question: How can I disable image upload (including the buttons) on trix?

Snapey

5 years ago

Level 122

Not saying don't use trix, but I got quill.js working

https://quilljs.com/

This was the last rich text editor I implemented. Make sure you sanitize the input because you need to use raw output on the page.

@extends('layouts.app')

@section('content')
<div class="bodycontainer">

    @include('layouts.logo')
    @include('layouts.menu',['current'=>'news'])

    <div class="row">
        <div class="span11 offset40px">
            <h1>Add News</h1>
            <p>&nbsp;</p>

            <div class="span10" style="">
                @if($post->exists)
                    <form id="news" method="POST" action="{{ route('news.update',$post->id) }}">
                        @method('patch')
                @else
                    <form id="news" method="POST" action="{{ route('news.store') }}">
                @endif
                    @csrf
                    <label>Title:</label>
                    <input type="text" class="span10" name="title" value="{{ old('title', $post->title) }}" />

                    <label>Content:</label>
                    <div id="editor">
                        {!! $post->content !!}
                    </div>
                    <input type="hidden" name="content" >
                    <input type="submit" style="margin-top:8px;" value="Save the Item"> ... or just press back

                </form>
            </div>

        </div>
    </div>
</div>


<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="/js/quill-blot-formatter.min.js"></script>
<!-- Initialize Quill editor -->
<script>
    Quill.register('modules/blotFormatter', QuillBlotFormatter.default);

    var toolbarOptions = [
        ['bold', 'italic', 'underline','image','link'],        // toggled buttons

        [{ 'header': 1 }, { 'header': 2 },{ 'color': [] }, { 'background': [] }],
        [{ 'align': [] },{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent

        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown

        ['clean']                                         // remove formatting button
    ];
    
    var quill = new Quill('#editor', {
        modules: {
            blotFormatter: {
                // options
            },
            toolbar: toolbarOptions
        },
        placeholder: 'Write something newsworthy',
        theme: 'snow'

    });
    var form = document.getElementById('news');
    form.onsubmit = function () {
        // Populate hidden form on submit
        var content = document.querySelector('input[name=content]');
        content.value = quill.root.innerHTML;
    }

</script>

@endsection

The tricky bit was copying the quill.root.innerHTML to a hidden input

1 like