npm

@datareporter.eu/wedit

1.2.7 • Public • Published

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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.2.71latest

Version History

VersionDownloads (Last 7 Days)Published
1.2.71
1.2.61
1.2.50
1.2.41
1.2.30
1.2.20
1.2.10
1.2.00
1.1.30
1.1.20
1.1.10
1.1.00
1.0.240
1.0.230
1.0.220
1.0.210
1.0.200
1.0.190
1.0.180
1.0.170
1.0.160
1.0.150
1.0.140
1.0.130
1.0.120
1.0.110
1.0.100
1.0.90
1.0.80
1.0.70
1.0.60
1.0.50
1.0.40
1.0.30
1.0.20
1.0.10
1.0.00

Package Sidebar

Install

npm i @datareporter.eu/wedit

Weekly Downloads

3

Version

1.2.7

License

none

Unpacked Size

308 kB

Total Files

26

Last publish

Collaborators

  • pjdatareporter
  • michael.traunau