I am working on React project that uses TinyMCE as a rich-text editor. I wanted to opt out of their cloud services so as to remove the following message.
This domain is not registered with TinyMCE Cloud. Start a free trial to discover our premium cloud services and pro support.
I tried out this link (Loading TinyMCE by yourself) from the TinyMCE website by adding the following code to my index.html file hoping that it would be accessible globally.
<script src="https://cloud.tinymce.com/5/tinymce.min.js"></script>
This did not work nevertheless. Am I missing something here?
The URL in your script tag is using our Cloud service to try to load the editor so if you don't want to use our Cloud platform, then that URL seems not to be what you want.
If you want to locally host TinyMCE in a React app. You can do so via a module loader as outlined here:
https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/
If you want to use the script tag referenced in your question you need to register on our Cloud platform (it's free) to get an API key. Once you have that, you need to include that API key in your script tag as outlined here:
https://www.tiny.cloud/docs/cloud-deployment-guide/editor-and-features/
...so the script tag would look like this:
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>
...but with the string your_API_key replaced with your actual API key.
I'v got a new way to get rid of the cloud when using official tinymce react package.
Go to https://github.com/tinymce/tinymce-react, and clone the whole project.
Open the file src/main/ts/components/Editor.tsx, and go to line 122, where you can find the function named 'getScriptSrc'.
Remove all codes inside the function, and just return the url of your self hosted tinymce.min.js. In this way you can get official tinymce react but won't get bothered by the message.
Import Editor in src/main/ts/index.ts.
Related
Does anyone have any pointers on how to go about adding a /docs page for website documentation to a next.js app? I've looked up Docusaurus but it seems like it's already a react app itself. Is there a way to integrate it inside an existing next.js app or are there other solutions?
Many Thanks
One idea might be to intercept the request and send the html file that docusaurus builds out, and putting all other files in the public folder.
https://medium.com/wesionary-team/render-html-file-in-pages-of-next-js-59281c46c05
Also checkout this discussion about it.
https://github.com/vercel/next.js/discussions/12373
I have done this with React apps using express. But never with Next. At first it looks like it would be possible with multi-zone in Next but that doesn't seem to do the job. So my other recommendation would be to try to use a docs.domain.com instead and host it separately. Then you have a /docs url or a button that redirects to the doc domain instead.
Firebase has free hosting and allows you to setup multiple sites. So it should be fast to test this setup there
I'm going to actively try to get this to work with Next myself but I do not think it will work because of how they are developed. So I would do the above recommendation and if I find a workaround, I'll post an update.
I am looking to use Google's cast SDK (for sending) in the Web app that I am working on; In google's documentation and codelabs (https://developers.google.com/cast/codelabs#:~:text=Codelabs%20are%20sample%20apps%20with,Also%20see%20Sample%20applications.) it seems that the only way to load the SDK is to use
<script type="text/javascript" src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
This won't work for me because I am writing a React+JSX web app. I can't just load the script through a script tag as the other elements that need to get rendered, such as the
<google-cast-launcher id="castbutton"></google-cast-launcher>
Aren't recognized as valid JSX elements.
How can I make this library available to my code? Is there anything like
yarn add cast-sdk
that exists that I can use to get the sdk?
You can load the script directly on your index.html file. This way the script will load once together with your App.
Or you can dynamically load the script in the js like it is explained here, but this way the script will be loaded/unloaded every time the component is mounted/unmounted.
we're working with Apostrophe CMS v3 and we're trying to add some custom apps to the pages with React. I was able to add components inside using the React CND scripts and loading components as script files in views/layout.html. But it probably isn't best practice. I was wondering if theres a way to add React apps into Apostrophe using npm packages and imports. Thank you very much!
It looks like this question was cross-posted to the Github Discussions forum: https://github.com/apostrophecms/apostrophe/discussions/3393
The response there from the lead software architect:
You can do it in two ways. Which is best depends on your needs.
If you are building a single-page React app but you need some dynamically edited CMS content, you should most likely keep building your React app just as you have been, and use Apostrophe's REST APIs to access piece and
page CMS content where you need it. See the documentation on our REST APIs.
On the other hand, if you are building a pretty normal CMS-driven website
but you have a few experiences inside your pages that would benefit from
embedding a React application, you should carry on with your Nunjucks
templates for Apostrophe as you normally would to build a website with
Apostrophe, and in addition set up a webpack build of your own to build
your React apps, and push the output to a ui/public/build.js file nested
in any module of your Apostrophe project. Any .js file found in a
ui/public subdirectory of a module is automatically included in the
frontend bundle generated by Apostrophe.
In that situation, you can still use the REST APIs to access data from the
React app, or you can pass data via data attributes in your markup. If you
do the latter, the | jsonAttribute Nunjucks filter is helpful to turn it
into a string that is safe for incorporation into a quoted attribute in
your markup.
Hope that helps!
We have built a project (Web Application) in React .net core using react in client-side rendering.
We've used react-helmet for dynamically assigning meta tags.
The issue being when the app renders in the browser. The browser gets only the static HTML on initial load which does not include the dynamic meta tags we have set. However on inspecting you get those meta tags under "Elements".
Also, if we use these URL for sharing on any social media, like WhatsApp or Facebook, the URL does not render any metadata as it should.
Tried searching for solutions to our problem, the most obvious answer we came across was to try server-side rendering instead. We get that, but it is not a solution to try out at this juncture when we're ready with app to roll it out.
Others we came across were "react-snap", "react-snapshot", but no luck
with react-snap, it requires to upgrade React's version to 16+, which we did but I guess not all dependencies were upgraded, there was an error saying "
hydrate is not a function
(hydrate concerns the react-dom)
With react-snapshot, we could not find the necessary type definition, which is required in react .net core to function properly
Please guide for the next probable step (except the paid ones like prerender, etc)?
Main goal: Social Applications should render the meta data when we paste/share the URL within them.
Prerender is the only solution.
I used a node dependency called "prerender" -> https://github.com/prerender/prerender
It works enabling a web server wich make http requests. Assigning value to a boolean: window.prerenderReady = true; in your website tells your server when the page is ready to "take the photo" and it returns the Html when so. You need to program an easy script that parses all the site urls and save those html contents to files. Upload them to your server and using .htaccess or similar target the crawlers external-hit-facebook,twitterbot,googlebot, etc.. to show them the prerendered version and 'the real site' to the rest of user-agents.
It worked for me.
The meta tags for Open Graph need to be present in the HTML which is sent back to the client when fetching a URL. Browsers or bots will not wait until the app is rendered on the client side to determine what the metatags are - they will only look at the initially loaded HTML.
If you need the content of your Open Graph metadata to be dynamic (showing different content depending on the URL, device, browser etc.) you need to add something like react-meta-tags into your server code.
There are no type definitions available for any of the react meta tags libraries, but you can add your own. It can be a bit tricky, but check out the official documentation and the templates they have provided to get started.
If you don't need it to be dynamic, you could add the tags into the static parts of the <head>-tag in your index.html.
I had the same issue today. I had two React Web applications that need this. Here is how I solved it:
put your preview image in the public folder
still in public folder, Open index.html, add the line <meta property="og:image" content="preview.png"/>
or <meta property="og:image" content="%PUBLIC_URL%/preview.png"/>.
Go to https://www.linkedin.com/post-inspector/ to check if it works.
I hope this would help!
Is there some way to run UI-Router without running bower/npm, etc?
https://github.com/angular-ui/ui-router
I tried linking to it (just like to angular), but that didn't work. Tried saving it locally in a .js file and referencing it. That didn't work either. Am I missing something or am I just trying to do something impossible?
edit: Alternatively, is there anywhere to test this? Like plunkr or something?
Here's the source for what I think is the latest. I think you should just be able to link to it in a <script /> tag in your index.html:
http://angular-ui.github.io/ui-router/release/angular-ui-router.js
Or copy that to a text file and run it completely locally, since I think you're just trying to test it out. If it didn't work, maybe make sure you have all of its dependencies, if any.
Of course it looks like it's a package in plunkr, so you should be able to try it there. I added it and the latest angular for you (haven't tested it though):
http://plnkr.co/edit/jdX6pRn6noHh1JoP5CH6?p=catalogue
You can write Angular UI routing code into your Notepad++ editor, But you require a normal web server to run it properly.
You can try the Google Chrome Plugin to execute all AngularJS related codes.
Kindly Run all the applications using a local server. There is no need for Tomcat server. You can easily download a Google Chrome Plugin "Web server for Chrome". here- Web Server for Google Chrome
Also the Angular UI routing Snippet is available at: https://github.com/TheAjinkya/AngularSnippets/tree/master/Angular%20UI-Router