Browser #275

pazicb · 2020-03-20T15:09:55Z

Hello,
How do i have to proceed? I need to view only SunEditor content, including "katex".
I need the user to see the content, not edit it and not see the editor control.

Thank you.

MRB60 · 2020-03-20T15:33:13Z

Place the html output from editor within a div and add class:

<div class="sun-editor-editable"><p>my suneditor contents</p></div>

pazicb · 2020-03-20T15:56:01Z

Thank you, but unfortunately I do not see mathematical formulas.

JiHong88 · 2020-03-20T17:04:09Z

Hi
Do you means to use only the "math" plugin without editing the editor directly?

pazicb · 2020-03-20T17:27:05Z

Yes, in SunEditor I want to prepare texts including math formulas and then display it without an editor.

JiHong88 · 2020-03-20T18:44:29Z

Yup,
Just remove the "contenteditable" attribute.

import katex from 'katex'

const editor = suneditor.create('id', {
  buttonList: [['math']],
  katex: katex
})

editor.core.context.element.wysiwyg.removeAttribute('contenteditable')

pazicb · 2020-03-20T19:01:39Z

Thank you, but I need to hide everything from the editor. Buttons, header and footer.

JiHong88 · 2020-03-20T21:06:50Z

Ok, Use it like this.

const editor = suneditor.create("id", {
  resizingBar: false,
  katex: katex
})
editor.toolbar.hide();

pazicb · 2020-03-21T17:14:59Z

Thank you for your quick help. I have one more problem, when I start the editor I see "undefined" and I don't see "placeholder"

JiHong88 · 2020-03-22T07:52:59Z

Can I see your code?
How did you defined the editor?

pazicb · 2020-03-22T12:27:21Z

When the editor is started, the text "undefined" is displayed in the editor.

<link href="suneditor.min.css" rel="stylesheet" />
<script src="suneditor.min.js"></script>
chatContent = SUNEDITOR.create('tbChatContent', {
      "mode": "classic",
               "katex": "window.katex",
               "buttonList": [
                   [
                       "undo",
                       "redo",
                       "font",
                       "fontSize",
                       "formatBlock",
                       "paragraphStyle",
                       "blockquote",
                       "bold",
                       "underline",
                       "italic",
                       "strike",
                       "subscript",
                       "superscript",
                       "fontColor",
                       "hiliteColor",
                       "textStyle",
                       "removeFormat",
                       "outdent",
                       "indent",
                       "align",
                       "horizontalRule",
                       "list",
                       "lineHeight",
                       "table",
                       "link",
                       "image",
                       "video",
                       "math",
                       "fullScreen",
                       "showBlocks",
                       "codeView",
                       "preview",
                       "print",
                       "save",
                       "template"
                   ]
               ],
               "lang": SUNEDITOR_LANG.en,
               "lang(In nodejs)": "en"
   });

JiHong88 · 2020-03-22T12:36:23Z

Remove this code "lang(In nodejs)": "en"
This is shows additionally how to define language files in nodejs environment.
And Modify code "katex": "window.katex", -> "katex": window.katex,
This is shown to text as a limitation of expression in the sample code.
Then include the "katex" library.

<!-- KaTeX -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css">

pazicb · 2020-03-22T13:15:23Z

It is still the same. The editor starts correctly, works correctly, but it contains the word "undefined", which I can delete.

JiHong88 · 2020-03-22T13:55:18Z

Where is the "undefined" character included?
Can you show me a screenshot?

pazicb · 2020-03-22T14:39:02Z

JiHong88 · 2020-03-22T14:48:40Z

Are you using "placeholder" option?
Can I see the HTML code and script code?

pazicb · 2020-03-22T15:25:26Z

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/suneditor.min.css" rel="stylesheet" />
    <script src="suneditor.min.js"></script>   
    <script src="en.js"></script>
    <script  src = "https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"> </script>
    <link  rel = "stylesheet" href ="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" />
</head>
<body>  
   <div id="editor">
   </div>
    <script>
        var editor = SUNEDITOR.create('editor', {
                "mode": "classic",
            "katex": window.katex,
                "buttonList": [
                    [
                        "undo",
                        "redo",
                        "font",
                        "fontSize",
                        "formatBlock",
                        "paragraphStyle",
                        "blockquote",
                        "bold",
                        "underline",
                        "italic",
                        "strike",
                        "subscript",
                        "superscript",
                        "fontColor",
                        "hiliteColor",
                        "textStyle",
                        "removeFormat",
                        "outdent",
                        "indent",
                        "align",
                        "horizontalRule",
                        "list",
                        "lineHeight",
                        "table",
                        "link",
                        "image",
                        "video",
                        "math",
                        "fullScreen",
                        "showBlocks",
                        "codeView",
                        "preview",
                        "print",
                        "save",
                        "template"
                    ]
                ],
                "lang": SUNEDITOR_LANG.en
        });       
    </script>
</body>
</html>`

JiHong88 · 2020-03-22T15:37:03Z

The constructor element of suneditor is "textarea".

<textarea id="editor"></textarea>

Please see here: getting-started

pazicb · 2020-03-22T15:49:46Z

Thank you.

JiHong88 added the question label Mar 20, 2020

JiHong88 closed this as completed Mar 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Browser #275

Browser #275

pazicb commented Mar 20, 2020

MRB60 commented Mar 20, 2020

pazicb commented Mar 20, 2020

JiHong88 commented Mar 20, 2020

pazicb commented Mar 20, 2020

JiHong88 commented Mar 20, 2020

pazicb commented Mar 20, 2020

JiHong88 commented Mar 20, 2020

pazicb commented Mar 21, 2020

JiHong88 commented Mar 22, 2020

pazicb commented Mar 22, 2020 •

edited

JiHong88 commented Mar 22, 2020 •

edited

pazicb commented Mar 22, 2020

JiHong88 commented Mar 22, 2020

pazicb commented Mar 22, 2020

JiHong88 commented Mar 22, 2020

pazicb commented Mar 22, 2020 •

edited

JiHong88 commented Mar 22, 2020

pazicb commented Mar 22, 2020

Browser #275

Browser #275

Comments

pazicb commented Mar 20, 2020

MRB60 commented Mar 20, 2020

pazicb commented Mar 20, 2020

JiHong88 commented Mar 20, 2020

pazicb commented Mar 20, 2020

JiHong88 commented Mar 20, 2020

pazicb commented Mar 20, 2020

JiHong88 commented Mar 20, 2020

pazicb commented Mar 21, 2020

JiHong88 commented Mar 22, 2020

pazicb commented Mar 22, 2020 • edited

JiHong88 commented Mar 22, 2020 • edited

pazicb commented Mar 22, 2020

JiHong88 commented Mar 22, 2020

pazicb commented Mar 22, 2020

JiHong88 commented Mar 22, 2020

pazicb commented Mar 22, 2020 • edited

JiHong88 commented Mar 22, 2020

pazicb commented Mar 22, 2020

pazicb commented Mar 22, 2020 •

edited

JiHong88 commented Mar 22, 2020 •

edited

pazicb commented Mar 22, 2020 •

edited