Maison interface Web js tutoriel TinyMCE 新增本地图片上传功能_jquery

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

May 16, 2016 pm 06:17 PM
tinymce 图片上传

这样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
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser tinymce dans le projet vue3 Comment utiliser tinymce dans le projet vue3 May 19, 2023 pm 08:40 PM

tinymce est un plug-in d'éditeur de texte riche entièrement fonctionnel, mais l'introduction de tinymce dans vue n'est pas aussi fluide que les autres plug-ins de texte riche de Vue. tinymce lui-même ne convient pas à Vue, et @tinymce/tinymce-vue doit être introduit, et Il s'agit d'un plug-in de texte riche étranger et n'a pas passé la version chinoise. Vous devez télécharger le package de traduction depuis son site officiel (vous devrez peut-être contourner le pare-feu). 1. Installez les dépendances associées npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. Téléchargez le package chinois 3. Introduisez le skin et le package chinois Créez un nouveau dossier tinymce dans le dossier public du projet et téléchargez le.

L'applet WeChat implémente la fonction de téléchargement d'images L'applet WeChat implémente la fonction de téléchargement d'images Nov 21, 2023 am 09:08 AM

L'applet WeChat implémente la fonction de téléchargement d'images Avec le développement de l'Internet mobile, l'applet WeChat est devenue un élément indispensable dans la vie des gens. Les mini-programmes WeChat fournissent non seulement une multitude de scénarios d'application, mais prennent également en charge les fonctions définies par les développeurs, notamment les fonctions de téléchargement d'images. Cet article présentera comment implémenter la fonction de téléchargement d'images dans l'applet WeChat et fournira des exemples de code spécifiques. 1. Travaux préparatoires Avant de commencer à écrire du code, nous devons télécharger et installer les outils de développement WeChat et nous inscrire en tant que développeur WeChat. En même temps, vous devez également comprendre WeChat

Étapes pour implémenter le téléchargement et l'affichage d'images à l'aide du framework CakePHP Étapes pour implémenter le téléchargement et l'affichage d'images à l'aide du framework CakePHP Jul 29, 2023 pm 04:21 PM

Étapes pour implémenter le téléchargement et l'affichage d'images à l'aide du framework CakePHP Introduction : Dans les applications Web modernes, le téléchargement et l'affichage d'images sont des exigences fonctionnelles courantes. Le framework CakePHP fournit aux développeurs des fonctions puissantes et des outils pratiques, rendant simple et efficace le téléchargement et l'affichage d'images. Cet article vous expliquera comment utiliser le framework CakePHP pour télécharger et afficher des images. Étape 1 : Créer un formulaire de téléchargement de fichier. Tout d'abord, nous devons créer un formulaire dans le fichier d'affichage pour que les utilisateurs puissent télécharger des images. Ce qui suit est un exemple de

Comment gérer le téléchargement et la compression d'images dans le développement de la technologie Vue Comment gérer le téléchargement et la compression d'images dans le développement de la technologie Vue Oct 08, 2023 am 10:58 AM

Comment gérer le téléchargement et la compression d'images dans le développement de la technologie Vue Dans les applications Web modernes, le téléchargement d'images est une exigence très courante. Cependant, pour des raisons de transmission réseau et de stockage, le téléchargement direct d'images originales haute résolution peut entraîner des vitesses de téléchargement lentes et un gaspillage important d'espace de stockage. Par conséquent, le téléchargement et la compression des images sont très importants. Dans le développement de la technologie Vue, nous pouvons utiliser des solutions prêtes à l'emploi pour gérer le téléchargement et la compression des images. Ce qui suit présentera comment utiliser vue-upload-comone

Comment utiliser PHP et Vue pour implémenter la fonction de téléchargement d'images Comment utiliser PHP et Vue pour implémenter la fonction de téléchargement d'images Sep 25, 2023 pm 03:17 PM

Comment utiliser PHP et Vue pour implémenter la fonction de téléchargement d'images. Dans le développement Web moderne, la fonction de téléchargement d'images est une exigence très courante. Cet article présentera en détail comment utiliser PHP et Vue pour implémenter la fonction de téléchargement d'images et fournira des exemples de code spécifiques. 1. Partie front-end (Vue) Tout d'abord, vous devez créer un formulaire pour télécharger des images sur le front-end. Le code spécifique est le suivant :<template><div><inputtype="fil

Comment utiliser ThinkPHP6 pour télécharger des images Comment utiliser ThinkPHP6 pour télécharger des images Jun 20, 2023 pm 09:25 PM

Avec le développement d’Internet, le téléchargement d’images est devenu une fonctionnalité essentielle dans le développement de sites Web et d’applications. Dans le domaine de PHP, ThinkPHP6 est devenu un framework de développement très populaire. Dans cet article, nous présenterons comment utiliser ThinkPHP6 pour implémenter le téléchargement d'images. 1. Créer un projet et un contrôleur Tout d'abord, nous devons créer un nouveau projet ThinkPHP6. Vous pouvez utiliser Composer pour l'installer ou télécharger la dernière version sur le site officiel. Une fois l'installation terminée, entrez dans la console

Comment implémenter le téléchargement et le recadrage d'images dans le développement de la technologie Vue Comment implémenter le téléchargement et le recadrage d'images dans le développement de la technologie Vue Oct 10, 2023 pm 12:46 PM

Comment implémenter le téléchargement et le recadrage d'images dans le développement de la technologie Vue nécessite des exemples de code spécifiques dans le développement Web moderne, le téléchargement et le recadrage d'images sont l'une des exigences courantes. En tant que framework frontal populaire, Vue.js fournit une multitude d'outils et de plug-ins pour nous aider à réaliser ces fonctions. Cet article présentera comment implémenter le téléchargement et le recadrage d'images dans le développement de la technologie Vue, et fournira des exemples de code spécifiques. La mise en œuvre du téléchargement d'images peut être divisée en deux étapes : la sélection des images et le téléchargement des images. Dans Vue, vous pouvez utiliser des plugins tiers pour simplifier cela

Comment utiliser PHP pour implémenter un système simple de téléchargement et d'affichage d'images en ligne Comment utiliser PHP pour implémenter un système simple de téléchargement et d'affichage d'images en ligne Sep 25, 2023 am 09:21 AM

Comment utiliser PHP pour implémenter un système simple de téléchargement et d'affichage d'images en ligne. Le système de téléchargement et d'affichage d'images est l'une des fonctions couramment utilisées des sites Web modernes. Cette fonction peut être rapidement implémentée à l'aide de PHP pendant le processus de développement. Cet article explique comment utiliser PHP pour écrire un système simple de téléchargement et d'affichage d'images en ligne, et fournit des exemples de code spécifiques. 1. Créer une base de données et des tables Tout d'abord, nous devons créer une base de données et des tables pour stocker les informations sur les images téléchargées. Utilisez l'instruction SQL suivante pour créer une table nommée "images" et définir

See all articles