添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

关于pc端使用Vue-Quill-Editor插件,但是在小程序中,样式缺丢失问题

查找到Quill的样式

我们在pc端的quill包中找到以下的css文件,并放入在style文件夹中
在这里插入图片描述

<rich-text class="rich-text ql-editor" :nodes="details.newsContent | formatRichText"></rich-text>

在rich-text中加入样式标签ql-editor
并且在app.vue文件中引入

 @import '@/styles/quill/quill.bubble.css';
 @import '@/styles/quill/quill.core.css';
 @import '@/styles/quill/quill.snow.css';

*注意:不要在局部文件引入,因为在局部引入,scoped会在我们引入的css样式加上私有属性,这就回导致我们样式引入失败

前言关于pc端使用Vue-Quill-Editor插件,但是在小程序中,样式缺丢失问题查找到Quill的样式我们在pc端的quill包中找到以下的css文件,并放入在style文件夹中&lt;rich-text class="rich-text ql-editor" :nodes="details.newsContent | formatRichText"&gt;&lt;/rich-text&gt;在rich-text中加入样式标签ql-editor并且在app.vue文件中引入 @imp
1.先在编辑器的quill文件夹中找到css文件,一共3个,quill.bubble.css、quill.core.css、quill.snow.css,把css改为wxss后缀;同时把文件中含有* 等报错的代码注释,因为小程序识别不了* 2.在wxss中添加引入: @import './quill.bubble.wxss'; @import './quill.core.wxss'; @import './quill.snow.wxss'; 3.下载wxParse插件 在wxml页面引入文件:...
vue富文本编辑器vue-quill-editor的使用方法 这是vue自家的一款编辑器,支持IE10+以上的浏览器。界面比较友好,如果你需要对你的文字,图像做一些编辑。它是一个不错的选择,先上一张效果图吧! 主要介绍在vue中使用,所以直接npm安装就可以,安装命令如下。 npm i vue-quill-editor --save 1、在main.js中引用 import Vue...
用富文本的情况有很多,例如在后台管理系统排版好的富文本页面,准备在移动端页面去显示,或者在官网显示,两个项目不在一起,在管理系统排好的样式在显示页面显示的一塌糊涂,为啥呢?大多数情况是样式没有引入。 给容器增加一个class ql-editor,才能正常显示,另外前面是主题类名,不同的主题显示不同的样式 <link href="http://cdn.quilljs.com/1...
有关于vue-quill-editor回显时字体大小样式丢失问题 如图,在回显编辑器中的内容时,发现文本内容的字色,下划线等样式均能使用,但是字体的大小无法统一 将其转换成html格式输出后发现 如图,在具体变化大小的字前都定义了一个class 查阅资料得知要想文本的样式正确显示,需要在回显的div上增加一个class=”ql-editor”的class名,来确保子元素样式被匹配到 <div class="ql-container"> <div class="q
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 : vue-quill-editor富文本编辑器使用方法,最全,含部分源码解读,含图片上传,如果页面有多个富文本,图片上传解决方案 https://blog.csdn.net/cplvfx/article/details/125557966
啰啰嗦嗦的序言(可看可不看): 先说下我的需求,富文本中新增一个表格需求,富文本已实现(增删查改),表格新增要一起同步这四个场景, 开始我用的vue-quill-editor,结果发现坑太多,我查看的时候没法把拿到的数据丢到quill里面去修改,只能v-html展示,还有缓存以及验证的一些问题,只是想在富文本加个表格,发现用vue-quill-editor要改的地方太多,果断弃坑了,网上找了下发现wangEditor貌似不错,还有团队在维护, 支持Vue、React、Angular等框
import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' 导入富文本组件 import { quillEditor } from 'vue-quill-editor' components: { quillEditor <quill-ed
escapeStringHTML(strs) { strs = strs.replace(/&lt;/g, "<"); strs = strs.replace(/&gt;/g, ">"); return strs 随着微信小程序的火爆及百度、头条小程序的持续推进,跨端开发的需求愈发迫切,业界随之出现了一系列的跨端框架,但对于H5平台跨端支持的都不太彻底: Vue技术栈的小程序框架:对于H5平台支持普遍较弱 部分React技术栈的小程序框架:虽支持生成可在H5端运行的代码,但仅仅是代码可运行,离项目直接发行上线的目标还存在一定差距。 鉴于客观需求及现状,DCloud前端团队响应开发者彻底跨端的呼声,经过连续奋战,uni-ap 对于将uni-app小程序转换为Vue H5项目,我们需要考虑以下几个方面来实现: 1. 了解uni-app和Vue H5项目的区别和相似之处。虽然两者都是基于Vue框架开发的,但uni-app是跨多个平台的项目,而Vue H5项目只面向网页端,因此需要根据具体需求来进行修改和适配。 2. 理解uni-app小程序和Vue H5项目的架构和设计模式。首先,需要对uni-app小程序和Vue H5项目的各种组件、路由、状态管理、API使用等有比较深入的理解;其次,需要熟悉uni-app和Vue H5项目的开发规范和常见问题及解决方法。 3. 针对特定项目需求对uni-app小程序进行改造和重构,使其能够适应Vue H5项目的要求。需要注意的是,不同平台的UI适配、页面跳转、数据处理方式等会有所不同,需要进行相应的调整。 4. 组件的适配和重构:需要根据Vue H5项目的实际需求,对uni-app小程序中的组件进行适配和重构,以满足开发需求。 总而言之,将uni-app小程序转换为Vue H5项目需要有深入的前端开发经验和技能。需要具备良好的编程习惯、代码规范和团队合作能力,同时还需要对Vue和uni-app生态系统有较深入的理解,这样才能确保项目转换的成功和效果。 ### 回答2: Uni-app是近年来流行的一种开发框架,可以支持一次开发,多端发布。其中包括小程序、H5、APP、快应用等各种端,这样无需重复编写代码,并且可以满足不同平台的开发需求。因此,从uni-app小程序转Vue H5项目是一个很常见的需求。 首先需要了解uni-app小程序和Vue H5项目的区别和联系。Uni-app小程序是基于Vue语法封装的一种小程序开发框架。Vue H5项目是基于Vue框架开发的一种web应用的项目。它们都是基于Vue语法的,但是在项目的结构、用法、以及项目特性等方面有所不同。 以下是一些步骤可以用在uni-app小程序转Vue H5项目的过程中: 1. 将小程序中的小程序原有组件转换为H5支持的组件。例如,在Vue H5项目中,可以使用更多的HTML标签和CSS属性。 2. 根据不同的需求,需要对小程序的路由配置进行调整,以满足Vue H5项目的路由需求。 3. 根据项目需求进行逻辑层的代码调整。例如,H5需要针对不同的浏览器适配,需要进行不同的代码调整。 4. 将小程序的数据存储方式和H5的存储方式进行比对,进行适当的代码转换。 5. 在Vue H5项目中,可以使用许多Vue插件和库扩展项目的功能。因此需要根据项目需要选择相应的插件和库进行集成。 6. 在开发Vue H5项目过程中,需要注重H5项目页面的美观与交互性。因此,需要重新设计和开发H5项目所需要的页面,以更好地适配PC平台的浏览器。 总之,将uni-app小程序转Vue H5项目的过程中,需要进行许多的代码调整和UI设计。需要针对不同的项目需求进行适当的操作,在转换的过程中注意一些注意项,确保项目可以正常运行。通过这种方式,可以将uni-app小程序开发的代码实现在更多的平台实现。 ### 回答3: uni-app 是一个利用Vue.js技术构建的一体化开发框架,其允许开发者使用Vue.js语法编写一次代码,即可发布到多个端(微信小程序/App/安卓/H5等),实现一次开发,多端运营,大大节省了开发者的时间和成本。而vue h5则是在web端开发中,使用Vue框架,专门用于手机端适配的项目,在使用上类似于uni-app。 将uni-app小程序转换为vue h5项目,需要经过以下几个步骤: 1. 确认需要转换的项目内容:需要先明确需要转换的小程序页面或组件,以及对应的样式和功能。在转换过程中,需要开发者将原有小程序组件和API替换成vue组件和API,同时也需要对样式进行适配。 2. 安装vue-cli:在转化uni-app小程序之前,首先需要确认电脑已经安装好vue-cli。Vue CLI是官方提供的一个基于webpack的标准脚手架工具,开发者可以使用这个工具进行脚手架搭建和项目管理。 3. 创建vue h5项目:在安装vue-cli之后,可以通过命令行工具创建vue h5项目。通过创建项目之后,开发者可以在其中添加需要转换的uni-app小程序内容。 4. 转换小程序内容:对于需要转换的小程序页面和组件,需要开发者根据vue h5开发需要,将其中的小程序组件和API进行替换,同时将样式进行适配。在转化完成后,需要对代码进行调试和优化,确保项目能够正常运行。 在转换uni-app小程序为vue h5项目时,需要开发者具备一定的Vue.js框架开发经验,了解小程序和H5端的开发差异,进行差异化操作和代码调试。在转换项目时,开发者可以使用已有的组件库和API,降低开发成本,提高开发效率。