Resizing plugin not supported!

[hbsoftco]

https://alex-d.github.io/Trumbowyg/documentation/plugins/#plugin-resizimg

[ankurk91]

@hbsoftco

https://jsfiddle.net/zx2L1atq/5/

PS. You are correct, it is working one official demo but not with Vue. No errors in console even.

[TomotakaFukami]

@ankurk91 Hi! I want that feature. Do you have any plans to respond?

[ankurk91]

I have responded already, i am unable to figure out, why it is not working. No clue

[GuillermoADC]

Hi guys, I'm using the 3.x branch an i have the same issue with the resizimg plugins. In order to fix the issue, i added the dependencie jquery-resizable-dom to the project and imported in the Component.js file

//Component.js
import jQuery from 'jquery';
import 'jquery-resizable-dom';
import {h} from 'vue';
import 'trumbowyg'

[ankurk91]

Thanks i will try this soon

[GuillermoADC]

I just check it again. There is not need to modify the component. You only need add the reference to jquery-resizable

yarn add jquery-resizable-dom
yarn install

And in the template page add the reference before Trumbowyg, you will have something like this:

import 'jquery-resizable-dom/dist/jquery-resizable'
  import Trumbowyg from '../src/index.js';
  import 'trumbowyg/dist/ui/trumbowyg.min.css';

  // Plugins are optional
  import 'trumbowyg/dist/plugins/colors/trumbowyg.colors.js'
  import 'trumbowyg/dist/plugins/colors/ui/trumbowyg.colors.min.css'
  import 'trumbowyg/dist/plugins/pasteembed/trumbowyg.pasteembed.js'
  import "trumbowyg/dist/plugins/resizimg/trumbowyg.resizimg.min.js"
  export default {
    name: 'app',
    data() {
      return {
        form: {
          content: '<h1>Preloaded content <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png"></h1>',
          body: null,
        },
        // http://alex-d.github.io/Trumbowyg/documentation.html#basic-options
        configs: {
          basic: {
            autogrow: false
          },
          advanced: {
            autogrow: true,
            removeformatPasted: true,
            // Adding color plugin button
            btnsAdd: ['foreColor', 'backColor'],
            // Limit toolbar buttons
            btns: [
              ['bold', 'italic'], ['formatting'], ['link'],
              ['foreColor'], ['backColor'],
            ]
          },
        },
      }
    },
    components: {
      Trumbowyg
    },
    methods: {
      submit() {
        console.log('Form submit event', this.form);
        alert("Form submitted.")
      },
      setNewValue() {
        console.log('Set new value');
        this.form.content = '<h3 class="bg-success">New content inserted</h3>';
      },
      listenToBlurEvent(event) {
        console.log("listen to blur event")
      },
      listenToInitEvent(event) {
        console.log("listen to init event")
      }
    },
  }

Here is a sample project with vue-cli and the current version of vue-trumbowyg example-vue-trumbowyg

[ankurk91]

Glad that issue has been resolved 🥳🥳