ueditor自定义上传按钮怎样在vue使用
这次给大家带来ueditor自定义上传按钮怎样在vue使用，ueditor自定义上传按钮在vue使用的注意事项有哪些，下面就是实战案例，一起来看一下。
由于上传地址问题，需要自定义上传按钮，效果如图
由于在页里面没有操作dom，所以想到了用vue的 自定义事件绑定$emit 、$on来把点击事件传递给ueditor。
首先是给ueditor添加自定义按钮：
1，打开ueditor.all.js,找到btnCmds，大概在27854行，如下图，在数组添加一个自定义的按钮名称，我写的是"love"
ueditor.all.js
2，给按钮添加事件
还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件，如下：
给按钮添加事件
我这里绑定的事件在vue里面已经定义好了 这里用$emit 绑定上去，然后在页面里面监听。bus是自定义的vue实例，因为整个项目是结合vue在使用。
3.给按钮添加图标icon
打开themes/default/css/ueditor.css.在文件下面添加即可，如下：
.edui-default .edui-toolbar .edui-for-love .edui-icon {
background: url(../images/video.png) no-repeat 50% 50%;
}
这里的.edui-for-love后面的love就是刚才定义按钮的名称，由于我所有按钮都重写样式了，所以全部采用覆盖了；
给按钮添加图标
4. 页面监听点击事件
这里的内容就是vue的基础了，可以自己看文档，简单如下
先给页面定义一个元素添加绑定事件
然后监听ueditor传递过来的点击事件showUpload
在methods里面定义showUpload事件(这里命名重复了 无所谓)
这样 ，自定义上传按钮已经完成了。
下面给大家介绍vue项目中使用ueditor的例子
以vue-cli生成的项目为例
1.static文件夹下先放入ueditor文件
2.index.html添加如下代码
<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.all.min.js"></script>
3.webpack.base.conf.js添加如下配置
externals: {
'UE': 'UE',
},
4.index.html中添加
<script type="text/javascript"> window.UEDITOR_HOME_URL = "/static/ueditor/";//配置路径设定为UEditor所放的位置 </script>
5.editor组件
<template>
<p>
<mt-button @click="geteditor()" type="danger">获取</mt-button>
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</p>
</template>
<script>
const UE = require('UE');// eslint-disable-line
export default {
name: 'editorView',
data: () => (
{
editor: null,
}
),
methods: {
geteditor() {
console.log(this.editor.getContent());
},
},
mounted() {
this.editor = UE.getEditor('editor');
},
destroyed() {
this.editor.destroy();
},
};
</script>
<style>
</style>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
vue+jquery+lodash滑动时顶部悬浮固定功能实现详解
Atas ialah kandungan terperinci ueditor自定义上传按钮怎样在vue使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Cara cepat menyediakan avatar tersuai dalam Netflix
Feb 19, 2024 pm 06:33 PM
Avatar di Netflix ialah representasi visual identiti penstriman anda. Pengguna boleh melangkaui avatar lalai untuk menyatakan keperibadian mereka. Teruskan membaca artikel ini untuk mengetahui cara menetapkan gambar profil tersuai dalam apl Netflix. Cara cepat menetapkan avatar tersuai dalam Netflix Dalam Netflix, tiada ciri terbina dalam untuk menetapkan gambar profil. Walau bagaimanapun, anda boleh melakukan ini dengan memasang sambungan Netflix pada penyemak imbas anda. Mula-mula, pasang gambar profil tersuai untuk sambungan Netflix pada penyemak imbas anda. Anda boleh membelinya di kedai Chrome. Selepas memasang sambungan, buka Netflix pada penyemak imbas anda dan log masuk ke akaun anda. Navigasi ke profil anda di penjuru kanan sebelah atas dan klik
Bagaimana untuk mencipta dan menyesuaikan gambar rajah Venn dalam Python?
Sep 14, 2023 pm 02:37 PM
Gambar rajah Venn ialah gambar rajah yang digunakan untuk mewakili hubungan antara set. Untuk mencipta rajah Venn kita akan menggunakan matplotlib. Matplotlib ialah perpustakaan visualisasi data yang biasa digunakan dalam Python untuk mencipta carta dan graf interaktif. Ia juga digunakan untuk mencipta imej dan carta interaktif. Matplotlib menyediakan banyak fungsi untuk menyesuaikan carta dan graf. Dalam tutorial ini, kami akan menggambarkan tiga contoh untuk menyesuaikan gambar rajah Venn. Terjemahan Bahasa Cina Contoh ialah: Contoh Ini adalah contoh mudah untuk mencipta persilangan dua gambar rajah Venn terlebih dahulu, kami mengimport perpustakaan yang diperlukan dan venn yang diimport; Kemudian kami mencipta set data sebagai set Python, selepas itu kami menggunakan fungsi "venn2()" untuk mencipta
Bagaimana untuk menyesuaikan imej latar belakang dalam Win11
Jun 30, 2023 pm 08:45 PM
Bagaimana untuk menyesuaikan imej latar belakang dalam Win11? Dalam sistem win11 yang baru dikeluarkan, terdapat banyak fungsi tersuai, tetapi ramai rakan tidak tahu cara menggunakan fungsi ini. Sesetengah rakan berpendapat bahawa imej latar belakang agak monoton dan ingin menyesuaikan imej latar belakang, tetapi tidak tahu bagaimana untuk menyesuaikan imej latar belakang Jika anda tidak tahu bagaimana untuk menentukan imej latar belakang, editor telah menyusun langkah-langkah untuk sesuaikan imej latar belakang dalam Win11 di bawah Jika anda berminat Jika ya, lihat di bawah! Langkah-langkah untuk menyesuaikan imej latar belakang dalam Win11: 1. Klik butang menang pada desktop dan klik Tetapan dalam menu pop timbul, seperti yang ditunjukkan dalam rajah. 2. Masukkan menu tetapan dan klik Pemperibadian, seperti yang ditunjukkan dalam rajah. 3. Masukkan Pemperibadian dan klik pada Latar Belakang, seperti yang ditunjukkan dalam gambar. 4. Masukkan tetapan latar belakang dan klik untuk menyemak imbas gambar
Cara mendayakan dan menyesuaikan silang pudar dalam Apple Music pada iPhone dengan iOS 17
Jun 28, 2023 pm 12:14 PM
Kemas kini iOS 17 untuk iPhone membawa beberapa perubahan besar kepada Apple Music. Ini termasuk bekerjasama dengan pengguna lain pada senarai main, memulakan main balik muzik daripada peranti berbeza apabila menggunakan CarPlay dan banyak lagi. Salah satu ciri baharu ini ialah keupayaan untuk menggunakan silang pudar dalam Apple Music. Ini akan membolehkan anda beralih dengan lancar antara trek, yang merupakan ciri hebat apabila mendengar berbilang lagu. Crossfading membantu meningkatkan keseluruhan pengalaman mendengar, memastikan anda tidak terkejut atau terkeluar daripada pengalaman apabila trek berubah. Jadi, jika anda ingin memanfaatkan sepenuhnya ciri baharu ini, berikut ialah cara menggunakannya pada iPhone anda. Cara Mendayakan dan Menyesuaikan Crossfade untuk Muzik Apple Anda Memerlukan Yang Terkini
Bagaimana untuk membuat penomboran tersuai dalam CakePHP?
Jun 04, 2023 am 08:32 AM
CakePHP ialah rangka kerja PHP yang berkuasa yang menyediakan pembangun dengan banyak alat dan ciri berguna. Salah satu daripadanya ialah penomboran, yang membantu kami membahagikan sejumlah besar data kepada beberapa halaman, menjadikan penyemakan imbas dan manipulasi lebih mudah. Secara lalai, CakePHP menyediakan beberapa kaedah penomboran asas, tetapi kadangkala anda mungkin perlu mencipta beberapa kaedah penomboran tersuai. Artikel ini akan menunjukkan kepada anda cara membuat penomboran tersuai dalam CakePHP. Langkah 1: Cipta kelas penomboran tersuai Pertama, kita perlu mencipta kelas penomboran tersuai. ini
Bagaimana untuk menyesuaikan tetapan kekunci pintasan dalam Eclipse
Jan 28, 2024 am 10:01 AM
Bagaimana untuk menyesuaikan tetapan kekunci pintasan dalam Eclipse? Sebagai pembangun, menguasai kekunci pintasan ialah salah satu kunci untuk meningkatkan kecekapan semasa pengekodan dalam Eclipse. Sebagai persekitaran pembangunan bersepadu yang berkuasa, Eclipse bukan sahaja menyediakan banyak kekunci pintasan lalai, tetapi juga membenarkan pengguna untuk menyesuaikannya mengikut keutamaan mereka sendiri. Artikel ini akan memperkenalkan cara untuk menyesuaikan tetapan kekunci pintasan dalam Eclipse dan memberikan contoh kod khusus. Buka Eclipse First, buka Eclipse dan masukkan
Bagaimana untuk melaksanakan perisian tengah tersuai dalam CodeIgniter
Jul 29, 2023 am 10:53 AM
Cara melaksanakan middleware tersuai dalam CodeIgniter Pengenalan: Dalam pembangunan web moden, middleware memainkan peranan penting dalam aplikasi. Ia boleh digunakan untuk melaksanakan beberapa logik pemprosesan yang dikongsi sebelum atau selepas permintaan sampai kepada pengawal. CodeIgniter, sebagai rangka kerja PHP yang popular, juga menyokong penggunaan middleware. Artikel ini akan memperkenalkan cara untuk melaksanakan perisian tengah tersuai dalam CodeIgniter dan memberikan contoh kod mudah. Gambaran keseluruhan Middleware: Middleware ialah sejenis permintaan
Proses pengendalian susun atur skrin tersuai edius
Mar 27, 2024 pm 06:50 PM
1. Gambar di bawah ialah susun atur skrin lalai bagi edius Tataletak tetingkap EDIUS lalai adalah susun atur mendatar Oleh itu, dalam persekitaran monitor tunggal, banyak tetingkap bertindih dan tetingkap pratonton berada dalam mod tetingkap tunggal. 2. Anda boleh mendayakan [Dual Window Mode] melalui bar menu [View] untuk menjadikan tetingkap pratonton memaparkan tetingkap main balik dan tetingkap rakaman pada masa yang sama. 3. Anda boleh memulihkan reka letak skrin lalai melalui [Lihat bar menu>Reka Letak Tetingkap>Umum]. Selain itu, anda juga boleh menyesuaikan reka letak yang sesuai dengan anda dan menyimpannya sebagai susun atur skrin yang biasa digunakan: seret tetingkap ke susun atur yang sesuai dengan anda, kemudian klik [Lihat > Reka Letak Tetingkap > Simpan Reka Letak Semasa > Baharu], dan dalam pop timbul [Save Current Layout] Layout] masukkan nama susun atur dalam tetingkap kecil dan klik OK
