Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。-＆＃＆チュートリアル-php.cn

この記事では、Markdown エディタ editormd を使用する詳細なプロセスを共有します。これは、使用中に多くの問題を回避するのに役立ちます。必要な友人はそれを参照してください

Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。

最近使用した Express はブログを作成しました。マークダウンはドキュメントの編集に常に人気がありました。私もフレームワークエディターを見つけて、この機能を追加するのにいくつかの小さな作業が必要だとは思いませんでした。このドキュメントは比較的完成度が高くありませんでしたが、多くの落とし穴を経験しました。これを書くときに皆さんが過去の失敗から学んでくれることを願っています。

1.導入方法

Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。言語は必要に応じて異なります。以前はエディターがjsとcssを引用するだけでしたが、私はインポートしませんでした。インポートするモジュールファイルが非常に多くあることが予想されます。

2. パスファイルディレクトリエディターはテンプレートのレンダリングに swig を使用するため、静的ファイルディレクトリは public に設定されます

Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。しかし、editormd の js 内のスクリプトインポートの一部は動的に生成されます。が見つからなかったので、ソースコードを見てみると、パラメータで設定できることが分かりました(次回から注意してください!)

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

ログイン後にコピー

3. コンテンツのアップロード

はできませんでした。最初は編集した内容がどこにあるのか分からなかったのですが、長い間探しても見つかりませんでした。

$('.editormd-markdown-textarea').val()

ログイン後にコピー

Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。の中に 1 つありました。動的 DOM です。私はこの要素を直接見つけて、jq 経由で val() を取得しました
取得した値が私が書いた値とほぼ同じであることに疑問があることを知っている人もいるかもしれません。次に、送信したデータベースには DOM がありません。説明は以下の通りです

4. 画像のアップロード

エディターが付属しています。アップロードツールの送信後、

ここで注意すべきは、バックエンドがリクエストを受信したときに返されるパラメータと取得される値です。
フロントエンド設定

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            //启动本地图片上传功能
            imageUpload: true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/admin/content/img_up", //文件提交请求路径
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

ログイン後にコピー

私はバックエンド受信を使用しました

ミドルウェアはファイル受信用にパラメータeditormd-image-fileを設定する必要がありますmulter

Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。バックグラウンドリターンにも注意してください
これは固定のセットですそうでない場合、フロントエンドはエラー URL を報告します。設定は最終的にアップロードされたリンクなので、バックエンドはローカルに保存するか、Qiniu や Alibaba Cloud などのクラウドストレージを使用できます。

res.json({
    success : 1, 
    message : "上传成功！",
    url: imageSrc
})

ログイン後にコピー

5.Markdownコンテンツの表示

ここで比較してみましょう

私も最近、文書編集にMarkdownを使ったブログを開発しました。私はこの方法をドキュメントの入力に使用しましたが、これは非常に簡単だと思い始めました。比較的完全なドキュメントがないため、この機能を追加するには多くの小さな作業が必要になるとは思いませんでした。私は多くの落とし穴を踏みましたが、皆さんが過去から学んでいただけることを願ってこれを書いています。 Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。

1.導入方法

言語は必要に応じて異なります。以前はエディターがjsとcssを引用するだけでしたが、私はインポートしませんでした。インポートするモジュールファイルが非常に多くあることが予想されます。

Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。 2. パスファイルディレクトリ
エディターはテンプレートのレンダリングに swig を使用するため、静的ファイルディレクトリは public に設定されます

しかし、editormd の js 内のスクリプトインポートの一部は動的に生成されるため、が見つからなかったので、ソースコードを見てみると、パラメータで設定できることが分かりました(次回から注意してください!)

<p id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc">{{content.content}}</textarea>               
        </p>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="../../public/plug/editormd/lib/marked.min.js"></script>
<script src="../../public/plug/editormd/lib/prettify.min.js"></script>
<script src="../../public/plug/editormd/lib/raphael.min.js"></script>
<script src="../../public/plug/editormd/lib/underscore.min.js"></script>
<script src="../../public/plug/editormd/lib/sequence-diagram.min.js"></script>
<script src="../../public/plug/editormd/lib/flowchart.min.js"></script>
<script src="../../public/plug/editormd/lib/jquery.flowchart.min.js"></script>
<script src="../../public/plug/editormd/editormd.js"></script>
<script type="text/javascript">
    testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
</script>

ログイン後にコピー

Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。

3. コンテンツのアップロード
はできませんでした。最初は編集した内容がどこにあるのか分からなかったのですが、長い間探しても見つかりませんでした。

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

ログイン後にコピー

の中に 1 つありました。動的 DOM です。私はこの要素を直接見つけて、jq 経由で val() を取得しました

取得した値が私が書いた値とほぼ同じであることに疑問があることを知っている人もいるかもしれません。次に、送信したデータベースは DOM を使用せずに、フレームワークを使用してドキュメントを解析する方法について説明します Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。 4.

editor自带图片上传工具post提交，
这里要注意的是后端接收请求要返回的参数和获取的值。
前端配置

var editor = editormd("editormd", {
            height:'300px',
            syncScrolling : "single",
            //启动本地图片上传功能
            imageUpload: true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/admin/content/img_up", //文件提交请求路径
            path : "../../public/plug/editormd/lib/" //修改文件目录引用的路径  mode, codemirror, marked... dependents libs path
        });

ログイン後にコピー

后端接收我用了multer中间件要设置文件接收的参数editormd-image-file

Markdown エディタ editormd を使用するときに落とし穴に遭遇しないことを願っています。
后台返回也要注意
这是一组固定格式要不然前端会报错url设置的是最终上传完的链接，这样才会在前端正常的显示后端可以保存本地也可以用七牛或者阿里云这种云存储

res.json({
    success : 1, 
    message : "上传成功！",
    url: imageSrc
})

ログイン後にコピー

5、markdown内容展示

到这里就比较简单了

<p id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc">{{content.content}}</textarea>               
        </p>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="../../public/plug/editormd/lib/marked.min.js"></script>
<script src="../../public/plug/editormd/lib/prettify.min.js"></script>
<script src="../../public/plug/editormd/lib/raphael.min.js"></script>
<script src="../../public/plug/editormd/lib/underscore.min.js"></script>
<script src="../../public/plug/editormd/lib/sequence-diagram.min.js"></script>
<script src="../../public/plug/editormd/lib/flowchart.min.js"></script>
<script src="../../public/plug/editormd/lib/jquery.flowchart.min.js"></script>
<script src="../../public/plug/editormd/editormd.js"></script>
<script type="text/javascript">
    testEditormdView2 = editormd.markdownToHTML("test-editormd-view", {
        htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
</script>

ログイン後にコピー