郑州网站建设公司e00,如何搭建网站服务器,多用户自助建站系统源码,自建网站平台有哪些功能简介
Editor.md 支持“标准” Markdown / CommonMark 和 Github 风格的语法#xff0c;也可变身为代码编辑器#xff1b; 支持实时预览、图片#xff08;跨域#xff09;上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等…简介
Editor.md 支持“标准” Markdown / CommonMark 和 Github 风格的语法也可变身为代码编辑器 支持实时预览、图片跨域上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能 支持 ToC 目录Table of Contents、Emoji 表情、Task lists、链接等 Markdown 扩展语法 支持 TeX 科学公式基于 KaTeX、流程图 Flowchart 和 时序图 Sequence Diagram; 支持识别和解析 HTML 标签并且支持自定义过滤标签解析具有可靠的安全性和几乎无限的扩展性 支持 AMD / CMD 模块化加载支持 Require.js Sea.js并且支持自定义扩展插件 兼容主流的浏览器IE8和 Zepto.js且支持 iPad 等平板设备 支持自定义主题样式
使用步骤
一下载封装的Editor.md包
https://download.csdn.net/download/u012551928/87934068
预览
https://chengmaofeng.gitee.io/preview/rich-text/#/editor.md
组件代码
/components/EditorMd
templatediv :ideditorIdtextarea v-modelcontent/textarea/div
/templatescript
const defaultConfig {width: 98%, //宽度height: 440, //高度path: process.env.BASE_URL editor.md/lib/, // editormd你所下载的位置这里我把他放在了static的lib目录下codeFold: true, // 代码折叠lineWrapping: true, // 编辑框不换行watch: true,// 实时预览saveHTMLToTextarea: true, // 保存 HTML 到 TextareasearchReplace: true,htmlDecode: false, // 开启 HTML 标签解析为了安全性默认不开启emoji: false, //使用表情taskList: true,tocm: false, // Using [TOCM] //使用目录tex: true, // 开启科学公式TeX语言支持默认关闭flowChart: true, // 开启流程图支持默认关闭sequenceDiagram: true, // 开启时序/序列图支持默认关闭,imageUpload: true,imageFormats: [jpg, jpeg, gif, png, bmp, webp],imageUploadURL: , //这个需要你自己的后端上传图片的api//我们可以自己定制编辑上方的功能这里我是按照狂神的做的toolbarIcons: function () {return [undo, redo, |,bold, del, italic, quote, ucwords, uppercase, lowercase, image, |,h1, h2, h3, h4, h5, h6, |,list-ul, list-ol, hr, |,link, reference-link, code, code-block, table, datetime, html-entities, pagebreak, |,goto-line, watch, preview, fullscreen, clear, search, help, |// model, |, markdown //这两个是自定义的功能按钮的名字]},//如果你还想加一些你自己的功能你就这里写你按钮所对应的功能// toolbarIconTexts: {// model: i classfa stylefont-size: 16px;text-align: center;display: block;font-weight: bolder;padding: 5px; nametestIcon unselectableon模板/i, // 如果没有图标则可以这样直接插入内容可以是字符串或HTML标签// markdown: i classfa namelayoutmd unselectableona hrefhttps://www.kuangstudy.com/bbs/1356475333565587458 target_blankMarkDown指南/a/i// }
}export default {name: EditorMarkdown,props: {editorId: {type: String,//editor名字default: editor-md,},config: { // 编辑器配置type: Object,default: null},value: {type: String,//editor名字default: ,},},data() {return {editor: null,content: }},watch:{content(val){this.$emit(input, val)}},created(){this.content this.value},mounted() {//我们传入id和配置就可创建我们的编辑器// eslint-disable-next-line no-undefthis.editor editormd(this.editorId, this.getConfig());setTimeout((){this.editor.on(change, () {// testEditor.getMarkdown(); // 获取 Markdown 源码// testEditor.getHTML(); // 获取 Textarea 保存的 HTML 源码// testEditor.getPreviewedHTML(); // 获取预览窗口里的 HTML在开启 watch 且没有开启 saveHTMLToTextarea 时使用// const getMarkdown this.editor.getMarkdown()// const getHTML this.editor.getHTML()const getPreviewedHTML this.editor.getPreviewedHTML()this.$emit(input, getPreviewedHTML)// console.log(getMarkdown, getHTML, getPreviewedHTML)})})},methods: {//获取编辑器所需的配置如果没有传入config参数我们就是用默认配置getConfig() {if (this.config) {return {...defaultConfig, ...this.config};} else {return defaultConfig}}},
}
/script使用示例
templatedivEditorMd v-modeldataStr/EditorMddivh3源代码/h3span stylefont-size: 12px{{dataStr}}/span/divdiv stylemargin-top: 15pxel-button typeprimary click$router.back()返回/el-buttonel-button v-clipboarddataStr typeprimary clickhandleCopy复制源代码/el-buttonel-button typeprimary clickhandleToHome访问官网/el-button/div/div
/templatescript
import EditorMd from /components/EditorMdexport default {components:{EditorMd},data() {return {dataStr: 请输入}},mounted() {},methods: {handleCopy(){console.log(复制, this.dataStr)this.$message.success(复制成功)},handleToHome(){window.open(https://pandao.github.io/editor.md/)}}
}
/scriptstyle scoped/style
总结
本文仅仅简单介绍了Editor.md使用更多富文本配置及使用方式参考https://pandao.github.io/editor.md/ 如果觉得有用欢迎点赞关注 有问题私信我~~
