找到啦!使用MDUI富文本编辑器的方法

Hello!MDUI World!

嗨,听说大家都很像使用MDUI富文本编辑器,但无奈作者没有公开,于是找到了使用方法,现在分享给大家━((*′д`)爻(′д`*))━!!!!

先在自己得网页上复制MDUI富文本编辑器的对话框源码:

<div class="mdui-dialog mc-editor-dialog with-title" id="write"
  style="display: none; top: 62.3045px; height: 498.391px;"><input type="text" class="title" placeholder="问题标题"
    maxlength="50">
  <div class="mc-editor">
    <div class="content mdui-typo content-empty" contenteditable="" placeholder="问题详细信息">
      <p><br></p>
    </div>
    <div class="toolbar"><button class="mdui-btn mdui-btn-icon mdui-ripple close" mdui-dialog-close="true"><i
          class="mdui-icon material-icons">close</i></button>
      <div class="mdui-toolbar-spacer"></div><button type="button"
        class="submit-text mdui-btn mdui-btn-raised mdui-color-indigo mdui-color-theme">发布</button><button type="button"
        class="submit-icon mdui-btn mdui-btn-icon mdui-text-color-indigo mdui-text-color-theme"><i
          class="mdui-icon material-icons">send</i></button><button class="mdui-btn menu menu-bold" type="button"
        title="粗体"><i class="mdui-icon material-icons">format_bold</i></button><button class="mdui-btn menu menu-italic"
        type="button" title="斜体"><i class="mdui-icon material-icons">format_italic</i></button>
      <div class="divider"></div><button class="mdui-btn menu menu-head" type="button" title="标题"><i
          class="mdui-icon material-icons">title</i></button><button class="mdui-btn menu menu-code" type="button"
        title="代码块"><i class="mdui-icon material-icons">code</i></button><button class="mdui-btn menu menu-ol"
        type="button" title="有序列表"><i class="mdui-icon material-icons">format_list_numbered</i></button><button
        class="mdui-btn menu menu-ul" type="button" title="无序列表"><i
          class="mdui-icon material-icons">format_list_bulleted</i></button>
      <div class="divider"></div><button class="mdui-btn menu menu-link" type="button" title="插入链接"><i
          class="mdui-icon material-icons">link</i></button><button class="mdui-btn menu menu-image" type="button"
        title="插入图片"><i class="mdui-icon material-icons">image</i></button>
      <div class="mdui-toolbar-spacer"></div>
      <div class="divider"></div><button class="mdui-btn menu menu-clear_drafts" type="button" title="舍弃草稿"><i
          class="mdui-icon material-icons">delete</i></button>
    </div>
  </div>
</div>


然后再添加一个按钮

<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#write'}">open</button>

然后添加作者还没有增加的CSS文件(好不容易找到的)

mc-editor.css

.mc-editor {
    height: 100%
  }

  .mc-editor .content-empty:before {
    content: attr(placeholder);
    color: rgba(0, 0, 0, .42);
    position: absolute;
    cursor: text
  }

  .mc-editor .content {
    padding: 0 20px;
    height: calc(100% - 64px);
    overflow-y: auto;
    outline: none;
    box-sizing: border-box
  }

  .mc-editor .content p[aria-label] {
    position: relative
  }

  .mc-editor .content p[aria-label]:empty:before {
    content: attr(aria-label);
    color: rgba(0, 0, 0, .56);
    cursor: text;
    position: absolute;
    top: 0;
    left: 0
  }

  .mc-editor .toolbar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 14px 20px
  }

  .mc-editor .toolbar:after {
    display: table;
    clear: both;
    content: ""
  }

  .mc-editor .toolbar .close {
    display: none;
    margin-right: 8px
  }

  .mc-editor .toolbar .close+.mdui-toolbar-spacer {
    display: none
  }

  .mc-editor .toolbar .submit-text {
    min-width: 58px;
    margin-right: 12px
  }

  .mc-editor .toolbar .submit-icon {
    display: none
  }

  .mc-editor .toolbar .menu {
    padding: 0;
    width: 28px;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px transparent;
    opacity: .6;
    color: #212121
  }

  .mc-editor .toolbar .menu i {
    font-size: 21px
  }

  .mc-editor .toolbar .menu:hover {
    opacity: 1;
    background-color: transparent
  }

  .mc-editor .toolbar .menu.active {
    background-color: rgba(0, 0, 0, .12);
    opacity: 1
  }

  .mc-editor .toolbar .menu+.menu {
    margin-left: 2px
  }

  .mc-editor .toolbar .divider {
    width: 1px;
    width: .8px;
    background-color: #e5e5e5;
    margin: 0 6px;
    height: 28px;
    display: inline-block;
    float: left
  }

  .mc-editor-dialog {
    max-width: 690px;
    height: calc(100vh - 100px)
  }

  .mc-editor-dialog .mc-editor {
    height: 100%
  }

  .mc-editor-dialog .mc-editor .content {
    padding-top: 16px
  }

  .mc-editor-dialog .close {
    display: none
  }

  .mc-editor-dialog .title {
    display: none;
    height: 62px;
    line-height: 34px;
    width: 100%;
    font-weight: 700;
    border: none;
    outline: none;
    padding: 14px 20px;
    font-size: 16px;
    box-sizing: border-box
  }

  .mc-editor-dialog.with-title .mc-editor {
    height: calc(100% - 62px)
  }

  .mc-editor-dialog.with-title .mc-editor .content {
    padding-top: 0
  }

  .mc-editor-dialog.with-title .title {
    display: block
  }

  @media (max-width:599px) {
    .mc-editor-dialog {
      position: fixed !important;
      left: 0 !important;
      top: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      height: 100% !important;
      width: 100% !important;
      margin: 0 !important;
      max-width: none !important;
      max-height: none !important;
      border-radius: 0 !important
    }

    .mc-editor-dialog .title {
      margin-top: 56px
    }

    .mc-editor-dialog .mc-editor {
      height: calc(100% - 56px) !important;
      margin-top: 56px
    }

    .mc-editor-dialog .toolbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 10px 8px;
      border-bottom: 1px solid rgba(0, 0, 0, .12)
    }

    .mc-editor-dialog .toolbar .close,
    .mc-editor-dialog .toolbar .close+.mdui-toolbar-spacer {
      display: block
    }

    .mc-editor-dialog .toolbar .divider,
    .mc-editor-dialog .toolbar .mdui-toolbar-spacer,
    .mc-editor-dialog .toolbar .menu {
      display: none
    }

    .mc-editor-dialog .toolbar .menu-image {
      display: block;
      position: fixed;
      right: 68px
    }

    .mc-editor-dialog .content {
      height: 100%
    }

    .mc-editor-dialog .submit-text {
      display: none
    }

    .mc-editor-dialog .submit-icon {
      display: block !important
    }

    .mc-editor-dialog.with-title .mc-editor {
      height: calc(100% - 118px) !important;
      margin-top: 0
    }
  }


然后引用MDUI和mc-editor.css,就可以正常使用啦!




如果对你有帮助可以帮忙给我的Github点Star么,谢谢Thanks♪(・ω・)ノ


https://github.com/snbck


共 4 个回答

重点是……这个东西到底是怎么用的


比如它那个加粗啊……那个斜体

JOJO,我不想再做人了!!

github里没有啊

举头望涵涵,低头思第一。 https://www.dffzmxj.com

在我的观点里,你似乎还要编写JS使按钮工作。

Hello!MDUI World!

求Star嘻嘻