I would like to know whether it is possible to render RichTextField from Django CKEditor using CKEditor from ckeditor5-react ? As far as I know, we could manually render django field in anyway as long as the name and id is the same as the form field. But I have no idea how do I replicate Django CKEditor using React CKEditor.
Yes, it's possible to use Django CKEditor with Ckeditor5-react. I have done it in the past and it was doable, but I don't recommend using CKeditor with React anymore. The problem with React Ckeditor is that it stores data in HTML format, meaning you have to "dangerously render HTML" in your react virtual dom. There are many libraries that stores data in a JSON format rather than HTML format like CKEditor do, to name some:
Slate Js
Quill
Draft Js
try using them, you can use TextField in Django Model to store your stringified JSON.
Related
I have a project on Rails 6.
Started migrating it to React by using react-rails. However, there are still some components which I cannot migrate to React ATM due to time limitations.
I want to be able to use the old component (partial) in my React component.
e.g let's say I have a React component:
Component.tsx
export const Component = ({post}) => {
return <div>
<ShareButton post={post}/>
</div>
}
and somehow the ShareButton should contain this:
<%= render partial: 'posts/shared/share_post_btn', locals: {event: false, post: post} %>
I read that it may be possible by using .jsx.erb but I couldn't figure out how.
Would love to get some insights!
Thank you.
I'm afraid you'll be mixing build pipelines here. The .erb is parsed by the asset pipeline, which was the default for Rails <6 and still for CSS, but this doesn't work no longer by default for yarn/webpacker-based builds that Rails 6 favoured for JS output (Rails 7 choose a new path again, I'm sorry).
Also, as components typically have actions attached, I don't really see how a mixed Rails (static HTML) based approach could work.
A few ideas:
In the end, both Rails/ERB and React create HTML. Perhaps you can simply create the same HTML that your ShareButton creates with Rails as a temporary workaround? You'd share the CSS from the new front-end project, and you can slowly migrate rebuilding components in React (when you're thinking of building component library, make sure it works with stand alone HTML/CSS).
You can load static HTML in React using dangerouslysetinnerhtml; that might be a solution if you have complex prerendered text you want to load within a React component.
Load React client side (relatively slow); wouldn't really do this for production: How to perform import/export in client-side React JSX using Babel-Standalone
Do some parsing of the HTML received in React; and render components conditionally (this approach is a bit how Rails Turbo works; a more Rails-native answer to React, Vue and the like)
Push through: none of the 'solutions' above are really satisfying if you want to end up with a clean React version.
Roll back: why use react in the first place. React is just another fancy way of rendering HTML.
I am trying to integrate Strapi CMS with React js code base. For one of the content types, a WYSIWYG editor is needed. Strapi default editor supports both React markdown and rich text options.
But when rendering the field on frontend, the logic needs to be a bit different for both options. The markdown would needed parser, the rich text would have to be set using dangerouslySetInnerHTML. How to detect on frontend, which way to use?
Let's consider react application with Tiny.MCE component. I need to create a custom plugin. But I would like to create this component as a React component.
I have no idea how could I inject the react component to my plugin. Any idea?
TinyMCE plugins have a specific format for how the JavaScript has to be created/bundled. A React component won't fulfill that requirement.
The process for creating a TinyMCE plugin is documented here:
https://www.tiny.cloud/docs/advanced/creating-a-plugin/
I would recommend placing your custom plugins in their own directory and using the external_plugins option to load them. This will keep your custom code separate from the editor and avoid things being deleted/overwritten if you update TinyMCE itself.
I need to send an email of my rendered reactjs component, for that, I need to convert my react component in HTML and send the email. I know how to send HTML through the mail, but getting stuck in how to get HTML from the reactjs component.
You can use renderToString of react-dom/server and use it like
import ReactDOMServer from 'react-dom/server'
const htmlString = ReactDOMServer.renderToString(<App />)
ReactDOMServer is used for SSR (Server Side Rendering) of react components.
renderToString converts your React component to string. So, You will get string html from JSX of your component.
There are two ways to do that. One is the renderToString() method, as the other answer mentions.
The other one is renderToStaticMarkup(): https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup
From docs:
Similar to renderToString, except this doesn’t create extra DOM attributes that React uses internally, such as data-reactroot. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.
If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use renderToString on the server and ReactDOM.hydrate() on the client.
For sending email you don't need extra DOM attributes or hydration since the email doesn't include any JS code, renderToStaticMarkup() will do the job.
To get HTML from a react component, you can use theReactDOMServer.renderToString method (doc) used mainly for SSR purpose. However I guess you can achieve what you want with it.
I have a react app and have implemented Tabuator as data grid library.
But need to have multple custom filters like as image attached.
I can see that there is jquery example when I search multiple filters in documentation, but need in react js.
Do ReactTabulator component have any props for the above situation ?
TIA,
Sid