I'm trying to access the different methods from tinyMCE, but it can't find get, setContent or insertContent. Anyone got any ideas how I can access these? The following code is a copy from their documentation.
Here is my code so far:
App.vue:
<template>
<div id="app">
<Editor id="test"></Editor>
<button #click="insertData">Test</button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
Editor
},
methods: {
insertData: function () {
Editor.get("test").setContent("This is a test.")
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
// es modulesc
var commonjsrequire = require('commonjs-require');
// NOTE: default needed after require
var Editor = require('#tinymce/tinymce-vue').default;
Vue.component('Editor',
() => import('#tinymce/tinymce-vue')
);
new Vue({
render: function (h) { return h(App) },
}).$mount('#app')
The functions you are after are tied to the tinymce global object. While you define an Editor component in the context of the application the actual API calls for TinyMCE are part of the tinymce global object.
For example:
tinymce.get("test").setContent("<p>This is a test.</p>")
Related
I have implemented the vue2-editor, and here is the below code
<div id="app">
<vue-editor v-model="content"></vue-editor>
<div v-html="content"></div>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<p>Some initial content</p>"
};
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center; */
color: #2c3e50;
margin-top: 60px;
}
</style>
If the content is wrapped with <p> tag then the editor shows the content correctly, if it is wrapped with <div> tag then it throws an exception,
Exception: Uncaught TypeError: Cannot read properties of undefined (reading 'emit')
Few more tags with same issue (<title>,<small>,<span>)
sandbox link for reference: https://codesandbox.io/s/liz23?file=/src/App.vue:0-553
Thanks
Check this codesanbox I made: https://codesandbox.io/s/stack-72533246-vue2editor-div-bug-z8qqp8?file=/src/App.vue
It looks that is a bug of the library, meanwhile it gets fixed you can use this workaound.
import { VueEditor, Quill } from "vue2-editor";
const Block = Quill.import("blots/block");
Block.tagName = "DIV";
Quill.register(Block, true);
Refer to this github issue thread for more info: https://github.com/davidroyer/vue2-editor/issues/63
I am using Vite + Electron to make a desktop app demo.
But it cannot load png resource, but js, css resource is fine. So it worked like this
png canoot be loaded
when I check the console, it shows: Failed to load resource: net::ERR_FILE_NOT_FOUND
Also, the url of the png is weird：
it is not even a common file path
So what happened really ???
Here is my code:
vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
base: path.resolve(__dirname, './dist/'),
plugins: [vue()]
})
index.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
webSecurity: false,
}
})
win.loadFile('dist/index.html')
win.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
App.vue
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="/src/assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
I know perhaps this problem sounds silly, but I just start it and Vue,JS... are really not my comfort zone. So if anyone could help me, I will really appreciate it.
I'm a beginner on PixiJs.
I want show a sprite image as some example, but I'm defeated.
The framework is Vue with Typescript.
I used vue-cli to generate a project ,and only modified the App.vue file like this:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
<div ref='iv'></div>
</template>
<script lang="ts">
// import logo from '#/assets/logo.png';
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';
import * as PIXI from 'pixi.js'
#Options({
components: {
HelloWorld,
},
})
export default class App extends Vue {
refs():any{
return this.$refs
}
app=new PIXI.Application({width:400,height:300})
setup(loader:PIXI.Loader){
const bunny = new PIXI.Sprite(loader.resources.logo.texture);
this.app.stage.addChild(bunny);
}
mounted(){
this.refs().iv.appendChild(this.app.view)
this.app.loader.add("logo","#/assets/logo.png").load(this.setup)
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
but if I use import to load image, like:
import logo from '#/assets/logo.png';
...
mounted(){
...
let s=PIXI.Sprite.from(logo)
this.app.stage.addChild(s)
...
}
It works.
What's my mistake?
How can I use the loader correctly?
I'm trying to use the Amplify Chatbot Component in my application but I keep getting:
Chatbot - Bot not provided.
I've used the Amplify CLI to add Interactions, which added the correct configuration into the aws-exports.js file. I then set the Amplify.Configure to use the exports file.
But when I try to use the component in my app, I can't seem to get it to run.
App.vue
<template>
<amplify-chatbot ></amplify-chatbot>
</template>
<script>
import { Interactions } from 'aws-amplify';
export default {
name: 'App',
components: {
Interactions
},
data(){
return {
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
AWS-Exports
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.
const awsmobile = {
"aws_project_region": "eu-west-1",
"aws_cognito_identity_pool_id": "eu-west-1:fbc545c0-ddac-410b-8f8d-4ba3cffadbb2",
"aws_cognito_region": "eu-west-1",
"oauth": {},
"aws_bots": "enable",
"aws_bots_config": [
{
"name": "ScheduleAppointment_dev",
"alias": "$LATEST",
"region": "eu-west-1"
}
]
};
export default awsmobile;
main.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
Vue.use(AmplifyPlugin, AmplifyModules)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Here's a modified version of your app.vue and that will work:
<template>
<amplify-chatbot v-bind:chatbotConfig="chatbotConfig"></amplify-chatbot>
</template>
<script>
import { Interactions } from 'aws-amplify';
export default {
name: 'App',
data: () => ({
chatbotConfig:{
bot: "addTheBotNameHere",
clearComplete: true
},
}),
mounted() {
Interactions.onComplete("addTheBotNameHere", this.handleComplete);
},
methods: {
handleComplete(err,confirmation) {
if(err) {
alert("bot conversation failed");
return;
}
return "Thank You";
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
I installed uikit with yarn.
yarn add uikit
And additionally less-loader, less and css-loader because this site said so.
Now I tried using UIkit in my App.vue like so.
<template>
<div id="app">
<div class="uk-alert-primary" uk-alert>
<a class="uk-alert-close" uk-close></a>
<p>This is a text!</p>
</div>
<table class="uk-table uk-table-striped">
<tr><td>Hello World!</td></tr>
<tr><td>Hello World!</td></tr>
<tr><td>Hello World!</td></tr>
</table>
</div>
</template>
<script>
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
export default {
mounted: function() {
this.getTestJson();
},
methods: {
getTestJson: function() {
this.$http.get('http://localhost:8090/test').then((res) => {
console.log(res.body)
});
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
This is not enough, the UIkit components are not displayed properly. What else do I have to do?
Do I have to use vuikit?
This link will help, and basically you need to do the following:
After installing uikit package, add this code to App.vue
<style lang="less">
#import "../node_modules/uikit/src/less/uikit.less";
</style>
And then add this code to main.js
import uk from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'
uk.use(Icons)
You can also add global mixin for uk object in case you wanted to use UIKit JavaScript functionality anywhere in your components e.g. this.uk.toggle('#toggle-elm').toggle():
Vue.mixin({
data: function () {
return {
get uk () {
return uk
}
}
}
})
new Vue({
el: '#app',
...