VUE+Quill编辑器实现添加新闻功能

一个很典型的添加新闻功能，肯定离不了网页编辑器，然后有很多种选择，百度了大概说是quill和vue的兼容性比较好，网上也有很多在用，就跟风选择了！

这是最终效果

实现的过程肯定是有些曲折的，所以给各位指条康庄大道

直接上全部代码：

<template><div id="app"><div class="container"><el-form label="添加新闻" :model="form" prop="form" class="demo-form-inline" :inline="true" :rules="rules" ref="form"><el-form-item prop="title" label="标题"label-width="60px"><el-input style="width: 600px;" v-model="form.title"  autocomplete="off" placeholder="请输入新闻标题"></el-input></el-form-item><br><el-form-item prop="source" label="来源" label-width="60px"><el-input style="width:600px;" v-model="form.source" autocomplete="off" placeholder="请输入来源和作者等相关信息"></el-input></el-form-item><br><el-form-item prop="newtype" label="类型"label-width="60px"><el-select v-model="form.newtype" placeholder="请选择"><el-optionv-for="item in options":key="item":label="item":value="item"></el-option></el-select></el-form-item><el-form-item prop="showinindex" label="是否首页展示"label-width="140px"><el-radio-group v-model="form.showinindex"><el-radio :label="1">是</el-radio><el-radio :label="0">否</el-radio></el-radio-group></el-form-item><br><el-form-item  prop="img" label="封面"label-width="60px"><el-uploadclass="avatar-uploader"action="onon":show-file-list="false":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item><br><el-form-item  prop="summary" label="概要"label-width="60px"><el-input style="width: 600px;"  type="textarea":rows="3"placeholder="请输入内容" maxlength="90"show-word-limit v-model="form.summary" autocomplete="off"></el-input></el-form-item><br><el-form-item prop="content" label="内容"label-width="60px"><el-card style="height: 410px;"><quill-editor v-model="form.content" ref="myQuillEditor" style="height: 300px;" :options="editorOption"><!-- 自定义toolar --><div id="toolbar" slot="toolbar"><!-- Add a bold button --><button class="ql-bold" title="加粗">Bold</button><button class="ql-italic" title="斜体">Italic</button><button class="ql-underline" title="下划线">underline</button><button class="ql-strike" title="删除线">strike</button><button class="ql-blockquote" title="引用"></button><button class="ql-code-block" title="代码"></button><button class="ql-header" value="1" title="标题1"></button><button class="ql-header" value="2" title="标题2"></button><!--Add list --><button class="ql-list" value="ordered" title="有序列表"></button><button class="ql-list" value="bullet" title="无序列表"></button><!-- Add font size dropdown --><select class="ql-header" title="段落格式"><option selected>段落</option><option value="1">标题1</option><option value="2">标题2</option><option value="3">标题3</option><option value="4">标题4</option><option value="5">标题5</option><option value="6">标题6</option></select><select class="ql-size" title="字体大小"><option value="12px">12px</option><option value="14px">14px</option><option value="16px" selected>16px</option><option value="18px">18px</option><option value="20px">20px</option></select><select class="ql-font" title="字体"><option value="SimSun">宋体</option><option value="SimHei">黑体</option><option value="Microsoft-YaHei">微软雅黑</option><option value="KaiTi">楷体</option><option value="FangSong">仿宋</option><option value="Arial">Arial</option></select><!-- Add subscript and superscript buttons --><select class="ql-color" value="color" title="字体颜色"></select><select class="ql-background" value="background" title="背景颜色"></select><select class="ql-align" value="align" title="对齐"></select><button class="ql-image"  title="图片"></button><button class="ql-clean" title="还原"></button><!-- You can also add your own --><input class="open-file" type="file" name="file" id="file"accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon"style="display: none;" @change="imgChange($event)" multiple="false"/></div></quill-editor></el-card></el-form-item></el-form><div style="text-align:center;" ><el-button @click="cancel('form')">取 消</el-button><el-button type="primary" @click="submit('form')">提 交</el-button></div></div></div></template><script>import {Quill,quillEditor} from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import qs from "qs";//引入font.cssimport './font.css'// 自定义字体大小let Size = Quill.import('attributors/style/size')Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']Quill.register(Size, true)// 自定义字体类型var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif','宋体', '黑体']var Font = Quill.import('formats/font')Font.whitelist = fontsQuill.register(Font, true)export default {name: 'FuncFormsEdit',components: {quillEditor,},data() {return {imageUrl: '',options: [],rules: {title: [{required: true,message: "请输入标题名称",trigger: "blur"}],/*newtype:[{required: true,message: "请选择类型",trigger: "blur"}],*/summary:[{required: true,message: "请输入概要",trigger: "blur"}]},form:{title: "",source:"",newtype:"",content:"",summary:"",showinindex:0,img:''},content: null,editorOption: {placeholder: "请输入",theme: "snow", // or 'bubble'modules: {toolbar: {container: '#toolbar',handlers: {'image': function (value) {let that = this;if (value) {that.container.querySelector('.open-file').click();} else {this.quill.format('image', false);}}},}}}}},created(){this.axios.post("./ttp/server/app/getNewsTypeList").then(res => {this.options = res.data.data;});},methods: {beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('只能上传图片文件');}if (!isLt2M) {this.$message.error('图片大小不能超过 2MB!');}var data=new FormData;data.append("file",file);let that =this;that.axios.post("./ttp/server/app/upload",data).then(function(res){// 如果上传成功if (res.data.status) {let imgName = res.data.data.name;setTimeout(function() {that.imageUrl = require('D:/upload/img/' + imgName);that.form.img = imgName;},2000);} else {// 提示信息，需引入Messagethis.$alter('图片引入失败');}})},imgChange(e){var fileInput=e.target;if(fileInput.files.length==0){return}//this.editor.focus();if(fileInput.files[0].size>1024*1024*100){this.$alert('图片不能大于600KB', '图片尺寸过大', {confirmButtonText: '确定',type: 'warning',})}var data=new FormData;data.append("file",fileInput.files[0]);let that =this;that.axios.post("./ttp/server/app/upload",data).then(function(res){// 如果上传成功if (res.data.status) {let imgName = res.data.data;setTimeout(function(){let lujing = require('D:/upload/img/'+imgName);// 获取富文本组件实例let quill = that.$refs.myQuillEditor.quill;// 获取光标所在位置let length = quill.getSelection().index;quill.insertEmbed(length, 'image', lujing);        // 调整光标到最后quill.setSelection(length + 1);},2000);} else {// 提示信息，需引入Messagethis.$alter('图片插入失败');}})},cancel(formName) {this.$parent.$parent.newsAddVisible = false;this.$refs[formName].resetFields();this.$parent.$parent.silent();},submit(formName) {this.$refs[formName].validate(valid => {if (valid) {this.axios.post('./ttp/server/app/addNews', qs.stringify(this.form)).then(res => {if (res.data.status) {this.$notify.success({title: "成功",message: res.data.message});this.cancel('form');}else {this.$notify.error({title: "错误",message: res.data.message});}}).catch(function(err) {console.log(err);});}});},}}
</script><style scoped>.container{height: 100%;margin: 0 auto;padding: 20px;background-color: #f9fafc;}.ivu-upload {display: none;}.avatar-uploader {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader:hover {border-color: #409EFF;}.el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}
</style>

参考别人的例子，很容易就把基本的编辑功能都实现，主要曲折点就是图片上传功能，具体请参考我写的：

Quill编辑器实现图片上传功能

VUE+Quill编辑器实现添加新闻功能相关推荐

EXTJS中整合tinymce的富文本编辑器，添加上传图片功能
提供部分代码.Ext.create('Ext.window.Window', {id: 'wind',title: 'CRUD窗口',modal: true,height: 800,width: 10 ...
Quill编辑器实现图片上传功能
我们引入Quill时是可以直接插入图片了,但是是Quill将图片转化成了base64格式,我们如果存数据库的话,肯定不是长久之计,而真正符合我们要求的便是图片上传之后返回图片路径,再插入图片 1.点击 ...
SupeSite后台添加新闻增加【预览】功能
SupeSite后台添加新闻增加[预览]功能实现目的:为了添加新闻时候更方便! 实现原因:添加新闻时候可能有些样式会出现错误,生成静态页之后再去看的时候会比较浪费时间. 实现步骤: 1.在后台找到a ...
vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计写在前面 vue 富文本 quill / vue-quill-editor 如何使用图片上传到服务器实时字数统计图片编 ...
从0开始在vue项目中使用quill编辑器
快速.便捷的创建在vue cli中使用quill. 参考资料: quill中文文档在线示例: 点我预览 github仓库地址:https://github.com/font-size/vue-qui ...
添加数据功能java,SpringBoot+Vue实现数据添加功能
一.添加代码生成器用来自动为数据库映射类建立:mapper.service.controller package com.hanmh.utils; import com.baomidou.mybat ...
Vue之通过连接数据库的接口获取列表实现添加删除功能
把最近学习vue的一些知识点记录下来,今天记录一下Vue通过vue-resource连接数据库接口渲染列表和添加删除功能首先我们得引入vue的版本文件和vue-resource.js,注意:vue- ...
vue 富文本样式添加不上_vue结合ueditor富文本编辑器（换肤分离）
需求 (PC端用它互不直曾经明以机会式近分扯.多接相常)做一个可以使用图片上传.视频上传.文件上传功能的富文本组件,简单的文本编辑发布功能,采用socke览页些求时是过解些这确如目前例总站回广随能4果 ...
uchome工作笔记--添加微新闻功能
微新闻功能介绍: 微新闻即短小的新闻新闻,像新鲜事,微博一样. 功能有:用户通过即时窗口发布,其他用户可以在第一条微新闻下的直接进行回复评论. 在UCHOME中添加功能具体方法如下: 1.建立发布微新 ...

VUE+Quill编辑器实现添加新闻功能

VUE+Quill编辑器实现添加新闻功能相关推荐

最新文章

热门文章