You can increase or decrease indent with the ruler, like word processors.
<!-- external modules --> <script type="text/javascript" src='https://www.synapeditor.com/se/resource/synapeditor/externals/formulaParser/formula-parser.min.js'></script> <script type="text/javascript" src='https://www.synapeditor.com/se/resource/synapeditor/externals/SEDocModelParser/SEDocModelParser.min.js'></script> <script type="text/javascript" src='https://www.synapeditor.com/se/resource/synapeditor/externals/SEShapeManager/SEShapeManager.min.js'></script> <script type="text/javascript" src='https://www.synapeditor.com/se/resource/synapeditor/externals/codeMirror/codemirror.min.js'></script> <script type="text/javascript" src="https://www.synapeditor.com/se/resource/synapeditor/externals/codeMirror/xml.min.js"></script> <link rel='stylesheet' href='https://www.synapeditor.com/se/resource/synapeditor/externals/codeMirror/codemirror.min.css'> <!-- Synap Editor --> <script src='https://www.synapeditor.com/se/resource/synapeditor/synapeditor.config_en.js'></script> <script src='https://www.synapeditor.com/se/resource/synapeditor/synapeditor.min.js'></script> <link href='https://www.synapeditor.com/se/resource/synapeditor/synapeditor.min.css' rel='stylesheet' type='text/css'> <div style="background-color: #ffffff; width:99%; height:500px;"> <div id="synapEditor"> <p> <span>If you click the Ruler icon (</span> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDMDhBNkI0M0VFQUJFODExODhGRUE1QzdBNDExRkNDQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0QkQ2MUM1QUFDMjIxMUU4OUM1N0E1MzgyNERFMjI4NyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0QkQ2MUM1OUFDMjIxMUU4OUM1N0E1MzgyNERFMjI4NyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEE2QjQzRUVBQkU4MTE4OEZFQTVDN0E0MTFGQ0NBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEE2QjQzRUVBQkU4MTE4OEZFQTVDN0E0MTFGQ0NBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+MNmkfAAAAFZJREFUeNpi/P//PwMlgImBQjDwBrDY2tr+p4YLGEnFhw8fZqSOF5DY/2GmwgDQew0gGijegCb+H+oS6roAqw3oYkDXoKhltLGxoSgWGEeTMuUGAAQYALZCGpW6WmVLAAAAAElFTkSuQmCC"/> <span>), the ruler appears on the top of the editing window.</span> </p> <p> <span>Try editing like word processors using the ruler.</span> </p> <p><span></span></p> <p> <span>First-line indent</span><br/> <span>Decrease indent</span><br/> <span>Indent left</span><br/> <span>Indent right</span> </p> <p><span></span></p> <p> <span>List</span> </p> <p> <span>List</span> </p> <p> <span>List</span> </p> </div> </div> <script> const config = Object.assign(synapEditorConfig, { "editor.license":"/se/resource/license.json", "editor.toolbar": ["new","|", "ruler" , "|", "bulletList", "numberedList", "multiLevelList"], "editor.menu.show": false, "editor.import.maxSize": 10485760, "editor.import.api": "/se/importDoc", "editor.upload.maxSize": 3145728, "editor.upload.image.api": "/se/uploadFile", "editor.upload.video.api": "/se/uploadFile", "editor.upload.file.api": "/se/uploadFile" }); window.editor = new SynapEditor("synapEditor", config, document.getElementById('synapEditor').innerHTML); </script> |