search

friendofsvelte / tipex

An goto sytled text editor for SvelteKit; based on TipTap; tipex
https://tipex.pages.dev/
43 stars 0 forks source link

How to get the HTML out of the editor #15

Closed AlloryDante closed 5 months ago

AlloryDante commented 5 months ago

Hello, I have the basic component working: <Tipex {htmlContent} displayDefaultControls floatingMenu style="margin-top: 1rem; margin-bottom: 0;" className="h-[70vh] border border-neutral-200" />

I want to make a preview window so I can see how the text looks after it has been edited. I've searched the docs and related issues and I wasnt able to find a method to get the text in a var and display it. So far i've been trying to display {htmlContent} but it seems its static and the var doesnt update when text is entered.

Could someone please help me getting access to a var that is updating while someone types in the editor area? Many thanks

Edit: I found this:

Try this $tipexEditor.getHTML() to get html.
FYI:
$tipexEditor.getText() -> to get plain text.
$tipexEditor.getJson() -> to get content data in json.

My problem is that I still dont know how to import $tipexEditor variable and this also raised one more question: How to assign html to typex (if I edit htmlContent var with a fetch api the content inside typex still does not change)

AlloryDante commented 5 months ago

I manage to solve all my issues:

  1. import { tipexEditor } from '@friendofsvelte/tipex'; - will allow you to use $tipexEditor.getHTML() to fetch text
  2. $tipexEditor?.chain().setContent('Haha').run() - will allow you to overwrite content

Many thanks to the author of this lib and hopefully we will see more options like text align and many more.