chmln / vue-wysiwyg

A lightweight WYSIWYG HTML editor for Vue.js

Usage

Install vue-wysiwyg

npm install vue-wysiwyg --save

OR

yarn add vue-wysiwyg

In your main.js:

import wysiwyg from "vue-wysiwyg";
Vue.use(wysiwyg, {}); // config is optional. more below

Also make sure to load the stylesheet. The exact syntax will depend on what preprocessor you use.

@import "~vue-wysiwyg/dist/vueWysiwyg.css";

In your components:

<wysiwyg v-model="myHTML" />

Config options

All keys are optional.

{
  // { [module]: boolean (set true to hide) }
  hideModules: { "bold": true },

  // you can override icons too, if desired
  // just keep in mind that you may need custom styles in your application to get everything to align
  iconOverrides: { "bold": "<i class='your-custom-icon'></i>" },

  // if the image option is not set, images are inserted as base64
  image: {
    uploadURL: "/api/myEndpoint",
    dropzoneOptions: {}
  },

  // limit content height if you wish. If not set, editor size will grow with content.
  maxHeight: "500px",

  // set to 'true' this will insert plain text without styling when you paste something into the editor.
  forcePlainTextOnPaste: true,

  // specify editor locale, if you don't specify this, the editor will default to english.
  locale: 'hu'
}

Available Modules:

• bold
• italic
• underline
• justifyLeft
• justifyCenter
• justifyRight
• headings
• link
• code
• orderedList
• unorderedList
• image
• table
• removeFormat
• separator

Available Locales:

• english (default)
• hungarian
• dutch
• german

Note on the image upload API endpoint:

• Image is uploaded by multipart/form-data
• Your endpoint must respond back with a string, the URL for the image - e.g. http://myapp.com/images/12345.jpg

vue-wysiwyg's Issues

Add strikethrough <s>

Any plans to add a <s> strikethrough button?

Example: I am not sure certain this feature is used often.

Config options not working?

So in my project I've done the following:

import wysiwyg from "vue-wysiwyg";
Vue.use(wysiwyg, {
    hideModules: [
        "bold",
        "image",
    ],
});

Buuut.... I still get the image and bold options.

Any ideas? It would be nice if you updated the docs with the available options too, because it isn't necessarily obvious what they would be.

<button>s should have type="button" to prevent form submission

The <button> that are used for the headings module will submit any form that wraps the WYSIWYG editor as the default behaviour for these elements is "submit". You can prevent that by adding <button type="button">, see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type

Link not working

looks like the link module is not working with the current version.

Validate image

How can i validate image count

Doesn't compile in prod mode

Here is error o_O

