在nuxt中使用富文本编辑器quill

在nuxtjs中使用quill富文本编辑器的时候遇到了一些问题,在此记录

1.下载

npm i quill --s
npm i vue-quill-editor --s

2.在plugins下面新建文件vue-quill-editor.js写入以下内容,主要是用了自定义的工具栏

import Vue from ‘vue‘;
import VueQuillEditor from ‘vue-quill-editor‘;
import Quill from ‘vue-quill-editor/node_modules/quill‘;
const fontSizeStyle = Quill.import(‘attributors/style/size‘);
fontSizeStyle.whitelist = [‘12px‘, ‘14px‘, ‘16px‘, ‘18px‘, ‘20px‘, ‘24px‘, ‘36px‘]; // 自定义quill的工具栏
Quill.register(fontSizeStyle, true);
Vue.use(VueQuillEditor);

3.在nuxt.config.js中引入插件和quill的css,editor.css是我自定义部分的css样式。

css: [
    ‘element-ui/lib/theme-chalk/index.css‘,
    ‘~assets/css/basic.css‘,
    ‘~assets/css/editor.css‘, // 编辑器css
    ‘quill/dist/quill.snow.css‘,
    ‘quill/dist/quill.bubble.css‘,
    ‘quill/dist/quill.core.css‘
  ],
  /*
      ** Plugins to load before mounting the App
      */
  plugins: [
    ‘@/plugins/element-ui‘,
    ‘~/plugins/vue-echarts‘,
    ‘~/plugins/awe-dnd‘,
    { src: ‘@/plugins/vue-quill-editor‘, ssr: false },
    { src: ‘@/plugins/axios‘ },
    { src: ‘@/plugins/gmap‘ }
  ],

4.自定义样式:在assets/css/editor.css

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: ‘12px‘;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: ‘14px‘;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: ‘16px‘;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: ‘18px‘;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: ‘20px‘;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: ‘14px‘;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
    content: ‘24px‘;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
    content: ‘36px‘;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before{
    font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before{
    font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before{
    font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before{
    font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before{
    font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before{
    font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before{
    font-size: 36px;
}

5.页面的引用

<client-only>
        <quill-editor
          ref="editor"
          v-model="newsInfo.content"
          :options="editorOption"
          @change="onEditorChange($event)"
        />
      </client-only>

options的配置,用的ts写法

private editorOption: any = {
      modules: {
        toolbar: {
          container: [‘bold‘, ‘italic‘, ‘underline‘, { indent: ‘-1‘ }, { align: [] }, { indent: ‘+1‘ },
            { header: 1 }, { header: 2 },
            { size: [‘12px‘, ‘14px‘, ‘16px‘, ‘18px‘, ‘20px‘, ‘24px‘, ‘36px‘] },
            // { size: [‘small‘, false, ‘large‘, ‘huge‘] },
            ‘link‘, ‘image‘], // 加粗 斜体 下划线 删除线
          handlers: {
            image: () => {
              (this.$refs.quillImg as any).click();
            }
          }
        }
      }
    }

原文地址:https://www.cnblogs.com/wgl0126/p/12564308.html

时间: 2024-10-14 22:36:35

在nuxt中使用富文本编辑器quill的相关文章

silverlight中使用富文本编辑器

因为项目的需要在silverlight项目中使用富文本编辑器,好用的在线富文本编辑器有很多Fckeditor,百度的ueditor,但是这些富文本编辑器都是html的,想在silverlight中使用必须承载html页面再使用这些富文本编辑器. 之前找到了一个在silverliht中承载html页面的第三方控件htmlhost,但是这个控件有一个不好的地方时,用了只有silverlight项目中所有服务端控件都不能输入中文. 最近找到了一个大牛自己写的一个控件,能够满足我们的需要,自己改造之后放

Django中使用富文本编辑器Uedit

Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. settings.py INSTALLED_APPS = [ ... 'DjangoUeditor', ... ] 2. 配置urls from django.conf.urls import url, include urlpatterns = [ # 富文本相关url url(r'^uedit

在Django项目中使用富文本编辑器

1 开发要点 现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.ckeditor等等.在项目中使用这些编辑器主要有以下几个问题: 编辑页面 在HTML页面渲染编辑器: 定制编辑器的功能,比如有哪些文本样式.图片上传.代码插入: 定制编辑器的样式,指的是编辑器整体的样式,比如高度.宽度.显示位置等等: 预览内容: 获取内容: 显示页面 显示内容: 2 Django APP 下表列出一些常用的APP,它们都可以在GitHub上找的到,链接见下文

vue中使用富文本编辑器ueditor

参考: https://www.cnblogs.com/daimo/p/7525146.html https://blog.csdn.net/liujun03/article/details/84453287 1.下载文件包http://ueditor.baidu.com/website/download.html(我用的jsp的UTF-8版本) 2.文件包放到static下 3.  cnpm install --save vue-ueditor-wrap 4.使用 <div class="

html中使用富文本编辑器

引入kindeditor-all.js和lang/zh-CN.js KindEditor.ready(function(K) { window.editor1 = K.create('#id', { allowFileManager : true }); }); 原文地址:https://www.cnblogs.com/zhengziru/p/12074300.html

Django使用富文本编辑器

1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如:example,php,asp等4.在需要使用富文本编辑器的model中定义meta类: class Media: js = ( '/static/js/kindeditor-4.1.10/kindeditor-min.js', '/static/js/kindeditor-4.1.10/lang

Django学习:使用富文本编辑器(15)

目前后台写博客的页面比较简陋,只能用来设置一些简单的文字,或者格式,而且编写不太方便.为了方便博客编写,可以使用富文本编辑器. 新增一篇文章进行测试 进入详情页,加粗效果并没有显示出来 修改详情页的模板页面blog_detail.html ----snip---- <div class='blog-content'>{{ blog.content|safe }}</div> ----snip---- 此时刷新详情页,加粗效果显示了出来. 但是在博客类型显示摘要的时候,会显示出<

vue使用富文本编辑器vue-quill-editor实现配合后台将图片上传至七牛

一.全局注册:main.js import Vue from 'vue' import VueQuillEditor, { Quill } from 'vue-quill-editor' import { ImageDrop } from 'quill-image-drop-module' import ImageResize from 'quill-image-resize-module' import 'quill/dist/quill.core.css' import 'quill/dis

Java-Swing中实现富文本编辑器

问题介绍 使用Java-swing技术实现邮件发送功能.(为什么使用Java,因为我们组没学过C#) 邮件编辑使用富文本编辑器,用户可以自定义邮件格式. 支持上传图片. 支持附件发送. 内容支持名字的替换,显得像是单独给某个人发的一样. 功能图片展示 解决过程 开始看到这个需求,也没有什么想法感觉还好,于是百度.谷歌了一堆东西.首先百度Java swing的富文本编辑器组件,虽然确实找到了几个组件但是都是很老的版本,而且是一个独立的弹窗,样式也有点难看.问了一下学长的意见,说:“接受不了独立弹窗