文档章节

element-vue使用富文本编辑器【前端】

一代码农码一代
 一代码农码一代
发布于 09/23 14:41
字数 396
阅读 33
收藏 2

一、前言

1.富文本编辑器选择的为vue-quill-editor

官方地址:https://quilljs.com/docs/quickstart/

2.安装

cnpm install vue-quill-editor
cnpm install quill

3.在对应的页面引入,在components中新建Quilleditor.vue

里面代码如下

<!-- 组件代码如下 -->   
<template>              
    <div>
        <script id="editor" type="text/plain"></script>
    </div>
</template>
<script>
export default {        
    name: 'Quilleditor',
    data () {
        return {        
            editor: null
        }
    },
    props: {            
        defaultMsg: {   
            type: String
        },
        config: {       
            type: Object
        }
    },
    mounted() {
        const _this = this;
        this.editor = UE.getEditor('editor', this.config); // 初始化UE
        this.editor.addListener("ready", function () {
            _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
        });
    },
    methods: {
        getUEContent() { // 获取内容方法
            return this.editor.getContent()
        }
    },
    destroyed() {
        this.editor.destroy();
    }
}
</script

二、页面中引入

1.views中创建模板auditionadd.vue

代码如下:

<template>
    <div>
        <el-row class="warp">
            <el-col :span="24" class="warp-main">
                <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="120px">
                    <el-form-item label="标题" prop="a_title">
                        <el-input v-model="infoForm.a_title"></el-input>
                    </el-form-item>
                    <el-form-item label="来源" prop="a_source">
                        <el-input v-model="infoForm.a_source"></el-input>
                    </el-form-item>
                    <el-form-item label="内容">
                        <div class="edit_container">
                            <quill-editor v-model="infoForm.a_content" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)">
                            </quill-editor>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
    data() {
        return {
            infoForm: {
                a_title: '',
                a_source: '',
                a_content:'',
                editorOption: {}
            },
            //表单验证
            rules: {
                a_title: [
                    {required: true, message: '请输入标题', trigger: 'blur'}
                ],
                a_content: [
                    {required: true, message: '请输入详细内容', trigger: 'blur'}
                ]
            },
        }
    },      
    computed: { 
        editor() {  
            return this.$refs.myQuillEditor.quill
        }           
    },              
    mounted() {         
        //初始化    
    },              
    methods: {          
        onEditorReady(editor) {
        },                  
        onSubmit() {    
            this.$refs.infoForm.validate((valid) => {
                if(valid) {
                    this.$post('m/add/about/us',this.infoForm).then(res => {
                        if(res.errCode == 200) {
                            this.$message({
                                message: res.errMsg,
                                type: 'success'
                            });
                            this.$router.push('/aboutus/aboutlist');
                        } else {
                            this.$message({
                                message: res.errMsg,
                                type:'error'
                            });
                        }
                    });
                }
            });
        }
    },
    components: {
        quillEditor
    }
}
</script>

2.效果图

© 著作权归作者所有

一代码农码一代
粉丝 3
博文 40
码字总数 19311
作品 0
东城
私信 提问
Vue2如何配置webpack相关设置

一、Vue如何配置webpack相关 使用方式步骤如下: 1.根目录创建vue.config.js文件 2.修改对应的配置,重新运行项目 更多配置说明参考: https://cli.vuejs.org/zh/guide/webpack.html#审查项目...

tianma3798
02/21
40
0
vue-element-admin v3.8.0 发布,后台集成方案

vue-element-admin v3.8.0 已发布,从该版本起开始使用 和 ,依赖的第三方库也已升级至最新版本。 如果想继续使用 webpack3 ,请使用 webpack3 分支。 vue-element-admin 是基于 vue+elemen...

王练
2018/08/16
6.1K
5
Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap

一、Vue中在使用Vue CLI开发中默认没法使用UEditor 其中UEditor中也存在不少错误,再引用过程中。 但是UEditor相对还是比较好用的一个富文本编辑器。 vue-ueditor-wrap说明 Vue + UEditor + ...

tianma3798
02/18
1K
0
vue-element-admin v3.6.3 发布,后台集成方案

vue-element-admin v3.6.3 已发布,更新内容: 优化 [Tinymce]:使其支持在 dialog 中上传图片 && 增加 SetContent listener 31b7fa6 7cacd5a 优化 [i18n]:TagsView 右键 contextmenu 支持国...

王练
2018/03/14
4.6K
4
Vue +Element UI后台管理模板搭建示例

一、蓝色主题 Element ui 后台管理 Demo https://github.com/taylorchen709/vueAdmin https://taylorchen709.github.io/vueAdmin/#/user Element ui 文档 http://element.eleme.io/#/zh-CN/......

tianma3798
02/16
7K
2

没有更多内容

加载失败,请刷新页面

加载更多

前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
5
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0
栈-链式(c/c++实现)

上次说“栈是在线性表演变而来的,线性表很自由,想往哪里插数据就往哪里插数据,想删哪数据就删哪数据...。但给线性表一些限制呢,就没那么自由了,把线性表的三边封起来就变成了栈,栈只能...

白客C
今天
43
0
Mybatis Plus service

/** * @author beth * @data 2019-10-20 23:34 */@RunWith(SpringRunner.class)@SpringBootTestpublic class ServiceTest { @Autowired private IUserInfoService iUserInfoS......

一个yuanbeth
今天
5
0
php7-internal 7 zval的操作

## 7.7 zval的操作 扩展中经常会用到各种类型的zval,PHP提供了很多宏用于不同类型zval的操作,尽管我们也可以自己操作zval,但这并不是一个好习惯,因为zval有很多其它用途的标识,如果自己...

冻结not
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部