selected text in iframe
How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.
带有预知和 HTM 无构建设置的 MUI 和 HTM 无构建设置的 MUI
原标题：MUI with Preact & HTM No Build Setup
Preact shows you can use it with HTM for a no build setup here. Which works well on my phone since I haven t be able to get Vite to work because of symlinks.
MUI shows how to install and use it with Preact as well but not with HTM for a no build setup. https://mui.com/material-ui/getting-started/
I ve tried import { Button } from @mui/material/Button ;
It s tried it without brackets and even importing the file directly with import { Button } from ../node_modules/@mui/material/Button.js ;
Yet console still shows...
material-ui.development.js:1848 Uncaught TypeError: Cannot read properties of undefined (reading useLayoutEffect )
at material-ui.development.js:1848:74
at material-ui.development.js:9:78
at material-ui.development.js:10:3 (anonymous) @ material-ui.development.js:1848 (anonymous) @ material-ui.development.js:9 (anonymous) @ material-ui.development.js:10
127.0.0.1/:1 Uncaught TypeError: Failed to resolve module specifier "@mui/material/Button". Relative references must start with either "/", "./", or "../".
What can I do to get this to work with Preact and htm for a no build setup?
Here s my code...
My package.json:
{
"name": "project",
"private": true,
"version": "0.001",
"type": "module",
"scripts": {},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.19",
"@testing-library/jest-dom": "latest",
"@testing-library/react": "latest",
"@testing-library/user-event": "latest",
"htm": "^3.1.1",
"preact": "^10.22.0",
"react-scripts": "^5.0.0"
}
}
My index.html:
Site title
My App.js:
import { html, render } from ../js/standalone.module.js ;
import { Button } from @mui/material/Button ;
function ButtonUsage() {
return html`
<${Button} variant="contained">Hello world
`;
}
render(html`<${ButtonUsage} />`, document.getElementById( root ));
最佳回答
Before we get started, react-scripts, along with Babel, is build tooling. This makes your question a bit unclear. You shouldn t have it in a no-build setup.
To start with, a bare import specifier like @mui/material/Button is meant for use in Node or, somewhat recently, with import maps -- on it s own, it s an invalid specifier in the web.
Additionally, as MUI is a React lib, you need to set up aliases to preact/compat and it will not work out-of-the-box in a Preact app (as your errors show).
Here s an example:
note: I imagine js/standalone.module.js is htm/preact/standalone, which is better extracted to this form if we re using import maps.
Site title
Then in your script:
import { render } from preact ;
import { html } from htm/preact ;
import { Button } from @mui/material ;
function ButtonUsage() {
return html`
<${Button} variant="contained">Hello world
`;
}
render(html`<${ButtonUsage} />`, document.getElementById( root ));
Hope it helps!
问题回答
暂无回答
相关问题
How to fire event handlers on the link using javascript
I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...
How to Add script codes before the </body> tag ASP.NET
Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...
Clipboard access using Javascript - sans Flash?
Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...
javascript debugging question
I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...
Displaying a Multidimensional Array in a Bar Graph (in JavaScript)?
Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph? The array is multidimensional, with three elements in each part - and the ...
Is it possible to reload a form after an input type="file" changes?
Is it possible to reload a form after file-input change? I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it ...
Parsing date like twitter
I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.
热门标签
- winforms
- combobox
- fogbugz
- java
- date
- internationalization
- asp.net
- iis
- url-rewriting
- urlrewriter
- c#
- enums
- ocaml
- haxe
- algorithm
- string
- viewstate
- .net
- c++
- c
- symbol-table
- mysql
- database
- postgresql
- licensing
- migration
- vb.net
- vb6
- declaration
- vb6-migration
- python
- psycopg2
- backup
- vmware
- virtualization
- gnu-screen
- authentication
- desktop
- excel
- xll
- cultureinfo
- regioninfo
- oracle
- client
- session
- download
- html
- virtual
- constructor
- scenarios
- perl
- full-text-search
- javascript
- ajax
- testing
- oop
- inheritance
- vim
- encapsulation
- information-hiding