Support for rich-text editing #212

timathom · 2023-04-23T21:48:28Z

timathom
Apr 23, 2023

I'd love to have integration with a rich-text editor within Fore. I was hoping it would be as easy as plugging in a web component, but it seems things may not be so simple :)

I've only tested with TinyMCE so far, but I'm not able to bind the widget to instance data out of the box.

In the test form below, calling the web component version renders the widget, but the instance data isn't passed in.

Using the standard approach with #mytextarea gets me the instance data in the widget, but the instance data doesn't update on input.

How complex would it be to get this kind of integration to work? Michael Sperberg-McQueen did a nice write-up of customizing TinyMCE in XSLTForms to enable mixed-content markup with custom elements. That kind of functionality would be really powerful to have in Fore.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"
            name="viewport" />
        <title>Testing TinyMCE</title>
        <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/@jinntec/fore@latest/resources/fore.css">
        <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
        <script>
            tinymce.init({
              selector: '#mytextarea'
            });
        </script>             
    </head>
    <body>
        <div class="container-fluid">
            <fx-fore>
                <fx-model>
                    <fx-instance>
                        <data>
                            <foo>This is a test</foo>
                            <bar>Another one</bar>
                        </data>
                    </fx-instance>
                </fx-model>

                <fx-control ref="foo" update-event="input" debounce="300">
                    <label for="mytextarea" slot="label">TinyMCE Test</label>
                    <textarea id="mytextarea" class="widget"></textarea>
                </fx-control>
                
                <fx-control ref="bar" update-event="input" debounce="300">
                    <label>Default input</label>                    
                </fx-control>
                
                <!--<fx-control ref="foo" update-event="input" debounce="300">
                    <label for="mce1" slot="label">TinyMCE Test</label>
                    <tinymce-editor id="mce1" class="widget"></tinymce-editor>
                </fx-control>-->
                                
                <fx-inspector open></fx-inspector>
            </fx-fore>
        </div>
        <script type="text/javascript" src="../dist/fore.js"></script>
        <!--<script type="module">
            import './node_modules/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.js';
        </script>-->
    </body>
</html>

JoernT · 2023-04-24T06:44:15Z

JoernT
Apr 24, 2023
Maintainer

please try

<fx-control ref="foo" update-event="input" debounce="300" as="node">
                    <label for="mce1" slot="label">TinyMCE Test</label>
                    <tinymce-editor id="mce1" class="widget"></tinymce-editor>
                </fx-control>

The as="node" passes the data not as a string but a nodes. This works with our jinn-codemirror component.

1 reply

timathom Apr 24, 2023
Author

If I add as="node" to the web component version, I still get nothing. Adding it to the #mytextarea version gives me "[object Element]" in the textarea output.

JoernT · 2023-05-02T15:46:02Z

JoernT
May 2, 2023
Maintainer

hm, not much time currently to follow this issue but put that on the list. Feel free to open a feature request so it doesn't get lost.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for rich-text editing #212

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Support for rich-text editing #212

timathom Apr 23, 2023

Replies: 2 comments · 1 reply

JoernT Apr 24, 2023 Maintainer

timathom Apr 24, 2023 Author

JoernT May 2, 2023 Maintainer

timathom
Apr 23, 2023

Replies: 2 comments 1 reply

JoernT
Apr 24, 2023
Maintainer

timathom Apr 24, 2023
Author

JoernT
May 2, 2023
Maintainer