Rumah hujung hadapan web tutorial js TinyMCE 新增本地图片上传功能_jquery

TinyMCE 新增本地图片上传功能_jquery

May 16, 2016 pm 06:17 PM
tinymce Muat naik imej

这样TinyMCE 就可以正常显示图片了。其实该功能属于普通HTML富文本控件基本功能了。现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片。
实现思路:
使用Ajax 进行图片上传,此上传方式可以更友好的实现TinyMCE 的图片上传扩展,
具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片。将Ajax上传图片集成到 TinyMCE 中,
主要是修改TinyMCE 目录下的 tinymce\jscripts\tiny_mce\plugins 的 advimage 插件。
了解TinyMCE的人应该知道 TinyMCE 类似 FireFox。 开发者是可以为其编写适合自己需求的插件。
所以只要稍稍修改 advimage 这个插件即可。我们为 advimage
目录下的image.htm 新增 jquery 图片异步提交代码:

复制代码 代码如下:



当然了,flUpload 这个input type="file" 需要被form html标签包住同时为该form设置好

method="post" enctype="multipart/form-data" action=url 属性。
程序截图如下:
TinyMCE 新增本地图片上传功能_jquery
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan tinymce dalam projek vue3 Cara menggunakan tinymce dalam projek vue3 May 19, 2023 pm 08:40 PM

tinymce ialah pemalam editor teks kaya yang berfungsi sepenuhnya, tetapi memperkenalkan tinymce ke dalam vue tidak selancar seperti pemalam teks kaya Vue yang lain tidak sesuai untuk Vue dan @tinymce/tinymce-vue perlu diperkenalkan. dan Ia adalah pemalam teks kaya asing dan belum melepasi versi Cina Anda perlu memuat turun pakej terjemahan dari tapak web rasminya (anda mungkin perlu memintas tembok api). 1. Pasang kebergantungan yang berkaitan npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2 Muat turun pakej Cina 3. Perkenalkan pakej kulit dan Cina Buat folder tinymce baharu dalam folder awam projek dan muat turun

Applet WeChat melaksanakan fungsi muat naik imej Applet WeChat melaksanakan fungsi muat naik imej Nov 21, 2023 am 09:08 AM

Applet WeChat melaksanakan fungsi muat naik gambar Dengan perkembangan Internet mudah alih, applet WeChat telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Program mini WeChat bukan sahaja menyediakan pelbagai senario aplikasi, tetapi juga menyokong fungsi yang ditentukan oleh pembangun, termasuk fungsi muat naik imej. Artikel ini akan memperkenalkan cara untuk melaksanakan fungsi muat naik imej dalam applet WeChat dan memberikan contoh kod khusus. 1. Kerja persediaan Sebelum mula menulis kod, kita perlu memuat turun dan memasang alat pembangun WeChat dan mendaftar sebagai pembangun WeChat. Pada masa yang sama, anda juga perlu memahami WeChat

Langkah-langkah untuk melaksanakan muat naik dan paparan imej menggunakan rangka kerja CakePHP Langkah-langkah untuk melaksanakan muat naik dan paparan imej menggunakan rangka kerja CakePHP Jul 29, 2023 pm 04:21 PM

Langkah-langkah untuk melaksanakan muat naik dan paparan imej menggunakan rangka kerja CakePHP Pengenalan: Dalam aplikasi web moden, muat naik dan paparan imej adalah keperluan fungsian biasa. Rangka kerja CakePHP menyediakan pembangun dengan fungsi yang berkuasa dan alatan yang mudah, menjadikannya mudah dan cekap untuk memuat naik dan memaparkan imej. Artikel ini akan memperkenalkan anda kepada cara menggunakan rangka kerja CakePHP untuk memuat naik dan memaparkan imej. Langkah 1: Buat borang muat naik fail Pertama, kita perlu mencipta borang dalam fail paparan untuk pengguna memuat naik imej. Berikut adalah contoh

Cara mengendalikan muat naik imej dan pemampatan dalam pembangunan teknologi Vue Cara mengendalikan muat naik imej dan pemampatan dalam pembangunan teknologi Vue Oct 08, 2023 am 10:58 AM

