Browse Source

编辑调整

huwhois 3 years ago
parent
commit
9452c0b107
3 changed files with 53 additions and 17 deletions
  1. 1 0
      README.md
  2. 50 17
      public/html/index.html
  3. 2 0
      public/static/codemirror-5.31.0/.gitignore

+ 1 - 0
README.md

@ -5,3 +5,4 @@
5 5
* PHP 简单入口文件做跳转, 访问方式: /index/文档名.md
6 6
* 直接读取 md 文件, markdown 解析器为 parsedown, 使用 [程小白](https://www.chengxiaobai.cn/php/markdown-parser-library.html) 做的 [parsedown-extension 库](https://github.com/mrgeneralgoo/parsedown-extension), 并作修改, 将 TOC 目录和内容分别分别输出, 方便放到侧面.
7 7
* 编辑器使用的是 [ace.js](https://github.com/ajaxorg/ace), 暂未加入代码风格.
8
* ace中文输入有问题, 尝试使用 [codemirror](), 也没调好, 改回用基本的 textarea.

+ 50 - 17
public/html/index.html

@ -1,16 +1,22 @@
1 1
<html lang="zh-cn">
2 2
<head>
3
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
4
    <link rel="stylesheet" href="/static/css/index.css">
5
    <script src="/static/js/jquery.min.js"></script>
6
    <script src="/static/js/bootstrap.min.js"></script>
3
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
4
    <link rel="stylesheet" href="../static/css/index.css">
5
    <script src="../static/js/jquery.min.js"></script>
6
    <script src="../static/js/bootstrap.min.js"></script>
7 7
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/marked/2.0.3/marked.js"></script> -->
8 8
    <!-- <script src="http://cdn.bootcss.com/ace/1.2.4/ace.js"></script>
9 9
    <script src="http://cdn.bootcss.com/ace/1.2.4/ext-language_tools.js"></script> -->
10
    <!-- <script src="/static/js/ace.js"></script>
10 11
    <script src="/static/js/mode-markdown.js"></script>
11 12
    <script src="/static/js/theme-chrome.js"></script>
12
    <script src="/static/js/ace.js"></script>
13
    <script src="/static/js/ext-language_tools.js"></script>
13
    <script src="/static/js/ext-language_tools.js"></script> -->
14
    <!-- <link rel="stylesheet" href="../static/codemirror-5.31.0/lib/codemirror.css"/>
15
    <script src="../static/codemirror-5.31.0/lib/codemirror.js"></script> -->
16
    <!--引入css文件,用以支持主题-->
17
    <!-- <link rel="stylesheet" href="../static/codemirror-5.31.0/theme/solarized.css"/>
18
    <script src="../static/codemirror-5.31.0/mode/markdown/markdown.js"></script> -->
19
        
14 20
</head>
15 21
<body>
16 22
    <header>
@ -71,8 +77,11 @@
71 77
                <h4 class="modal-title" id="myModalLabel">编辑</h4>
72 78
            </div>
73 79
            <div class="modal-body">
74
                <div class="editor-content" id="mdeditor" style="height: 70%;"><?php echo $text;?></div>
75
                <!-- <textarea class="form-control" rows="20" style="resize:vertical"></textarea> -->
80
                <!-- <div class="editor-content" id="mdeditor" style="height: 70%;"><?php echo $text;?></div> -->
81
                <textarea class="form-control" rows="20" style="resize:vertical" id="mdeditor" name="mdeditor"><?php echo $text;?></textarea>
82
                <!-- begin code -->
83
                <!-- <textarea class="form-control" id="mdeditor" name="mdeditor"><?php echo $text;?></textarea> -->
84
                <!-- end code-->
76 85
            </div>
77 86
            <div class="modal-footer">
78 87
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
@ -88,18 +97,42 @@
88 97
            $("table").addClass('table table-bordered');
89 98
        });
90 99
91
        ace.require("ace/ext/language_tools");
92
        var acen_edit = ace.edit('mdeditor'); //编辑框
93
        acen_edit.setTheme('ace/theme/chrome');
94
        acen_edit.getSession().setMode('ace/mode/markdown');
95
        acen_edit.renderer.setShowPrintMargin(false);
100
        // ace 编辑器
101
        // ace.require("ace/ext/language_tools");
102
        // var editor = ace.edit('mdeditor'); //编辑框
103
        // editor.setTheme('ace/theme/chrome');
104
        // editor.getSession().setMode('ace/mode/markdown');
105
        // editor.renderer.setShowPrintMargin(false);
106
107
        // codemirror
108
        // var editor = CodeMirror.fromTextArea(document.getElementById("mdeditor"), {
109
        //     theme: "solarized",	//设置主题
110
        //     mode: "markdown",    //实现groovy代码高亮
111
        //     // mode: "text/x-java", //实现Java代码高亮
112
        //     lineNumbers: true,	//显示行号
113
        //     // lineWrapping: true,	//代码折叠
114
        //     // foldGutter: true,
115
        //     // gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
116
        //     // matchBrackets: true,	//括号匹配
117
        //     //readOnly: true,        //只读
118
        // });
119
120
        // textarea
121
        editor = {
122
            getValue() {
123
                return $("#mdeditor").val();
124
            }
125
        };        
126
96 127
        function edit() {
97
            // console.log(2222);
128
            // console.log(editor.getValue());
98 129
            $("#myModal").modal('show');
99 130
        }
100 131
101 132
        function save(doc) {
102
            var text = acen_edit.getValue();
133
            var text = editor.getValue();
134
            // console.log(editor.getValue());
135
            // return false;
103 136
            $.ajax({
104 137
                url: "/save",
105 138
                type: "POST",
@ -110,8 +143,8 @@
110 143
                dataType: 'JSON',
111 144
                success: function (res) {
112 145
                    if (res.code==0) {
113
                        acen_edit.destroy();
114
                        acen_edit.container.remove();
146
                        // acen_edit.destroy();
147
                        // acen_edit.container.remove();
115 148
                        console.log(res.msg);
116 149
                        alert("保存成功");
117 150
                        $("#myModal").modal('hide');

+ 2 - 0
public/static/codemirror-5.31.0/.gitignore

@ -0,0 +1,2 @@
1
*
2
!.gitignore