@datareporter.eu/wedit

WEdit Multi Purpose Editor

WYSIWYG editor for editing XWiki syntax style documents.

Roadmap:

• support markdown syntax

Usage (Quickstart)

<!-- ... -->
<dr-wedit id="edit1"></dr-wedit>
<!-- ... -->

<script src="wedit.js"></script>
<script>
  
  // init the editor 
  let editor = wedit.createEditor({
    id: "edit1",
    toolbarButtons: ["code", "charStyles", "paragraph",  "lists", "paragraphStyles"],
    utilButtons: ["fullscreen", "sidebar"],
    sidebar: {
      tags: {
        title: "Tags",
        content: [
          {
            headline: "Firma",
            tags: [
              {tag: "content.name1", description: "Firmenname"},
            ]
          }
        ]

      },
      templates: {
        title: "Templates",
        content: [
          {
            code: '<#if company.hasEmail()>E: ${company.email} </#if>\n'+
                '<#if company.hasPhone()>T: ${company.phone} </#if>\n'+
                '<#if company.hasFax()>F: ${company.fax} </#if>',
            description: "Alle Ansprechpartner anzeigen"
          }
        ]


      }
    }
  });

  // fill initial content (using wiki text format and an optional error object)
  editor.setWikiText(wikiText, error);
  
  // get edited text value
  console.log(editor.getWikiText());
  
</script>
<!-- ... -->

Configuration options

let config = {
    id: "edit1", // id of the element in html <dr-wedit id="..."></dr-wedit>
    toolbarButtons: ["code", "charStyles", "paragraph",  "lists", "paragraphStyles"], // options available in the global toolbar
    utilButtons: ["fullscreen", "sidebar"], // options available in the utility toolbar
    sidebar: { // if there is a sidebar available fill it here
      tags: {
        title: "Tags", // button title
        content: [
          {
            headline: "Firma", // section headline
            tags: [
              {tag: "content.name1", description: "Firmenname"}, // list of vailable tags which are inserted using '${tag}'
            ]
          }
        ]
      },
      templates: {
        title: "Templates", // button title
        content: [ // list of code template contents
          {
            // code template with newlines, etc
            code: '<#if company.hasEmail()>E: ${company.email} </#if>\n'+  
                '<#if company.hasPhone()>T: ${company.phone} </#if>\n'+
                '<#if company.hasFax()>F: ${company.fax} </#if>', 
            description: "Alle <strong>Ansprechpartner</strong> anzeigen" // title for this template  
          }
        ]
      }
    }
  }

Error definition for inline errors

let error = {
    lineFrom: 10, // start line number (starting from 1) of the error message block
    lineTo: 14, // end line number of the error message block
    message: "What a cool error there is inside" // error message to display on top
}

Editor functions

editor.setWikiText = function(wikiText, error)

Set wiki Text content and optional error definition

editor.getWikiText = function()

Get current version of xwiki formatted content

editor.configureTags = function(tagList)

Update sidebar tag list with new json sidebar.tags.content list

editor.configureTemplates = function(templateList)

Update sidebar template list with new json sidebar.templates.content list

editor.updateContent = function ()

Update content to show proper syntax highlighting

editor.scrollErrorIntoView = function()

Scrolls the error in view if there is any

editor.focus = function()

Focus the editor

editor.editorSwitchToCode = function()

Switch to raw code edit mode

editor.editorSwitchToRich = function()

Switch to WYSIWYG editor

editor.editorFullscreen = function()

Switch editor to fullscreen mode

editor.editorNotFullscreen = function()

Switch editor out of fullscreen mode

editor.sidebarShow = function()

Show sidebar

editor.sidebarHide = function()

Hide sidebar