Cara mengendalikan muat naik imej dan pemampatan dalam pembangunan teknologi Vue Dalam aplikasi web moden, muat naik imej adalah keperluan yang sangat biasa. Walau bagaimanapun, disebabkan penghantaran rangkaian dan sebab storan, memuat naik terus imej asal resolusi tinggi boleh mengakibatkan kelajuan muat naik yang perlahan dan pembaziran ruang storan yang besar. Oleh itu, memuat naik dan memampatkan imej adalah sangat penting. Dalam pembangunan teknologi Vue, kami boleh menggunakan beberapa penyelesaian sedia untuk mengendalikan muat naik dan pemampatan imej. Berikut akan memperkenalkan cara menggunakan vue-upload-comone

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi muat naik imej Cara menggunakan PHP dan Vue untuk melaksanakan fungsi muat naik imej Sep 25, 2023 pm 03:17 PM

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi muat naik imej Dalam pembangunan web moden, fungsi muat naik imej adalah keperluan yang sangat biasa. Artikel ini akan memperkenalkan secara terperinci cara menggunakan PHP dan Vue untuk melaksanakan fungsi muat naik imej, dan memberikan contoh kod khusus. 1. Bahagian hadapan (Vue) Pertama, anda perlu mencipta borang untuk memuat naik imej pada bahagian hadapan. Kod khusus adalah seperti berikut:<template><div><inputtype="fil

Cara menggunakan ThinkPHP6 untuk memuat naik imej Cara menggunakan ThinkPHP6 untuk memuat naik imej Jun 20, 2023 pm 09:25 PM

Dengan perkembangan Internet, muat naik imej telah menjadi ciri penting dalam pembangunan laman web dan aplikasi. Dalam bidang PHP, ThinkPHP6 telah menjadi rangka kerja pembangunan yang sangat popular. Dalam artikel ini, kami akan memperkenalkan cara menggunakan ThinkPHP6 untuk melaksanakan muat naik imej. 1. Buat projek dan pengawal Pertama, kita perlu mencipta projek ThinkPHP6 baharu. Anda boleh menggunakan Komposer untuk memasangnya, atau anda boleh memuat turun versi terkini daripada tapak web rasmi. Selepas pemasangan selesai, masukkan dalam konsol

Bagaimana untuk melaksanakan muat naik dan pemangkasan imej dalam pembangunan teknologi Vue Bagaimana untuk melaksanakan muat naik dan pemangkasan imej dalam pembangunan teknologi Vue Oct 10, 2023 pm 12:46 PM

Cara melaksanakan muat naik dan pemangkasan imej dalam pembangunan teknologi Vue memerlukan contoh kod khusus Dalam pembangunan web moden, muat naik imej dan pemangkasan imej adalah salah satu keperluan biasa. Sebagai rangka kerja bahagian hadapan yang popular, Vue.js menyediakan pelbagai alatan dan pemalam untuk membantu kami mencapai fungsi ini. Artikel ini akan memperkenalkan cara untuk melaksanakan muat naik dan pemangkasan imej dalam pembangunan teknologi Vue, dan menyediakan contoh kod khusus. Pelaksanaan muat naik imej boleh dibahagikan kepada dua langkah: memilih imej dan memuat naik imej. Dalam Vue, anda boleh menggunakan pemalam pihak ketiga untuk memudahkan perkara ini

Cara menggunakan PHP untuk melaksanakan sistem muat naik dan paparan imej dalam talian yang mudah Cara menggunakan PHP untuk melaksanakan sistem muat naik dan paparan imej dalam talian yang mudah Sep 25, 2023 am 09:21 AM

Cara menggunakan PHP untuk melaksanakan sistem muat naik dan paparan imej dalam talian yang mudah adalah salah satu fungsi yang biasa digunakan oleh laman web moden Fungsi ini boleh dilaksanakan dengan cepat menggunakan PHP semasa proses pembangunan. Artikel ini akan memperkenalkan cara menggunakan PHP untuk menulis sistem muat naik dan paparan imej dalam talian yang mudah, dan menyediakan contoh kod khusus. 1. Buat pangkalan data dan jadual Pertama, kita perlu mencipta pangkalan data dan jadual untuk menyimpan maklumat imej yang dimuat naik. Gunakan pernyataan SQL berikut untuk mencipta jadual bernama "imej" dan tetapkan

See all articles