[email protected] build:prod C:\home\vue-wysiwyg
rm -rf dist/* && BABEL_ENV=production BUILD=prod node build/build.js

�� ���� ����७��� ��� ���譥�
��������, �ᯮ��塞�� �ணࠬ��� ��� ������ 䠩���.

Is there a way to remove spacers with modules?

Hi, thanks for your work I like the simplicity.

I was just wondering if it's possible to remove spacers when removing modules as I've ended up with double spacer in the toolbar:

It's not a big issue just would be nice to clean up.

Using the component multiple times in the same parent

First of all, kudos for you work as this is a very simple yet fully working component. It's slim and I like it much more that those bloated ones 👍

It is generally working well but when I use it in a v-for directive.

Context:
I have multiple articles in my form and each of them have a wysiwyg component. They are added and removed dynamically. So each form component can have 0+ wysiwyg content at any time.

<el-form-item
         v-for="(article, index) in campaign.articles"
         :key="index"
         :prop="'articles.' + index + '.value'"
         :id="`form_campaign_article_${index + 1}`"
       >

<wysiwyg :ref="wysiwyg_article_${index + 1}" v-model="article.content" />

...

Issue:
When I add a link to one of the wysiwyg all others get that link too.

Expected behavior:
The link should be added only to the current wysiwyg I'm writing on

I'd like to help if you can give me some directions on what I should look for to fix the issue

Issue with bolding / highlighting

Hey,

I'm getting issues when trying to bold / highlight text - using Chrome 61 / Firefox 57.

Using the example site i can replicate it - https://chmln.github.io/vue-wysiwyg/

Video - https://monosnap.com/file/RxgVx6PH0qwwIeECi2kWgsacanEMBs

Thanks!

上传图片问题

这个插件很好用，只不过这api也太少了吧！能不能自定义图片上传事件呢，因为有跨域，崩溃，现在是1.15

DropZone not working and not giving any errors

Hi,

Hope you are well? Could you please help with the dropzone? When i click on the picture icon, it does not show the dropzone. Please see image for more imformation. Thank you.

issue headline/image/link etc.

Hello,
I have an issue when selecting something else than headline.
When I click on Link than the same dropdown appears a s Headline "h1, h2, h3".

I don't know where the bug is.
Even when I try to hide the "headings" module, it appears.

Some advice?

My main.js
import wysiwyg from "vue-wysiwyg"; import "vue-wysiwyg/dist/vueWysiwyg.css"; Vue.use(wysiwyg, { hideModules: { headings: true } }); // config is optional. more below

Code licensing

Hello,
I did not found any information how is this project licensed.
Can author add information about this,
so we can decide can we use this component in commercial projects?
Thanks.

Scrolling and making toolbar fixed?

Is there any way to make it so we can set a max-height on the content area so that it scrolls, and the toolbar stays fixed at the top?

image module not works.

i try to use the image module but when i select the image in dropzone display this error:

vueWysiwyg.js?fcc0:1 Uncaught TypeError: Cannot read property 'focus' of undefined
    at VueComponent.exec (vueWysiwyg.js?fcc0:1)
    at o.boundFn (vue.esm.js?65d7:123)
    at o.l.emitEvent (vueWysiwyg.js?fcc0:1)
    at o.l.emit (vueWysiwyg.js?fcc0:1)
    at FileReader.eval (vueWysiwyg.js?fcc0:1)

Chrome Browser Error due to DOM redraw time

Chrome Browser throws an error when the text input is created dynamically. I believe this is because it takes a moment for the DOM to be redrawn and the input to become available.

vueWysiwyg.js?5768:1 Uncaught TypeError: Cannot read property 'innerHTML' of undefined
at VueComponent.emit (vueWysiwyg.js?5768:1)
at VueComponent.boundFn [as emit] (vue.runtime.esm.js?ff9b:191)
at VueComponent.eval (vueWysiwyg.js?5768:1)
at l (vueWysiwyg.js?5768:1)

Weird error that doesn't actually impact performance. But should probably be fixed.

To recreate have your WYSIWYG component be created off of an if block that renders when clicking a button or something.

How can i use different "hideModules" for each wysiwyg?

I not able to find different hideModules for each wysiwyg. I can only apply for all wysiwyg with one settings.

csrf token dropzoneOptions

When I set uploadURL and try to load images on server I get csrf error.
On the server side I have Laravel API. How can I set csrf token in wysiwyg image dropzoneOptions?

Link module does not work properly

i try to use the link module but i can't click in the inputs of the link module only works if use the tab button and also is printed the url content next to the insert button.

Image:

options issue

Hello, I found the config options is not working.
It seems like the option has been missed in the js, Because after I use the code from the left column of this, the options is working.(But the table is not defined)

Thank for the plugin, it's the only one wysiwyg plugin I can use.

Toolbar runs off screen on small screen sizes.

I've had issues with the component running out of the container it's in on small screen sizes (Nexus 5, Iphone 6s).

Current solution is setting the .editr--toolbar to have a height of auto, and a flex-wrap value.

.editr--toolbar {
    background: #f6f6f6;
    border-bottom: 1px solid #e4e4e4;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    flex-wrap: wrap;
}

However the separators between buttons break. I've disabled them with following rule as well.

.editr--toolbar a.vw-btn-separator {
    width: 1px;
    margin: 0 10px;
    display: none;
}

Not sure if there is a better fix.

max characters in wysiwyg?

how can i set the max characters of the editor? is possible?

options issue (not even evaluated)

First thanks for the plugin, look good.
However, I am not able to specify my upload URL (or any other options)

import Wysiwyg from "vue-wysiwyg";

Vue.use(Wysiwyg, {
  hideModules: { "bold": false },
  image: {
   uploadURL: "/my/upload",
   dropzoneOptions: {}
  }
})

I just tried building the trunk and got same error.
I am using vue-loader (so the component is called from a .vue file, maybe an emitter problem?)

Regards

vue and vue-template-compiler 2.3.2 version upgrade

nuxt fails

Clicking on image opens up heading size

The image uploader button seems to bound with header resizer component.

hide heading module

Hi, I have a little problem with hiding headings module.
I think I've done everything right, but it still not working.

This does not work
Vue.use(wysiwyg, { hideModules: { "headings": true } });

This does...
Vue.use(wysiwyg, { hideModules: { "bold": true } });

Is there something I am missing?
Thank you for your response

Edit: The same problem is with orderd and undordered lists

Pre-compile files to ES5

Cool package!

I tried using it with https://github.com/vuejs-templates/webpack boilerplate, but get this error when I include it into the project:

Uncaught SyntaxError: Unexpected token import

Which happens at src/index.js 1st line import statement.
It's because the package doesn't offer built dist files - the package.json has defined

"main": "src/index.js"

which is in ES6. The thing is that most webpack configurations exclude node_modules from transpilation, and expect to find ES5 code, as it would be inefficient to transpile the whole node_modules on each build.

The solution would be to offer the compiled library, such as dist/vue-wysiwyg.js, and add that file into the "main" propery of "package.json". Here are some issues that talk about similar problems:

charliekassel/vuejs-datepicker#15
matfish2/vue-stripe#3

Thanks!

Setting empty string to props doesn't change the content

You can see in this screen shot I have set html props value & it showing correctly

Now when I change the html props value to empty string the props value is changing but the content of div isn't changing.

I have tried with v-model but not working also in the repo example I added a button & programmatically to set data msg to empty string that doesn't work either. Props changing but content of div not changing.

How do I disable dropzone?

I just want the uploaded image converted to base64 and display on the editor.

Config issues

Hi there!
It seems that hideModules in config does not work. I am passing config according to documentation, but still all the modules that i want to be hidden, are visisble

Documentation Needs to be Updated

Update the documentation on github to reflect the correct naming of modules:

"justifyLeft"
"justifyCenter"
"justifyRight"

(instead of align)

Configuration not working to hide modules!

I used the sample code to initiate this component but hideModule is not working in configuration for v1.2.6.

Vue.use(wysiwyg,{ hideModules: { "bold": true, "table": true, "image": true } })

Aligning image left or right

Hello man,
I've looked at source code and get a little bit lost cause I'm still new to Vue, but I need one simple feature for something I'm working on. I thought to implement it by myself, but understanding Vue and es6 is still complicated for me so you would probably do it faster. Could you implement that clicking on image provide additional 3 buttons for image alignment (left center or right). It is just one additional CSS attribute to put (float:left, float:right...) as some other wysiwyg editors have. My idea was that buttons show on bottom of image when you click on it inside those 'selection box' (btw I couldn't find code for it)... I would be really thank full if you can implement this or give me instructions how to do by myself.

Thanks

Multiple Editors on a Page Image Issue

It appears if you have multiple editors on a page and upload and image, the image is added to all instances of the editor.

Enclosing content in a defined tag

Currently it seems that any content included in the editor is enclosed within a default div tag. Are there any plans to improve this and include a specific tag, for example, [p] ..[/p]?

Thanks in advance.

text alignment options

More of a feature request..
Text alignment (either for the entire document or for a selected block of text) should be added as one of the toolbar buttons. I think that's the last component which would make this fully functional.

Insert table not working

Version 1.4.0

Error: Uncaught TypeError: Failed to execute 'addRange' on 'Selection': parameter 1 is not of type 'Range'.

How to reproduce: Present on demo page https://chmln.github.io/vue-wysiwyg/

multiple lists behave buggy

Hey there,

just searched for a wysiwyg editor and tested this out on the demo page. The lists did not work as expected and just wanted to let you know. Here's a GIF:

dropzoneOptions not working

Dropzone options do not seem to be properly passed in as per the documentation.
In practice, configuring custom upload headers as below won't work:

Vue.use(wysiwyg, {
    image: {
        uploadURL: "/api/myEndpoint",
        dropzoneOptions: {
              "my-header": "some data"
        }
      },
});

Placeholder

How to set custom placeholder?

Uncaught ReferenceError: table is not defined

Vuejs Webpack template Vue 2.4.2.
vue-wysiwyg 1.2.7

Error at hitting the "Insert" button in the table section.

Uncaught ReferenceError: table is not defined at VueComponent.insertTable (vueWysiwyg.js?fcc0:1) at Proxy.boundFn (vue.esm.js?65d7:179) at submit (vueWysiwyg.js?fcc0:1) at HTMLFormElement.invoker (vue.esm.js?65d7:1821)

Set up:

main.js

import wysiwyg from 'vue-wysiwyg';
Vue.use(wysiwyg, {});
import 'vue-wysiwyg/dist/vueWysiwyg.css'

in component:
<wysiwyg v-model="problemBody" placeholder="Describe the Problem..."></wysiwyg>

Perhaps something I'm doing wrong?

V-Modal binding broken

or

V-model binding does not always update properly.

content of vue-wysiwyg is not reactive.

if i change the data model out of the wysiwyg, the editor not update the changes how can i make it reactive?.

or how can i clear the content?

In IE 11 the v-model is not updating

In IE 11, when entering text into the wysiwyg box, the corresponding v-model is not being updated.

Wrapping the component in a custom component. Emits "input" event?

I want to embed this (great) component in another one- essentially adding a disabled function- so when disabled, displays the html content of the v-model bound property.

I'm using the custom component template as follows:

Usage Example:

...
   <my-component v-model="dataModel" :disabled="reasontoDisable" />
...

Custom Component Template: MyComponent.vue

<template>
    <div v-if="disabled">
      <p v-html="formData"></p>
    </div>
    <div v-else>
      <wysiwyg v-model="formData" @change="updated" />
    </div>
</template>

<script>

import SomeWrappedComponent from 'wherever'

export default {
  props: {
   value: {
    required: true
   },
   disabled: {
     type: Boolean,
     default: false
   }
  },

  methods: {
    updated (value) {
     this.$emit('input', value)
    }
  },

 data () {
  return { formData: this.value }
 }
}
</script>

Custom elements?

Is it possible to extend functionality to use custom elements?

Feature - Code Block Option

Would be great to get a code block <pre></pre> option added to the modules.

Additional param in dropzone?

Hi, first of all thanks for share this component.
I have one doubt, how can i pass additional params to the dropzone component? i need to send a token in the upload request to grant permission and i can't find how to do that with your component.
Thanks in advance!

Firebase endpoints for uploadURL

I'm having issues setting this up with firebase. Is the endpoint for the firebase storage the same as the databaseURL? Help with regard to this is greatly appreciated! (And an example perhaps)

Firefox UI bugs

Firefox Quantum 58.0.2 (64). Clear Win 10 1703 64.
Ones apply some styles such as bold, italic, etc. the UI did not respond on the other action buttons. No alighnment, no remove formatting or something else. Just nothing happens.

Tested with Opera 51.0.2830.34 - ok.
Tested with Chrome 64.0.3282.186 - ok.
Android 7.1.2 Chrome 63.0.3239.111 - ok.
Android 7.1.2 Firefox - unstable working and freezes browser after 10 sec of usage.