目标：富文本编辑器 vue-quill-editor 的基本使用：vue-quill-editor - npm

一、渲染富文本编辑器

运行如下的命令，在项目中安装富文本编辑器：

npm i vue-quill-editor@3.0.6 -S

在项目入口文件 main.js 中导入并全局注册富文本编辑器：

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 全局注册富文本编辑器
Vue.use(VueQuillEditor)

在 ArtList.vue 组件的模板结构中，添加富文本编辑器的 DOM 结构：

<el-form-item label="文章内容"><!-- 使用 v-model 进行双向的数据绑定 --><quill-editor v-model="pubForm.content"></quill-editor>
</el-form-item>

在 ArtList.vue 组件的 data 中，定义富文本编辑器对应的数据项：

data() {return {// 表单的数据对象pubForm: {// 文章的内容content: ''},}
}

美化富文本编辑器的样式：

// 设置富文本编辑器的默认最小高度
/deep/ .ql-editor {min-height: 300px;
}

二、修改富文本编辑器的高度

经过上面设置以后，我们的富文本编辑器长这样

很明显高度不够，我们需要设置高度来达到我们的需求：

具体步骤如下：

1.在node_modules这个文件夹下搜索 quill 文件夹

2.在 quill 文件里面找到 dist

3.找到quill.core.css,设置min-height,如图：

设置成功以后长这样

渲染富文本编辑器并设置富文本编辑器的高度相关推荐

html中文本属性的设置,css 文本属性direction的功能详解说明
摘要: 下文讲述css属性direction的功能说明,如下所示: css direction的功能说明 css direction的功能: 设置html元素中文本流的显示方向 css directi ...
html代码编辑器sp,在线HTML编译，文本关键字高亮显示，富文本编辑实现大概思路...
????最近被安排做了一个HTML在线编译功能,也利用这个机会对HTML在线编译,关键字高亮,富文本编辑器等的实现做了一些比较表面的研究,做简要记录,以便再次遇到作为参考. ????在线HTML编译 ...
小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
N个富文本编辑器/基于Web的HTML编辑器
转自:http://www.cnblogs.com/lingyuan/archive/2010/11/15/1877447.html 基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或 ...
iOS-[NSAttributedString]设置富文本和计算富文本高度
计算富文本的高度在app中我们最常见的就是把一段文字要设置行间距.所占宽度.字体大小.并且这些都是我们来计算富文本高度和设置富文本样式必须的元素.当然可能还有首行缩进等元素.我们这里就不考虑了. 设 ...
在线富文本编辑器-基于Web的HTML编辑器大全（一）
基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或是一个富文本的编辑器,是我们在开发WEB应用和内容管理系统时接收用户输入时必需要考虑的问题.下面是网上牛人收集的一些开源的WEB在线的 ...
js获取富文本内容长度_js富文本实现
转载来源:https://www.cnblogs.com/xiaohuochai/p/5884206.html 一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档.实际上差不多就是这样 ...
Qt开发技术：Qt富文本（一）富文本介绍、文档结构
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/ ...
在Word指定位置插入富文本域值（html文本）
遇到此问题,首先想到的就是各种百度.结果度娘了一会并没有发现有用的有效的解决方法,哎,看来还得靠自己啊. 首先整理了下手头上的资源,一是HtmlAgilityPack,专门解析Html文本用的:二是我 ...

渲染富文本编辑器并设置富文本编辑器的高度

一、渲染富文本编辑器

二、修改富文本编辑器的高度

渲染富文本编辑器并设置富文本编辑器的高度相关推荐

最新文章

热门文章