Markdown 편집기 editormd를 사용할 때 어떤 함정도 만나지 않기를 바랍니다.
- 不言원래의
- 2018-05-05 15:10:523448검색
이 글에서는 사용 중에 많은 문제를 피하는 데 도움이 되는 Markdown 편집기 editormd를 사용하는 자세한 과정을 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다
최근에 사용된 Express가 블로그를 개발했고, 마크다운은 문서 편집에 항상 인기가 있었습니다. 저는 또한 이 방법을 사용하여 프레임워크 편집기를 찾았고 처음에는 이 기능을 추가하는 데 몇 가지 작은 작업이 필요할 것이라고 생각하지 않았습니다. 문서는 상대적으로 완전하지 않았습니다. 이 문서는 많은 함정을 겪었으며, 이 글을 작성할 때 모든 사람이 과거의 실수로부터 배울 수 있기를 바랍니다.
1. 도입 방법
언어는 필요에 따라 다릅니다. 이전에는 편집자가 js 및 css만 인용했지만 가져오지 않았습니다. 가져올 모듈 파일이 너무 많을 것으로 예상됩니다.
2. 경로 파일 디렉터리
편집기는 템플릿 렌더링을 위해 swig를 사용하므로 정적 파일 디렉터리는 public
에 설정됩니다. 하지만 우리 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()
하나 있었어요. 동적 돔. 나는 이 요소를 직접 찾은 다음 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
백엔드 반환도 주의하세요
이것은 고정된 세트입니다 그렇지 않으면 프런트엔드에서 오류 URL을 보고합니다. 설정은 최종 업로드된 링크이므로 프런트엔드에 정상적으로 표시됩니다. 백엔드는 이를 로컬에 저장하거나 Qiniu 또는 Alibaba Cloud와 같은 클라우드 저장소를 사용할 수 있습니다.
res.json({
success : 1,
message : "上传成功！",
url: imageSrc
})
5. 마크다운 콘텐츠 표시
여기서 비교해 보세요. 쉽습니다.
<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>Finished
저는 최근에 문서 편집에도 마크다운을 사용하여 블로그를 개발했습니다. 문서 입력에 이 방법을 사용했는데, 프레임워크 편집기가 꽤 좋다고 생각하기 시작했습니다. 이 기능을 추가하는 데에는 많은 작은 작업이 필요할 것이라고는 생각하지 못했습니다. 나는 많은 함정을 밟았으며 모두가 과거로부터 배울 수 있기를 바랍니다.
1. 도입 방법
언어는 필요에 따라 다릅니다. 이전에는 편집자가 js 및 css만 인용했지만 가져오지 않았습니다. 가져올 모듈 파일이 너무 많을 것으로 예상됩니다.
2. 경로 파일 디렉터리
편집기는 템플릿 렌더링을 위해 swig를 사용하므로 정적 파일 디렉터리는 public
에 설정됩니다. 하지만 우리 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()
하나 있었어요. 동적 돔. 나는 이 요소를 직접 찾은 다음 jq를 통해 val()을 얻었습니다.어떤 친구들은 내가 얻은 값이 내가 쓴 것과 거의 같은 이유에 대해 질문이 있다는 것을 알고 있을 것입니다. 다음으로 우리가 제출하는 데이터베이스는 DOM을 사용하지 않고 프레임워크를 통해 문서를 구문 분석할 수 있습니다.
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
后台返回也要注意
这是一组固定格式要不然前端会报错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>
相关推荐：
위 내용은 Markdown 편집기 editormd를 사용할 때 어떤 함정도 만나지 않기를 바랍니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!