vue+tiptap+prosemirrors富文本编辑器示例代码
代码语言:html
所属分类:其他
代码描述:vue+tiptap+prosemirrors富文本编辑器示例代码,编写vue的自定义子组件实现,子组件重写设计了菜单栏,实现了自己风格的菜单栏,图标都进行了更换。
代码标签: vue tiptap prosemirrors 富文本 编辑器 示例 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tiptap.1.24.2.css"> <link rel='stylesheet' href='//repo.bfw.wiki/bfwrepo/css/tiptap-customicon.css'> <style> #app { padding: 50px 5px; } </style> </head> <body> <div id="app"> <tiptapeditor ref="editor"></tiptapeditor> <button @click="getcontent">获取值</button> </div> <template id="tiptap_temp"> <div class="editor"> <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }"> <div class="menubar"> <div class="toolbar o2k7Skin"> <table cellpadding="0" cellspacing="0" class="mceToolbar mceToolbarRow1 Enabled"> <tbody><tr> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="Undo" @click="commands.undo" > <span class="mceIcon mce_undo"></span> </a> </td> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="Redo" @click="commands.redo" > <span class="mceIcon mce_redo"></span> </a> </td> <td style="position: relative"><span class="mceSeparator" role="separator" aria-orientation="vertical" tabindex="-1"></span></td> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="Bold" :class="{ 'mceButtonActive': isActive.bold() }" @click="commands.bold" > <span class="mceIcon mce_bold"></span> </a> </td> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="Italic" :class="{ 'mceButtonActive': isActive.italic() }" @click="commands.italic"> <span class="mceIcon mce_italic"></span> </a> </td> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="Underline" :class="{ 'mceButtonActive': isActive.underline() }" @click="commands.underline"> <span class="mceIcon mce_underline"></span> </a> </td> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="Strikethrough" :class="{ 'mceButtonActive': isActive.strike() }" @click="commands.strike"> <span class="mceIcon mce_strikethrough"></span> </a> </td> <td style="position: relative"><span class="mceSeparator" role="separator" aria-orientation="vertical" tabindex="-1"></span></td> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="bullet_list" :class="{ 'mceButtonActive': isActive.bullet_list() }" @click="commands.bullet_list"> <span class="mceIcon mce_bullist"></span> </a> </td> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="ordered_list" :class="{ 'mceButtonActive': isActive.ordered_list() }" @click="commands.ordered_list"> <span class="mceIcon mce_numlist"></span> </a> </td> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="blockquote" :class="{ 'mceButtonActive': isActive.code_block() }" @click="commands.code_block"> <span class="mceIcon mce_blockquote"></span> </a> </td> <td style="position: relative"><span class="mceSeparator" role="separator" aria-orientation="vertical" tabindex="-1"></span></td> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="Create Table" @click="commands.createTable({rowsCount: 3, colsCount: 3, withHeaderRow: false })"> <span class="mceIcon mce_row_props"></span> </a> </td> </tr> </tbody></table> <div v-if="isActive.table()"> <table cellpadding="0" cellspacing="0" class="mceToolbar mceToolbarRow1 Enabled"> <tbody><tr> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title="Delete Table" @click="commands.deleteTable" > <span class="mceIcon mce_table"></span> </a> </td> <td style="position: relative"><span class="mceSeparator" role="separator" aria-orientation="vertical" tabindex="-1"></span></td> <td style="position: relative"> <a role="button" href="javascript:;" class="mceButton mceButtonEnabled" title=.........完整代码请登录后点击上方下载按钮下载查看
网友评论0