blowstack / ckeditor-nuxt Goto Github PK

help me fix image caption

hi,

trying it out with the exact code from your example i get a bunch of errors in the console:

the url presented is https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-plugincollection-plugin-name-conflict and tells me Two plugins with the same pluginName were loaded but i didnt load any of the plugins..

what did i do wrong?

fwiw, this is my component:

<template>
  <div class="mt-10">
    <v-row class="d-flex flex-column flex-md-row">
      <v-col cols="auto">
...        snip...
      </v-col>
      <v-col cols="6">
        <h1>lessons</h1>
        <client-only placeholder="loading...">
          <ckeditor-nuxt v-model="contentHolder" :config="editorConfig" />
        </client-only>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: 'Lessons',
  components: {
    'ckeditor-nuxt': () => {
      if (process.client) {
        return import('@blowstack/ckeditor-nuxt')
      }
    },
  },
  data: () => ({
    editorConfig: {
      simpleUpload: {
        uploadUrl: 'path_to_image_controller',
        headers: {
          Authorization: 'optional_token',
        },
      },
    },
    contentHolder: '',
  }),
}
</script>

<style scoped></style>

How to remove the Type your title with h1, and type or paste content, it's really annoying.

How do I access editor from the component ?

My endpoint funtionality

public function addImage(Request $request)
{
$request->validate([
'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048', // Adjust validation rules as needed
]);

if ($request->hasFile('image')) {
    $image = $request->file('image');
    $imageName = time().'.'.$image->extension();
    $path = $request->file('image')->storeAs('uploads', $imageName);
    return response()->json( ['url'=> $path]);
}
     return response()->json(['message' => 'Image upload failed'], 400);
    
}

Hi, thanks for creating this component. I was wondering how to add Markdown plugin and use Balloon editor ?

Experiencing Error 419 after selecting an image in my Vue 2 and Nuxt.js 2 application. Has anyone resolved this issue? Additionally, I attempted to load static images from the database, but encountered problems with styling. Can anyone provide assistance?

This common solution editor.model.document.selection.getFirstPosition() doesn't work with nuxt, because in this library we don't have the event @ready which is available in '@ckeditor/ckeditor5-vue2'. We can get the cursor only from the object which comes from the @ready event. Does anyone know how to get the cursor position?

How to remove title placeholder?
Thank!

Hello.
i have a issue with keyboard of japanese
ckeditor/ckeditor5#11926
i see it fixed in new version of ckeditor5

Could you like update new version of ckeditor

How to add Plugin "ckfinder" to your package ckeditor-nuxt?

How can i use Balloon block editor instead of ClassicEditor?

how to use mention ?
I did like others seems not working

I'm using for first time your plugin and works great !!...but I don't know how could I implement something like this Ckeditor docs.

Any help ?....If is not posible to implement is there any other option I could use ?
Thanks for your time.

How to insert HTML embed or Facebook and youtube video embed?

Hello @blowstack.

I will need help in dealing with the cors error I am having when I try to upload images.

I am using Laravel for my API with authentication using Laravel Sanctum. This means that I have to set withCredentials to true in the simpleUpload option. So I have

simpleUpload: {
  uploadUrl: <api_upload_url>,
  withCredentials: true,
  headers: {
    'X-XSRF-TOKEN': this.$cookies.get('XSRF-TOKEN'),
  },
},

But I still get cors error. I have tried adding 'Access-Control-Allow-Origin': '*' to the headers but it didn't work. However, every other request to the API works.

Any idea what I am missing?

.. as in making it dark for a dark theme..

i am looking for a while now but i cant find a way to do that.. apart from rollin gmy own installation and what not and i am not really sure if i'd even get it running.

i found this https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html but am not sure how to apply this to the nuxt plugin version

thank you.

Hi,

Whenever I try to change the language in the editorConfig, it doesn't work.
I searched and it seems that I must import the language
But everytime I do, I have this error :
window is not defined

Here's how I import the language :

import '@blowstack/ckeditor5-full-free-build/build/translations/fr';

Any idea on how I can fix this ?
Best regards,

Hi guys,

I had "yarn add @blowstack/ckeditor-nuxt", it appears in the package.json
but when I launch my nuxt server I get this error.

This dependency was not found:

• @blowstack/ckeditor-nuxt in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Editor/Editor.vue?vue&type=script&lang=js&

Hi folks,

it seems that this lib causes memory leaks. :/

For some reason it is not possible to show the Image Toolbar.
The Plugin is installed, but never shown.
Original:

Your Version:

I tried anything but i cant find a fix.

CKEditor-Configuration looks like this :
removePlugins: ['Title'], toolbar: { items: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'indent', 'outdent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo' ] }, image: { resizeUnit: 'px', toolbar: [ 'toggleImageCaption', 'imageTextAlternative', 'imageStyle:full', 'imageStyle:side' ] }, simpleUpload: { uploadUrl: process.env.baseUrl + 'ImageUpload/add', headers: { 'Bearer': this.$cookiz.get('access-token') } }

How to fix it?

Is Mathtype free to use?

Hi,

I am having an issue - where I can use thre simple upload, I have an API endpoint that successfully stores the image in a Amazon s3 bucket and returns public URL ... however, I am getting this error:

Uncaught (in promise) CKEditorError: can't access property "default", e is undefined
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-can't access property "default", e is undefined

I am use the default/example setup - but obviously with my own endpoint for image upload. Returns 200 and sucessfully returns valid image URL.Not sure why its getting this error>? Any help much appreciated

I'm trying to change the label and tooltip of some of my toolbar items. I did it like in the documentation, but it's

data() {
    return {
      editorConfig: {
        removePlugins: ['Title'],
        toolbar: [
          'bold', 'italic', '|', 
          {
            label: 'YouTube/Spotify',
            tooltip: 'YouTube/Spotify Embed',
            items: [ 'mediaembed' ]
          },
          {
              label: 'Soundcloud',
              tooltip: 'Soundcloud Embed',
              items: [ 'htmlembed' ]
          },
        ]
      },
      contentHolder: ""
    }
  },

I'm getting ckeditorNuxt.common.js:194 toolbarview-item-unavailable

Hi, Im looking for way to not use base64, right now my upload works well, image saves to server but I cant figure out how to return a image url in json, I tried some names for returning property but got no luck, but then I noticed that image is there but not showing and its src is base64, so my question is If I can somehow set image src to be a link instead of base64, thanks in advance