Synap Editor Documentation
Page tree
Skip to end of metadata
Go to start of metadata

Synap Editor version 2.10.0 has been released with the addition of shape multi-selection, iframe mode, and Document mode.

In addition, many functions such as support for absolute coordinates in tables, figure text alignment, etc. have been improved.

Major Improvements


Notice

Starting with Synap Editor version 2.8.0, the import function and shape-related functions have been separated into external modules to lighten the editor script file.
To use the import function and shape-related functions as before, the following files should be additionally included.

Using the document import function (SEDocModelParser)

To use the function of importing documents such as xlsx, docx, hwp, etc., include the SEDocModelParser module included under the editor package externals folder.

<script src="externals/SEDocModelParser/SEDocModelParser.min.js"></script>

Using shape-related functions (SEShapeManager)

To import documents containing shapes or use the functions of the shapeEditor plugin, include the SEShapeManager module included under the editor package externals folder.

<script src="externals/SEShapeManager/SEShapeManager.min.js"></script>


1. Shape multi-selection

Shape multi-selection with the Shift key

If you select a shape while holding down the Shift key, multi-selection is activated.
In the multi-selection status, the property button is disabled.


"Selection Mode" has been added to provide multi-selection using mouse drag.
The function is activated by adding "selectionMode" to the toolbar settings of the config file as shown below.

'editor.toolbar': [
    ...,
    'selectionMode', 'shapeEditor'
    ...
],

 

2. iframe mode support

You can use iframe mode by adding the following settings to the config file.
If you set the iframe mode, the editing area will be created inside the iframe to minimize the influence of external styles.
User UX has not changed at all.

'editor.mode.iframe': {
    'enable': true,
    'style.urls': ['../dist/iframeMode/contentsEditStyle.css', ... ],
    'script.urls': ['../dist/iframeMode/SEPolyfill.js']
}

Note: When using Iframe mode, you should use the editor API after the editor is completely initialized.
For more details on using Iframe mode, refer to [Installation and Settings> Configuration > Basic UI Setting > Iframe mode].

3. Document mode support 

You can use the document mode by adding the following settings to the config file.
The 'editor.document.size' value will have the following default unless otherwise specified. The default is similar to the A4 size of MS-Word.

'editor.type': 'document',
'editor.document.size': {
    'width': 793,
    'height': 1122,
    'padding': { 'top': 96, 'right': 96, 'bottom': 96, 'left': 96 }
},

For more details on using document mode, refer to [Installation and Settings> Configuration > Basic UI Settings > Document Mode].

>> Trying Document mode

4. Absolute coordinate support for tables

The ‘Treat like text’ function has been added to table properties.

If you turn off "Treat like text," you can freely move in the table with the table movement handle.


5. Adding key shape icons to the toolbar

A function that allows you to place frequently used shapes on the toolbar has been added.
In the toolbar of the config file, you can add desired shapes in the form of "shapeEditor_shape name" as shown below.

 'editor.toolbar': [
    'shapeEditor', 'shapeEditor_textBox','shapeEditor_rectangle','shapeEditor_roundedRectangle','shapeEditor_oval'
],

[Results of application]

Types of shapes that can be added

You can check the types and names of the shapes that can be added in [Plug-in> Shape Editor].

6.  Adding text alignment function to shape

A function to align text inside shapes has been added.


7.  Adding "Greek and Coptic" to special symbols

"Greek and Coptic" have been added to the special symbols.

8. Improvement of Copy / Paste

The pasting quality for contents copied from MS-Word and MS-Excel documents has been improved.

However, if you paste contents copied from MS-Office or HWP documents into the editor, there may be many structural limitations arising from the OS, applications, and the browser.
If you want to import the document in a form more similar to the original, please use the "Import" function.

  • No labels