Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to dynamically set the editor's formula in the demo and automatically render it. #140

Open
uniconnector opened this issue Apr 30, 2024 · 5 comments

Comments

@uniconnector
Copy link

uniconnector commented Apr 30, 2024

  1. Add formula content to the file:

    ClassicEditor
        .create( document.querySelector( '#editor' ), {
    	    math: {
    		    engine: 'katex',
    		    katexRenderOptions: {
    			    macros: {
    				    '\\test': '\\mathrel{\\char`≠}'
    			    }
    		    }
    	    },
    	    plugins: [
    		    Math,
    		    AutoformatMath,
    		    .....
    	    ],
    	    toolbar: [
    		    'math',
    		    ...
    	    ]
                      ...
        } )
        .then( editor => {
    	    window.editor = editor;
    
                    // dynamically set the editor's formula
                    editor.setData('\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]');
    
    	    CKEditorInspector.attach( editor );
    	    window.console.log( 'CKEditor 5 is ready.', editor );
        } )
        .catch( err => {
    	    window.console.error( err.stack );
        } );
  2. show contents

    \[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]
  3. Expected result:
    Format formula

@uniconnector
Copy link
Author

I took a look at the editingDowncast and realized that I needed to save the Katex formula in HTML format.

@tony
Copy link
Collaborator

tony commented May 18, 2024

@uniconnector If there's no objection, I added formatting to the original post.

I took a look at the editingDowncast and realized that I needed to save the Katex formula in HTML format.

Would you consider this resolved?

@uniconnector
Copy link
Author

@tony Saving HTML can indeed solve the problem, but the project itself relies on the markup format, so the cost of replacement is relatively high.

I have made some attempts, and currently, the summary needs to follow the framework requirements of the ckeditor to solve it, otherwise normal saving cannot be carried out.

@tony
Copy link
Collaborator

tony commented May 18, 2024

This seems more like a support issue than a bug at the moment. I can't give support, I'll clarify if there's a bug or not.

ckeditor5-math uses MathCommand (definition, usage), I don't believe editor.setData('\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]'); would render a formula.

In regards to "Saving HTML", can you give an example of what HTML you're saving when it works? It may be working as intended.

@devraj112
Copy link

This seems more like a support issue than a bug at the moment. I can't give support, I'll clarify if there's a bug or not.

ckeditor5-math uses MathCommand (definition, usage), I don't believe editor.setData('\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]'); would render a formula.

In regards to "Saving HTML", can you give an example of what HTML you're saving when it works? It may be working as intended.

For instance, I have integrated the math plugin into my angular application and I am trying to pass the math equation directly from the application to the editor but it is not able to render it.

onSubmit(){
    const equation = "x = {-b \pm \sqrt{b^2-4ac} \over 2a}.";

    this.editor.execute( 'math', equation, true, 'script', true);
  }

But, when I am trying rendering this equation(\(ax^2 + bx + c = 0\)) it is working fine.

onSubmit(){
    const equation = "\(ax^2 + bx + c = 0\)";

    this.editor.execute( 'math', equation, false, 'script', true);
  }

What am I missing?

index.html

<script type="text/javascript" id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants