Feature request TipTap editor about laravel-splade

[boranbar]

It would be great if we had a component for a popular rich text editor like CKEditor, TinyMCE etc...

[pascalbaljet]

Thanks to great work by @J87NL, Splade now supports the Jodit editor as of v1.4.10:

<x-splade-form>
    <x-splade-wysiwyg name="body" />
</x-splade-form>

Because Jodit's stylesheet is quite large, I decided not to include it in the default style.css, so you need to manually add it to the main app.js file:

import "@protonemedia/laravel-splade/dist/style.css";
+ import "@protonemedia/laravel-splade/dist/jodit.css";
import { renderSpladeApp, SpladePlugin } from "@protonemedia/laravel-splade";

I'll soon add this to the docs!

[pascalbaljet]

Anyone familiar with Jodit? https://xdsoft.net/jodit/

[rodrigopedra]

Tiptap maybe? https://tiptap.dev/

[thewebartisan7]

Ops yes right tiptap.dev )) Updated, thanks.

[pascalbaljet]

We're using Quill in one of our projects, and I like it. However, it has been over three years since there has been a new release which worries me. They're working hard on the next version, though! Native support for tables and uploads in the editor are very welcome.

[uqjohart]

Vuequill could be added very quickly

npm install @vueup/vue-quill@latest --save

Then in app.js add Quill.

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
createApp({
    render: renderSpladeApp({ el })
})
    .use(SpladePlugin, {
        "max_keep_alive": 10,
        "transform_anchors": false,
        "progress_bar": true,
        "components": {
            QuillEditor
        }
    })
    .mount(el);

How are you adding it to your blade? I've been wracking my brain and just cant get it to render on my splade form for the life of me. I looked at the doco and they just seems to use a

but this wont render in the component.
(apologies, I'm still learning so I'm pretty stupid)

My simple splade comp:

<x-layout>
  <x-panel>
    <x-splade-lazy>
       <x-splade-form :default="$experiment">
         <div id="editor"></div>
         // also tried <x-splade-textarea name="notes" label="Notes" id="editor" />
       </x-splade-form>
        </x-splade-lazy>
    </x-panel>
</x-layout>

It just refuses to render.

[MichInf]

following the response from @HUGE-D1CK-10-INCHES , it was important for me to use v-model:content instead of :value to make the data submission work properly in the form and avoid null request. I used a syntax similar to the example.

  <div class="rounded-md border border-gray-300 shadow-sm">
      <quill-editor name="description" v-model:component="form.description" componentType="html" toolbar="full" />
      <x-splade-input type="hidden" name="description" />
  </div>

[hipoagencia]

v-model:component="form.description"

Like this i get no errors:

<div class="rounded-md border border-gray-300 shadow-sm">
       <quill-editor name="descrip" v-model="form.descrip"  toolbar="full" />
</div>

But i cant get the value on $request.. Thanks for your time!

[hipoagencia]

:content

using v-model:content="form.description"

i could achive this:

The complete code:

<quill-editor name="descrip" v-model:content="form.description" componentType="html" toolbar="full" />
<x-splade-input type="hidden" name="description" />

[hipoagencia]

Anyone familiar with Jodit? https://xdsoft.net/jodit/

Do you pretend to make a tutorial with how we can implement this? It will be awesome.