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',
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0