So I'm building a dashboard that allows clients to write some text with a WYSIWYG editor and publish it so it is available in an online reader.
Previously, I integrated TinyMCE as my text editor and it works well. It generates HTML from the text and formatting the user inputs. Now, I need to allow clients to be able to add some Material-UI components such as an ExpansionPanel to their content (by maybe clicking a button in the text editor toolbar).
I stumbled upon mui-rte that allows adding custom components the way I want but it appears to only generate a draft-js format which I'm unfamiliar with and will not be backwards compatible with HTML strings that have already been generated by clients.
My question is, how do I generate an HTML string in the format below with a WYSIWYG editor
<div>
<h1>this is some text</h1>
<ExpansionPanel></ExpansionPanel>
</div>
there is a module called draftjs-to-html. In order to get html from wysiwyg editor you could write something like this.
import draftToHtml from 'draftjs-to-html';
console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));
convertToRaw comes from draft-js editorState.getCurrentContent() comes from state change event in the editor which is documented in wysiwyg documentation.
Related
I want to create simple wysiwyg editor with vue on contenteditable div. I want to store editor content into json object. I want to use state/model concept. I will do something like this within editor template:
<div contenteditable>
<component v-for="item in json" :is="item.blockTypeComponent" />
</div>
and I will use simple-wysiwyg component with v-model somewhere on my edit page:
<simple-wysiwyg v-model="someVarAsJson" />
It looks like I need store editor input data to model/state before and automatically update content within contenteditable which means I need intercept input events of contenteditable. As I have understood from presentation of draft-js, prosemirror and article of medium site wysiwyg developer (here is a link __https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480 ), they use the same concept as I have described above.
There is tiptap editor on vue based on prosemirror but I didn't understand yet how it works.
Is it possible to do what I want?
I am simply attempting to insert rich text format content in to the editor via the API call insertText(), however, this is inserted as plain text. Is this intended? Is there no way to insert rtf content in to the editor via the API? If this is not possible, please suggest a better alternative.
I've tried other API calls such as setContent etc. We are currently using the DevExpress rich text editor, however it is very slow and an utter pain with our current implementation as it was made for MVC based projects, but we use a single page app built on Ember.
var quill = new Quill('#rtf-editor', {
modules: {
toolbar: false
},
theme: 'snow'
});
var bindingContext = this.get('bindingContext');
quill.disable();
quill.insertText(0, bindingContext.get('content.termsOfUseText'));
I would expect rich text format content to appear with all formatting, however it just appears as plaintext
Example of actual outcome:
{\rtf1\deff0{\fonttbl{\f0 Segoe UI;}}{\colortbl ;\red0\green0\blue255 ;}{\*\defchp \fs18}{\stylesheet {\ql\fs18 Normal;}{\*\cs1\fs18 Default Paragraph Font;}{\*\cs2\sbasedon1\fs18 Line Number;}{\*\cs3\ul\fs18\cf1 Hyperlink;}{\*\ts4\tsrowd\fs18\ql\tscellpaddfl3\tscellpaddl108\tscellpaddfb3\tscellpaddfr3\tscellpaddr108\tscellpaddft3\tsvertalt\cltxlrtb Normal Table;}
This is the sort of thing that appears in the editor, in case I wasn't clear enough.
Referring to the API documentation, it appears that Quill's insertText is not the appropriate way to do this (the text parameter appears to accept plain text and the next parameter format appears to accept the formatting that needs to be applied to that plain text).
It it not clear what kind of representation the rich text you have has, but in terms of Quill, it understands rich text in terms of Deltas and one possible way that I see to do what you intend to do is to somehow have your rich text converted to HTML and then use the quills dangerouslyPasteHTML method to insert that HTML into the editor.
Refer the documentation for more info: https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml
I'm starting to work on a blogging app. My question is how do I save the formatted text so that it can be displayed the way it was formatted. For instance, if the editor marks a word as bold, how do I save that information so that it can be displayed as a bold text? In other words, how do I save the dynamically generated css?
There are many ways to do this. One way I might approach this is to save the post content in a format like Markdown. Then you need to use a Markdown to HTML converter that will generate the HTML and CSS for you. Alternatively, you could implement some custom formatting rules of your own, or use an open source WYSIWYG editor that might have a plugin to export to HTML that you can save.
I'm using Ace Editor to create a simple WYSIWYG editor for a client.
I've seen divshot.com has a WYSIWYG editor that also uses Ace, but I can't figure out how they select elements on the page. They also are able to properly select elements in their code view and it properly selects items in the page view.
setting content in Ace editor is pretty basic
editor.setValue('some text content');
so how can i make the elements in my wysiwyg view bound to Ace editor?
btw I'm using Angular as well and my WYSIWYG content view is an iframe.
It's very, very difficult (I'm a cofounder of Divshot).
We wrote a proprietary component recognition engine that allows for two-way syncing between an ACE Editor instance and a rendered HTML canvas. It involves lots and lots of DOM traversal, selector recognition, source cleaning, and ACE hacking.
You can look at the session for the editor and grab the current text that way.
rte.editor.getSession().on('change', function(e) {
var text = rte.editor.getSession().getValue();
$('#output').html(text);
});
I have an web application which displays data in text boxes/textareas (tonnes of them).
Changing this web application to use <div>s is really out of the question as it would cost more than the gain of implementing ACE.
I have tried to create an example which would load the ACE editor inside a FancyBox when clicking on the textarea/text box.
My example is here: http://jsfiddle.net/espenfjo/tHqGd/5/
The problem is however that it doesn't seem like the ACE javascript can find the new this.content.
edit: Of course.. other solutions to how to make fancy text boxes/textares with ACE would also be very welcome.
I went by using $(".fancybox-inner")[0] instead of using an own <div> for this.
Like this: http://jsfiddle.net/espenfjo/tHqGd/8/
Now I can click a textarea (or whatever really), and get a fancybox with the ACE editor updating the textarea.