电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

一款功能強大的markdown編輯器tui.editor使用示例詳解

瀏覽:153日期:2022-06-01 11:49:50
目錄
  • 簡介
  • 安裝使用
    • 安裝
    • 初始化
    • 官方插件
    • 功能拓展
  • 實現源碼

    簡介

    最近在捯飭自己的個人網站,想找一款類似于掘金的markdown編輯器,主要訴求包含實時預覽、語法高亮、自動生成目錄索引。對比了市面上主流的幾款編輯器,最后采用了@toast-ui/editor。選擇的主要原因就是開箱即用,內置一些實用的插件,如表格并且支持合并單元格、語法高亮、圖形展示、uml繪制等;支持自定義插件擴展,因為這款編輯器是基于prosemirror,前身即codemirror,編輯器本身是偏底層的,提供了豐富的api供我們自定義開發,這也大大增強了編輯器的靈活性,如果想加一個目錄索引,我們完全可以自定義開發一個插件使用。

    在初次使用過程中,也遇到一些注意點,本文以vue3為例,簡單介紹@toast-ui/editor的使用過程。

    安裝使用

    安裝

    npm install @toast-ui/editor -S

    初始化

    import Editor from "@toast-ui/editor"import "@toast-ui/editor/dist/toastui-editor.css"import "@toast-ui/editor/dist/i18n/zh-cn";export default {    mounted () {      const editor = new Editor({el: this.$refs.editor,language: "zh-CN",initialEditType: "markdown",previewStyle: "vertical",      });    }  }

    通過以上兩步,我們就能得到一個簡易的編輯器了,如下圖所示:

    顯然我們的目的不僅如此,markdown編輯器還缺少語法高亮、目錄欄,接下來我們看下如何擴展tui

    官方插件

    官方內置了以下插件:

    插件名稱用途@toast-ui/editor-plugin-chart圖形渲染@toast-ui/editor-plugin-code-syntax-highlight語法高亮@toast-ui/editor-plugin-color-syntax文本添加顏色@toast-ui/editor-plugin-table-merged-cell合并單元格@toast-ui/editor-plugin-uml渲染UML

    接下來我們配置代碼語法高亮。

    • 安裝插件
    npm install @toast-ui/editor-plugin-code-syntax-highlight
    • 使用
    import "prismjs/themes/prism.css";import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";import Editor from "@toast-ui/editor";// 支持所有語言語法高亮import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";const editor = new Editor({  // ...  plugins: [codeSyntaxHighlight]});

    功能拓展

    目前編輯器包含了語法高亮,如果需要添加目錄索引,可以監聽文檔編輯的change事件,獲取markdown文檔內容,通過正則表達式解析即可。具體實現如下:

    const editor = new Editor({  // ...  events: {    change: this.handleContentChange.bind(this)  },});methods: {  handleContentChange () {    const mdText = this.editor.mdEditor.getMarkdown()    this.parseMdTitle(mdText)  },  parseMdTitle (mdText) { // 解析markdown title    const pattern = /^(#+)\s+(.+)/mg    let result = mdText.match(pattern)    if (!result) return    const catalogList = result.map((vv, index) => {      const levelText = vv.match(/^(#+)/)      return {level: levelText[0].length, // 目錄級別index,cls: `heading-${levelText[0].length}`,content: vv.slice(levelText[0].length).trim(), // 內容      }    })    this.catalogList = catalogList  }}

    以上僅僅是一些基礎的使用。markdown基礎語法無法滿足我們需要時、需要手動修改渲染樣式等需求,tui.editor也提供相應的能力。如需要修改標題的默認渲染樣式,我們可以使用customHTMLRenderer,這一塊官方文檔較少,可以從源碼看出默認書寫規則,內置schema位置詳見源碼libs\toastmark\src\html\baseConvertors.ts

    new Editor({  // ...  customHTMLRenderer: {    heading (node, { entering }) {      const spec = {type: entering ? "openTag" : "closeTag",tagName: `h${node.level}`,outerNewLine: true,      };      // 給每個header添加class      if (entering) spec.attributes = {"class": `heading${node.level}`      }      return spec    }  }})

    最新3.0版本的編輯器是基于Prosemirror,有興趣的小伙伴可以去看下,功能十分強大,也是level1級富文本編輯器的典型代表。

    編輯器最終效果圖如下:

    實現源碼

    <template>  <div>    <div ref="editor"></div>    <div v-if="catalogList.length > 0">      <div>目錄</div>      <template v-for="(item, index) in catalogList" :key="index"><div :class="item.cls">  <a :href=""#heading" + (index + 1)" rel="external nofollow" >{{item.content}}</a></div>      </template>    </div>  </div></template><script>  import Editor from "@toast-ui/editor"  import "@toast-ui/editor/dist/toastui-editor.css"  import "@toast-ui/editor/dist/i18n/zh-cn";  import "prismjs/themes/prism.css";  import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";  import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";  import "@toast-ui/editor-plugin-table-merged-cell/dist/toastui-editor-plugin-table-merged-cell.css";  import tableMergedCell from "@toast-ui/editor-plugin-table-merged-cell";  export default {    data () {      return {catalogList: []      }    },    mounted () {      this.editor = new Editor({el: this.$refs.editor,language: "zh-CN",initialEditType: "markdown",previewStyle: "vertical",placeholder: "請輸入內容",plugins: [codeSyntaxHighlight, tableMergedCell],events: {  change: this.handleContentChange.bind(this)},customHTMLRenderer: {  heading (node, { entering }) {    const spec = {      type: entering ? "openTag" : "closeTag",      tagName: `h${node.level}`,      outerNewLine: true,    };    // 添加自定義屬性    if (entering) spec.attributes = {      "class": `heading${node.level}`    }    return spec  }}      })    },    methods: {      handleContentChange () {const mdText = this.editor.mdEditor.getMarkdown()this.parseMdTitle(mdText)      },      parseMdTitle (mdText) { // 解析markdown titleconst pattern = /^(#+)\s+(.+)/mglet result = mdText.match(pattern)if (!result) returnconst catalogList = result.map((vv, index) => {  const levelText = vv.match(/^(#+)/)  return {    level: levelText[0].length, // 目錄級別    index,    cls: `heading-${levelText[0].length}`,    content: vv.slice(levelText[0].length).trim(), // 內容  }})this.catalogList = catalogList      }    }  }</script><style scoped>  .full {    position: relative  }  .catalog-container {    box-sizing: border-box;    position: absolute;    right: 0;    bottom: 32px;    width: 200px;    height: 300px;    padding: 16px 0;    background-color: rgba(255, 255, 255, .65);    border: 1px solid #ccc;    border-radius: 4px;  }  .catalog-title {    text-align: center;    padding-bottom: 12px;  }  .catalog-item {    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;    padding: 4px 8px;    font-size: 14px;    user-select: none;  }  .catalog-item a {    color: rgba(0, 0, 0, .65);    text-decoration: none;  }  .heading-2 {    padding-left: 24px;  }  .heading-3 {    padding-left: 48px;  }  .catalog-item a:hover {    color: cadetblue;  }  .markdown-editor {    height: 100% !important;    background: #fff;    border-radius: 4px;  }</style>

    參考資料

    • toastui/editor
    • tui.editor

    以上就是一款功能強大的markdown編輯器tui.editor使用示例詳解的詳細內容,更多關于markdown編輯器tui.editor的資料請關注其它相關文章!

    標簽: JavaScript
    主站蜘蛛池模板: 楼梯定制_楼梯设计施工厂家_楼梯扶手安装制作-北京凌步楼梯 | 厂房出售_厂房仓库出租_写字楼招租_土地出售-中苣招商网-中苣招商网 | 德国EA可编程直流电源_电子负载,中国台湾固纬直流电源_交流电源-苏州展文电子科技有限公司 | 富森高压水枪-柴油驱动-养殖场高压清洗机-山东龙腾环保科技有限公司 | 茶楼装修设计_茶馆室内设计效果图_云臻轩茶楼装饰公司 | 北京网站建设首页,做网站选【优站网】,专注北京网站建设,北京网站推广,天津网站建设,天津网站推广,小程序,手机APP的开发。 | 大型冰雕-景区冰雕展制作公司,3D创意设计源头厂家-[赛北冰雕] | EPK超声波测厚仪,德国EPK测厚仪维修-上海树信仪器仪表有限公司 | 塑胶地板-商用PVC地板-pvc地板革-安耐宝pvc塑胶地板厂家 | 广东恩亿梯电源有限公司【官网】_UPS不间断电源|EPS应急电源|模块化机房|电动汽车充电桩_UPS电源厂家(恩亿梯UPS电源,UPS不间断电源,不间断电源UPS) | 山东集装箱活动房|济南集装箱活动房-济南利森集装箱有限公司 | 防爆鼓风机-全风-宏丰鼓风机-上海梁瑾机电设备有限公司 | 金属清洗剂,防锈油,切削液,磨削液-青岛朗力防锈材料有限公司 | 北京印刷厂_北京印刷_北京印刷公司_北京印刷厂家_北京东爵盛世印刷有限公司 | 天然鹅卵石滤料厂家-锰砂滤料-石英砂滤料-巩义东枫净水 | 小型UV打印机-UV平板打印机-大型uv打印机-UV打印机源头厂家 |松普集团 | 衡阳耐适防护科技有限公司——威仕盾焊接防护用品官网/焊工手套/焊接防护服/皮革防护手套 | 细砂提取机,隔膜板框泥浆污泥压滤机,螺旋洗砂机设备,轮式洗砂机械,机制砂,圆锥颚式反击式破碎机,振动筛,滚筒筛,喂料机- 上海重睿环保设备有限公司 | 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | 车载加油机品牌_ 柴油加油机厂家| 真石漆,山东真石漆,真石漆厂家,真石漆价格-山东新佳涂料有限公司 | 水厂自动化-水厂控制系统-泵站自动化|控制系统-闸门自动化控制-济南华通中控科技有限公司 | 包装盒厂家_纸盒印刷_礼品盒定制-济南恒印包装有限公司 | 莱州网络公司|莱州网站建设|莱州网站优化|莱州阿里巴巴-莱州唯佳网络科技有限公司 | 制氮设备_PSA制氮机_激光切割制氮机_氮气机生产厂家-苏州西斯气体设备有限公司 | 半自动预灌装机,卡式瓶灌装机,注射器灌装机,给药器灌装机,大输液灌装机,西林瓶灌装机-长沙一星制药机械有限公司 | 换链神器官网-友情链接交换、购买交易于一体的站长平台 | 酒糟烘干机-豆渣烘干机-薯渣烘干机-糟渣烘干设备厂家-焦作市真节能环保设备科技有限公司 | 橡胶膜片,夹布膜片,橡胶隔膜密封,泵阀设备密封膜片-衡水汉丰橡塑科技公司网站 | 钢丝绳探伤仪-钢丝绳检测仪-钢丝绳探伤设备-洛阳泰斯特探伤技术有限公司 | ◆大型吹塑加工|吹塑加工|吹塑代加工|吹塑加工厂|吹塑设备|滚塑加工|滚塑代加工-莱力奇塑业有限公司 | 热缩管切管机-超声波切带机-织带切带机-无纺布切布机-深圳市宸兴业科技有限公司 | 制氮设备_PSA制氮机_激光切割制氮机_氮气机生产厂家-苏州西斯气体设备有限公司 | 南昌旅行社_南昌国际旅行社_南昌国旅在线| 无锡门窗-系统门窗-阳光房-封阳台-断桥铝门窗厂[窗致美] | 蒸压釜_蒸养釜_蒸压釜厂家-山东鑫泰鑫智能装备有限公司 | 塑料撕碎机_编织袋撕碎机_废纸撕碎机_生活垃圾撕碎机_废铁破碎机_河南鑫世昌机械制造有限公司 | 中天寰创-内蒙古钢结构厂家|门式刚架|钢结构桁架|钢结构框架|包头钢结构煤棚 | 电梯乘运质量测试仪_电梯安全评估测试仪-武汉懿之刻 | 无线联网门锁|校园联网门锁|学校智能门锁|公租房智能门锁|保障房管理系统-KEENZY中科易安 | 异噻唑啉酮-均三嗪-三丹油-1227-中北杀菌剂厂家 |