search

nhn / tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
http://ui.toast.com/tui-editor
MIT License
16.91k stars 1.71k forks source link

[SyntaxError: Unexpected token] on toastui-editor.css #3242

Open MatheusAraujoLexArt opened 2 months ago

MatheusAraujoLexArt commented 2 months ago

I have a Vue project that im trying to use toastui-editor textarea.

Problem

In the screen i can see only an object shape like this {} and this error in the image below in the terminal.

I did the setup with: <div id="editor"></div>

My imports: import '@toast-ui/editor/dist/toastui-editor.css'; import '@toast-ui/editor/dist/theme/toastui-editor-dark.css'; import Editor from '@toast-ui/editor';

Inside mounted() function

 this.editor = new Editor({
        el: document.querySelector('#editor'),
        height: '500px',
        initialEditType: 'markdown',
        // previewStyle: 'vertical',
        theme: 'dark',
    });

Versions

"@toast-ui/editor": "^3.2.2" "express-vue": "^4.0.13", Node: v11

Screenshots

image Untitled design image

My project Dependencies

"dependencies": { "@directus/sdk": "^9.14.2", "@growthbunker/vuetimeline": "^0.1.17", "@toast-ui/editor": "^3.2.2", "async": "^2.6.3", "aws-sdk": "^2.1058.0", "axios": "^0.26.1", "babel-register": "^6.26.0", "bcrypt": "^5.0.1", "bcrypt-nodejs": "^0.0.3", "body-parser": "^1.19.1", "bower": "^1.8.13", "bug-killer": "^4.4.4", "chalk": "^1.1.3", "cheerio": "^0.22.0", "chromedriver": "^2.46.0", "clockwork": "^0.1.4", "code-protect": "^1.0.3", "compression": "^1.7.4", "connect-ensure-login": "^0.1.1", "connect-mongo": "^4.6.0", "cors": "^2.8.5", "cron": "^1.8.2", "errorhandler": "^1.5.1", "es6-promise": "^4.2.8", "eslint-config-airbnb-base": "^11.3.2", "express": "^4.17.2", "express-fileupload": "^1.2.1", "express-flash": "^0.0.2", "express-session": "^1.17.2", "express-status-monitor": "^0.1.5", "express-validator": "5.3.1", "express-vue": "^4.0.13", "facebook-api-video-upload": "^1.4.1", "fbgraph": "^1.4.4", "firebase-admin": "^10.0.2", "form-data": "^4.0.0", "fs": "0.0.1-security", "fs.promises": "^0.1.2", "github": "^7.2.0", "google-auth-library": "^7.11.0", "instagram-node": "^0.5.8", "isomorphic-fetch": "^3.0.0", "jimp": "^0.16.1", "jquery": "^3.6.0", "jwplatform": "0.0.6", "lastfm": "^0.9.3", "lien": "^3.3.1", "lob": "^3.9.0", "lodash": "^4.17.21", "lusca": "^1.7.0", "m3u8-parser": "^7.1.0", "minify-all": "^1.2.2", "moment": "^2.29.1", "mongodb": "4.3.0", "mongoose": "^5.13.14", "morgan": "^1.10.0", "multer": "^1.4.4", "ngrok": "^2.3.0", "node-cron": "^3.0.0", "node-foursquare": "^0.3.3", "node-linkedin": "^0.5.4", "node-minify": "^2.4.1", "node-sass": "^7.0.1", "node-sass-middleware": "^0.10.0", "node-split": "^1.0.1", "node-vad": "^1.1.4", "nodemailer": "^6.7.2", "open": "^8.4.0", "openai": "^3.3.0", "opn": "^5.5.0", "passport": "0.3.2", "passport-facebook": "^2.1.1", "passport-github": "^1.1.0", "passport-google-oauth": "^1.0.0", "passport-instagram": "^1.0.0", "passport-jwt": "^4.0.0", "passport-linkedin-oauth2": "^1.6.1", "passport-local": "^1.0.0", "passport-oauth": "^1.0.0", "passport-openid": "^0.4.0", "passport-twitter": "^1.0.4", "paypal-rest-sdk": "^1.8.1", "pm2": "^5.1.2", "pretty-bytes": "^5.6.0", "pug-loader": "^2.4.0", "python-shell": "^0.4.0", "querystring": "^0.2.1", "r-json": "^1.2.10", "raven": "^2.6.4", "request": "^2.88.2", "scte35": "^0.6.0", "shortid": "^2.2.16", "stripe": "^4.12.0", "tumblr.js": "^1.1.1", "twilio": "^3.73.0", "twit": "^2.2.11", "twitter": "^1.7.0", "twitter-api-v2": "^1.14.2", "uglifyjs-webpack-plugin": "^2.2.0", "uuid": "^3.4.0", "validator": "^13.7.0", "vis-data": "^7.1.7", "vis-timeline": "^7.7.2", "vue-scroll": "^2.1.13", "vue-swal": "0.0.6", "webdriverio": "^7.16.13", "winston": "^2.4.5", "ws": "^8.14.2", "youtube-api": "^3.0.1" }, "devDependencies": { "babel-cli": "^6.23.0", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "chai": "^3.5.0", "cross-env": "^5.2.1", "eslint": "^8.7.0", "eslint-config-airbnb-base": "^11.3.2", "eslint-plugin-import": "^2.25.4", "eslint-plugin-vue": "^3.14.0", "mocha": "^9.2.0", "pug": "^3.0.2", "pug-plain-loader": "^1.1.0", "sinon": "^1.17.6", "sinon-mongoose": "^1.3.0", "supertest": "^6.2.1", "wdio-chromedriver-service": "^0.1.3" },