Incorporating a Third-Party JavaScript Library with Vue.js

I'm attempting to integrate the library found at : into my Vue.js project.

However, I am facing difficulties importing and utilizing the scripts, as well as utilizing the library in general.

<script src="bower_components/wysihtml/dist/wysihtml-toolbar.min.js"></script>

After conducting some research, I experimented with solutions like this: . Unfortunately, these methods did not prove successful for me either.

Do you have any suggestions? What could potentially be going wrong on my end? Is it feasible to incorporate this library within my Vue.js project?

javascriptvue.js

Answer №1

Creating a new Vue instance with some data and a mounted function to initialize a wysihtml5 Editor.
<div id="app">
  <div id="toolbar">
    <a data-wysihtml5-command="bold">bold</a>
    <a data-wysihtml5-command="italic">italic</a>
    <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">H1</a>
    <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="p">P</a>
  </div>
  <div id="editor" data-placeholder="Go on, start editing..."></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wysihtml/0.5.5/wysihtml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wysihtml/0.5.5/wysihtml-toolbar.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using dataloader on ammap effectively involves importing the necessary data into the platform

I've been attempting to implement the dataloader feature on ammap without success. Here is my current approach: var birth_map = AmCharts.makeChart( "il_bazinda_dogum_say_dagilim", { "type": "map", "data": { ...

javascriptjsonamchartsammap

the Vue watch function triggered even though no real changes were made

Check out this codepen where a counter can be incremented with an "incr" link: Counter Codepen Now, I have implemented a computed property and a watch function: computed: { test() { let unused = this.counter; return [42]; } }, watch: { test ...

vue.js

The argument in question has not been defined

Experimenting with AngularJS, I encountered an error message in the browser console when trying to display a particular example: Error: Argument 'mainController as mainCtrl' is not a function, got undefined at Error (native) at bb My pr ...

javascripthtmlangularjs

Navigating the world of gtag and google_tag_manager: untangling

Tracking custom events in my react application using Google Analytics has been successful. Initially, I followed a helpful document recommending the use of the gtag method over the ga method for logging calls. The implementation through Google Tag Manager ...

javascriptreactjsgoogle-analyticsgoogle-tag-managernext.js

Creating a switch statement that evaluates the id of $(this) element as a case

I have a menu bar with blocks inside a div. I am looking to create a jQuery script that changes the class of surrounding blocks in the menu when hovering over a specific one. My idea is to use a switch statement that checks the ID of $(this) and then modif ...

javascriptjqueryhtmlcssswitch-statement

Is there a way to maintain the selected position on the drop-down menu for users?

Whenever I choose an option from the drop-down field in my form, it automatically jumps back to the top of the page. Just to clarify, I have a drop-down menu at the top of the page and several input fields below. Users need to scroll down to reach the dro ...

javascripthtmldrop-down-menu

Button to access overlay menu on my map with OpenLayers 3

I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...

javascriptjqueryhtmlcss

Having trouble with running `npm start` on a computer that has different versions of Node and

I have encountered an issue with running a React application on two different computers. One computer, a MacBook, is running the app without any problems, while the other, an Ubuntu 18.04 machine, is having trouble starting it. Here are the configurations ...

javascriptnode.jsreactjs

Using the find() function in Mongoose allows the use of a variable as a model

Would it be feasible to employ a variable in place of the model name when using the find() function in mongoose? For instance, if my website is capable of displaying photos and videos based on the last part of the URL, which could be either /photo or /vide ...

javascriptnode.jsmongodbexpressmongoose

How come useEffect runs only once even when multiple states in the dependency array of useEffect change simultaneously?

<div onClick={() => { updateValue1((x: number) => x + 1); updateValue2((x: number) => x + 3); }} > one? two? </div> const [value1, updateValue1] = useState(1); const [value2, updateValue2] = useState(1 ...

javascriptreactjsreact-hooksuse-effect

The issue of losing focus while using a Bootstrap 4 modal over another modal

Issue with Bootstrap 4: When opening the first modal, the focus becomes trapped inside it, preventing users from focusing on elements outside of the modal. The same issue occurs when opening the second modal – the focus remains trapped within it as inten ...

javascripthtmltwitter-bootstrapbootstrap-4

Tips for optimizing performance by preloading external CSS and JavaScript files from a third-party source in a ReactJS project with webpack

Is there a method similar to using ProvidePlugin for preloading jQuery that can be used to preload third-party CSS and JS files without using import in the entry JS file? The reason I am interested in preloading these files is because I encountered an err ...

javascriptjqueryreactjswebpack

Issue with MomentJS inBetween function consistently displaying incorrect results

I'm currently working on Vue Datatable and I have a specific requirement to search for records between two dates. I am using the moment.js library and the inBetween function to achieve this. Strangely, when I hardcode the dates, the function returns t ...

javascriptdatevue.jsmomentjsdate-parsing

Which specific page initiates the post request?

Seeking help with my post request that originates from a specific page on my website: reqdata = 'text=' + mytext; $.ajax({ type: "POST", url: "/request.php", data: reqdata, cache: false, success: function(html) { alert(html) } ...

javascriptphpajaxhttp-post

A step-by-step guide on integrating Validate.js into your Vue.js project

As a novice full stack developer, I am embarking on the journey of building a portal for my work. The server side will be developed in asp.net mvc 5, while the client side (HTML, CSS, SASS, JS) has been developed by another company. My task is to handle se ...

javascriptvue.jsvalidate.js

Is there a way for me to extend an absolute div to the full width of its grandparent when it is within an absolute parent div?

Here is a structured example of my HTML and CSS: <div class="grandparent"> <div class="row">...</div> <div class="absolute-parent"> <div class="absolute-child">...</div> ...

javascripthtmlcsscss-position

Utilizing jQuery Ajax to submit multiple forms using a single selector in one go

I'm having an issue with jQuery Ajax involving multiple forms. Each time I execute it, only the top form works properly while the others do not function as expected. Can anyone provide assistance with this? Here is the source code: <form id="form_ ...

javascriptphpjqueryajax

What is the best way to send the 'FIN' in node.js?

Update: After meticulously adding all possible options one by one, I still encountered a 120-second timeout. Quite perplexing. Upon further investigation, it appears that on my Windows 7 machine, it consistently takes exactly 120 seconds (or rather, 122 s ...

javascriptnode.js

What is the proper way to reference the array you require within a function?

Is there a way to input the name of an array (such as a, b, or any other chosen array) into a function? I've tried using inputs[3].value but it doesn't seem to be working. How can I achieve this? I have a total of 4 fields, and I think using sele ...

javascripthtml

Imported function encounters a non-function error

I'm encountering a puzzling reference/binding error that I can't seem to resolve: import React from 'react'; var { View, StyleSheet, Alert, AsyncStorage } = require('react-native'); import {Button} from 'react-native-el ...

javascriptreactjsreact-nativenative