vue-quill-editor富文本框增加表情包quill-emoji
引入并注册import { Quill, quillEditor } from 'vue-quill-editor'import quillEmoji from 'quill-emoji'import 'quill-emoji/dist/quill-emoji.css'Quill.register('modules/quillEmoji', quillEmoji)上面组件得installexpor
·
引入并注册
import { Quill, quillEditor } from 'vue-quill-editor'
import quillEmoji from 'quill-emoji'
import 'quill-emoji/dist/quill-emoji.css'
Quill.register('modules/quillEmoji', quillEmoji)
上面组件得install
npm i node-emoji
export default {
components: {
quillEditor
},
data() {
return {
editorOption: {
theme: 'snow',
modules: {
'emoji-toolbar': true,
'emoji-shortname': true,
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
['blockquote', 'code-block'], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
[{ script: 'sub' }, { script: 'super' }], // 上标/下标
[{ indent: '-1' }, { indent: '+1' }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['image'], // 图片
['emoji'],//表情包
// ['link', 'image', 'video'], // 链接、图片、视频
], // 工具菜单栏配置
},
placeholder: '输入评论...', // 提示
},
}
}
}
<quill-editor
ref="myQuillEditor"
v-model="replyForm.replyContent"
class="quill"
:options="editorOption"
/>
更多推荐
已为社区贡献4条内容
所有评论(0)