Closed iiCe89 closed 4 years ago
That error is occurring in your custom-elements-es5-adapter.js
polyfill. Where is it from? Not a permanent solution, but try removing it and see if the error goes away.
Hey that fixed the error however buttons still not responding at all
Can you post an example on https://codepen.io/ (or similar) that reproduces the issue?
I have the same issue. The buttons are enabled, and I can format the text with hot keys. But clicking the buttons has no effect.
No errors in the console (safari/ff/chrome)
Hey i fixed issue it was due to conflicts with JS files i just had to do some tweaking etc to get it working very trial and error
@iiCe89 wow... yes, same here. Thanks a lot, your comment made me try it at all :)
I get it to work when I include trix in another pack, but then Vue does not render components and shows NotSupportedError: Operation is not supported
in trix.js:1417
.
Weird - I'm trying more.
I was able to work around this issue by nesting the trix editor in a vue component like this: https://jsbin.com/femumirela/1/edit?html,output
oh cool! I can confirm: copying the HTML into the component works.
Wrapping it into an empty component and showing it via <slot></slot>
does not work.
Not sure what's the best way forward for me now. I guess somehow using the form fields and reassembling the trix inside the component... or just leaving the plain HTML copy inside there until a real solution is found.
Anyway - thanks @Bloodyludi
<template>
<span>
<input type="hidden" name="story[body]" id="story_body_trix_input_story_7" value="" /><trix-editor id="story_body" input="story_body_trix_input_story_7" class="trix-content" data-direct-upload-url="http://localhost:3000/rails/active_storage/direct_uploads" data-blob-url-template="http://localhost:3000/rails/active_storage/blobs/:signed_id/:filename"></trix-editor>
<slot></slot>
</span>
</template>
This issue has been automatically marked as stale after 90 days of inactivity. It will be closed if no further activity occurs.
Also had this issue with Vue + Trix. Ended up changing the layout for the page where I was using trix so that it wasn't loading Vue.
This is still a problem. Happening in Rails 6 with Action Text. Do we have any workaround that isn't either 1) Not use Vue or 2) move Trix outside of the Vue app?
In my project this error persists me, I have the following:
rails 6.0 ruby 2.6.6
installed with action text
package.json
{
"name": "appname",
"private": true,
"dependencies": {
"@rails/actiontext": "^6.0.3-2",
"@rails/webpacker": "5.2.1",
"@shopify/draggable": "^1.0.0-beta.8",
"@tailwindcss/ui": "^0.5.0",
"alpinejs": "^2.5.0",
"array-to-sentence": "^2.0.0",
"axios": "^0.18.0",
"copy-text-to-clipboard": "^2.0.0",
"cropperjs": "^1.5.6",
"humps": "^2.0.1",
"jquery": "^3.4.1",
"lodash": "^4.17.10",
"moment": "^2.23.0",
"postcss-loader": "^3.0.0",
"tailwindcss": "^1.6.2",
"trix": "^1.2.0",
"v-tooltip": "^2.0.3",
"vee-validate": "^2.1.0-beta.8",
"vue": "^2.5.16",
"vue-avatar-editor-improved": "^1.0.4",
"vue-clipboard2": "^0.3.1",
"vue-i18n": "^8.3.0",
"vue-loader": "^15.7.1",
"vue-moment": "^4.0.0",
"vue-select": "^2.4.0",
"vue-slim-tabs": "^0.4.0",
"vue-template-compiler": "^2.5.16",
"vue-truncate-filter": "^1.1.7",
"vue-turbolinks": "^2.0.3",
"vue-upload-component": "^2.8.16",
"vue-wysiwyg": "^1.7.2",
"vuejs-datepicker": "^1.5.2",
"vuejs-logger": "^1.5.3"
},
"devDependencies": {
"mini-css-extract-plugin": "^0.8.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-dev-server": "3.11.0"
},
"scripts": {
"webpack:analyze": "yarn webpack:build_json && yarn webpack:analyze_json",
"webpack:build_json": "RAILS_ENV=${RAILS_ENV:-production} NODE_ENV=${NODE_ENV:-production} bin/webpack --profile --json > tmp/webpack-stats.json",
"webpack:analyze_json": "webpack-bundle-analyzer tmp/webpack-stats.json public/packs"
}
}
I have the same problem with indentations buttons
I am having the same issue: Bullet points / Numbered lists and indentation do not work (Laravel 8.x)
I am having the same issue: Bullet points / Numbered lists and indentation do not work (Laravel 8.x)
Ok, I found it to be a dependency issue with tailwind-ui.css. Removing tailwind-ui.css fixes the issue!
Tailwind may be a problem for those who are using it:
seems that tailwind lists have a default of list-style-type: none https://tailwindcss.com/docs/list-style-type
Is there some kind of way to add a class to every ul element by Trix?
when someone creates a <ul>
-tag trix would need to transform it to a <ul class="list-disc">
-tag
Putting this into my css file fixed it ul { list-style-type: disc !important;}
, but this will then apply to all ul-tags in the project...
The repair above worked for me. I had to do this:
ul { list-style-type: disc !important; }
ol { list-style-type: decimal !important; }
this fix my problem with tailwind css
trix-editor ul { list-style-type: disc !important; margin-left: 1rem !important; }
trix-editor ol { list-style-type: decimal !important; margin-left: 1rem !important; }
Thanks @0aljawi0, Tailwind defaults was my issue too. I extended it for links:
trix-editor a { text-decoration: underline; }
Note: I try to avoid using !important
in my CSS unless absolutely necessary - this fix works just fine without it 😄
Tailwind may be a problem for those who are using it:
seems that tailwind lists have a default of list-style-type: none https://tailwindcss.com/docs/list-style-type
Is there some kind of way to add a class to every ul element by Trix? when someone creates a
<ul>
-tag trix would need to transform it to a<ul class="list-disc">
-tagPutting this into my css file fixed it
ul { list-style-type: disc !important;}
, but this will then apply to all ul-tags in the project...
Thank you.
when using tailwindcss and the tailwindcss/typography plugin you can also add
trix-editor { @apply prose max-w-none }
to your css.
That way the typography plugin applies all stylings regarding lists, quoteblocks, etc. in a quite simple way in my opinion
Leaving this in case anybody encounters the buttons not working problem.
I was able to get the button tool bar to work by adding the following:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.2.0/trix.css" rel="stylesheet" type="text/css" />
</head>
Editor doesnt seem to be completing several actions when using a few buttons work but others do nothing at all
Steps to Reproduce
Details
also whenever you click on editor this error appears for any action on editor
custom-elements-es5-adapter.js:13 Uncaught TypeError: Illegal constructor at new HTMLElement (custom-elements-es5-adapter.js:13) at new n (app.js:22) at text/html (app.js:23) at Object.serializeToContentType (app.js:23) at a.updateInputElement (app.js:28) at a.notifyEditorElement (app.js:28) at a.notifyEditorElement (app.js:28) at a.compositionControllerDidRender (app.js:28) at c.render (app.js:25) at a.render (app.js:28)