u239361
/
wuyebaoxiuapi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>External use - Editor.md examples</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="../css/editormd.css" />
        <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>External use</h1> 
                <p>External use of toolbar handlers / modal dialog</p>
            </header>
            <div class="btns">
                <button id="undo">Undo</button>
                <button id="open-link-dialog">Open link dialog</button>
                <button id="insert-bold">Insert Bold</button>
                <button id="insert-h6">Insert Heading 6</button>
                <button id="insert-inline-code">Insert Inline code</button>
                <button id="open-image-dialog">Open image dialog</button>
                <button id="open-help-dialog">Open help dialog</button>
                <button id="open-html-entities-dialog">Open html entities dialog</button>
            </div>
            <div id="test-editormd">                
                <textarea style="display:none;">[TOC]

### External use of toolbar handlers / modal dialog

```javascript 
testEditor = editormd("test-editormd", {
    width  : "90%",
    height : 720,
    path   : '../lib/'
}); 

// the first method
$("#undo").bind('click', function() {
    $.proxy(testEditor.toolbarHandlers.undo, testEditor)();
});

// the Second method : using manually loaded dialog plugin
// &lt;script src="../plugins/html-entities/html-entities.js"&gt;&lt;/script&gt;
$("#open-html-entities-dialog").bind('click', function() {
    testEditor.htmlEntities();
});

// using toolbar dialog plugin
$("#open-link-dialog").bind('click', function() {
    $.proxy(testEditor.toolbarHandlers.link, testEditor)();
});

// or
$("#open-image-dialog").bind('click', function(){
    // load and execute plugin
    testEditor.executePlugin("imageDialog", "../plugins/image-dialog/image-dialog");
});
```
</textarea>
            </div>
        </div>        
        <script src="js/jquery.min.js"></script>
        <script src="../editormd.js"></script>
        
        <!-- manually load dialog plugin -->
        <script src="../plugins/html-entities-dialog/html-entities-dialog.js"></script>
        <script type="text/javascript">
            var testEditor;
            
            $(function() {             
                testEditor = editormd("test-editormd", {
                    width  : "90%",
                    height : 720,
                    path   : '../lib/'
                }); 
                
                // the first method
                $("#undo").bind('click', function() {
                    $.proxy(testEditor.toolbarHandlers.undo, testEditor)();
                });
                
                // the Second method : using manually loaded dialog plugin
                $("#open-html-entities-dialog").bind('click', function() {
                    testEditor.htmlEntitiesDialog();
                });
                
                $("#insert-bold").bind('click', function() {
                    $.proxy(testEditor.toolbarHandlers.bold, testEditor)();
                    testEditor.focus();
                });
                
                $("#insert-h6").bind('click', function() {
                    $.proxy(testEditor.toolbarHandlers.h6, testEditor)();
                    testEditor.focus();
                });
                
                $("#insert-inline-code").bind('click', function() {
                    $.proxy(testEditor.toolbarHandlers.code, testEditor)();
                    testEditor.focus();
                });                
                
                $("#open-help-dialog").bind('click', function() {
                    $.proxy(testEditor.toolbarHandlers.help, testEditor)();
                });
                
                // using toolbar dialog plugin
                $("#open-link-dialog").bind('click', function() {
                    $.proxy(testEditor.toolbarHandlers.link, testEditor)();
                });
                
                // or
                $("#open-image-dialog").bind('click', function(){
                    testEditor.executePlugin("imageDialog", "../plugins/image-dialog/image-dialog"); // load and execute plugin
                });
            });
        </script>
    </body>
</html>