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

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

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

瀏覽:155日期: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
    主站蜘蛛池模板: 洗石机-移动滚筒式,振动,螺旋,洗矿机-青州冠诚重工机械有限公司 | 同学聚会纪念册制作_毕业相册制作-成都顺时针宣传画册设计公司 | 宁夏活性炭_防护活性炭_催化剂载体炭-宁夏恒辉活性炭有限公司 | 活性氧化铝|无烟煤滤料|活性氧化铝厂家|锰砂滤料厂家-河南新泰净水材料有限公司 | wika威卡压力表-wika压力变送器-德国wika代理-威卡总代-北京博朗宁科技 | 发光字|标识设计|标牌制作|精神堡垒 - 江苏苏通广告有限公司 | 污水提升器,污水提升泵,污水提升装置-德国泽德(zehnder)水泵系统有限公司 | 北京乾茂兴业科技发展有限公司 | 科昊仪器超纯水机系统-可成气相液氮罐-美菱超低温冰箱-西安昊兴生物科技有限公司 | 广州冷却塔维修厂家_冷却塔修理_凉水塔风机电机填料抢修-广东康明节能空调有限公司 | 浇钢砖,流钢砖_厂家价低-淄博恒森耐火材料有限公司 | 广州小程序开发_APP开发公司_分销商城系统定制_小跑科技 | 日本SMC气缸接头-速度控制阀-日本三菱伺服电机-苏州禾力自动化科技有限公司 | 经济师考试_2025中级经济师报名时间_报名入口_考试时间_华课网校经济师培训网站 | 丹佛斯变频器-Danfoss战略代理经销商-上海津信变频器有限公司 | 威实软件_软件定制开发_OA_OA办公系统_OA系统_办公自动化软件 | 锂辉石检测仪器,水泥成分快速分析仪-湘潭宇科分析仪器有限公司 | 温控器生产厂家-提供温度开关/热保护器定制与批发-惠州市华恺威电子科技有限公司 | 天助网 - 中小企业全网推广平台_生态整合营销知名服务商_天助网采购优选 | 切铝机-数控切割机-型材切割机-铝型材切割机-【昆山邓氏精密机械有限公司】 | 烟雾净化器-滤筒除尘器-防爆除尘器-除尘器厂家-东莞执信环保科技有限公司 | 南昌旅行社_南昌国际旅行社_南昌国旅在线 | 成都竞价托管_抖音代运营_网站建设_成都SEM外包-成都智网创联网络科技有限公司 | 合肥触摸一体机_触摸查询机厂家_合肥拼接屏-安徽迅博智能科技 | 真空上料机(一种真空输送机)-百科 | 苏州伊诺尔拆除公司_专业酒店厂房拆除_商场学校拆除_办公楼房屋拆除_家工装拆除拆旧 | 飞扬动力官网-广告公司管理软件,广告公司管理系统,喷绘写真条幅制作管理软件,广告公司ERP系统 | 高压管道冲洗清洗机_液压剪叉式升降机平台厂家-林君机电 | 熔体泵_熔体出料泵_高温熔体泵-郑州海科熔体泵有限公司 | 污水处理设备维修_污水处理工程改造_机械格栅_过滤设备_气浮设备_刮吸泥机_污泥浓缩罐_污水处理设备_污水处理工程-北京龙泉新禹科技有限公司 | 多物理场仿真软件_电磁仿真软件_EDA多物理场仿真软件 - 裕兴木兰 | 济南铝方通-济南铝方通价格-济南方通厂家-山东鲁方通建材有限公司 | 元拓建材集团官方网站| 踏板力计,制动仪,非接触多功能速度仪,逆反射系数测试仪-创宇 | 药品冷藏箱厂家_低温冰箱_洁净工作台-济南欧莱博电子商务有限公司官网 | 灰板纸、灰底白、硬纸板等纸品生产商-金泊纸业 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 辽宁资质代办_辽宁建筑资质办理_辽宁建筑资质延期升级_辽宁中杭资质代办 | 万烁建筑设计院-建筑设计公司加盟,设计院加盟分公司,市政设计加盟 | 企业VI设计_LOGO设计公司_品牌商标设计_【北京美研】 | 英超直播_英超免费在线高清直播_英超视频在线观看无插件-24直播网 |