quasar+vue实现可视化富文本编辑器自定义图标菜单效果代码
代码语言:html
所属分类:其他
代码描述:quasar+vue实现可视化富文本编辑器自定义图标菜单效果代码
代码标签: quasar vue 可视化 富文本 编辑器 自定义 图标 菜单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quasar.prod.css"> <style> .editor_token { background: rgba(0, 0, 0, 0.6); color: white; padding: 3px; } .editor_token, .editor_token .q-icon { border-radius: 3px; } .editor_token .q-icon { background: rgba(0, 0, 0, 0.2); } </style> </head> <body> <div id="q-app" > <div class="q-pa-md q-gutter-sm"> <q-editor v-model="editor" ref="editorRef" toolbar-text-color="white" toolbar-toggle-color="yellow-8" toolbar-bg="primary" :toolbar="[ ['token'], ['bold', 'italic', 'underline'], [{ label: $q.lang.editor.formatting, icon: $q.iconSet.editor.formatting, list: 'no-icons', options: ['p', 'h3', 'h4', 'h5', 'h6', 'code'] }] ]" > <template v-slot:token> <q-btn-dropdown dense no-caps ref="tokenRef" no-wrap unelevated color="white" text-color="primary" label="Token" size="sm" > <q-list dense> <q-item tag="label" clickable @click="add('email')"> <q-item-section .........完整代码请登录后点击上方下载按钮下载查看
网友评论0