Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de la façon de créer plusieurs éditeurs dans vue

小云云
Libérer: 2018-05-15 15:36:47
original
1839 Les gens l'ont consulté

Il y a quelque temps, le projet Vue.js de l'entreprise devait utiliser l'éditeur de texte enrichi UEditor. J'ai cherché sur Baidu et je n'ai trouvé aucune instruction détaillée, j'ai donc décidé de l'essayer moi-même. Après une journée bien remplie, je l'ai finalement obtenu. fait. Cet article vous présente principalement les informations pertinentes sur la façon de créer plusieurs éditeurs dans Vue. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous. Les amis qui en ont besoin suivront l'éditeur ci-dessous. .Apprenons ensemble.

J'ai récemment demandé une mise à niveau au travail et j'avais besoin de créer plusieurs instances ueditor dans vue. J'ai utilisé neditor, ce qui a en fait embelli le style ueditor. Le reste est presque le même que ueditor, je n'en dirai pas beaucoup plus. Ci-dessous, allons-y ensemble. Jetons un coup d'œil à l'introduction détaillée.

Capture d'écran


Description

Téléchargez le code source ueditor ou neditor et copiez-le dans le répertoire statique

Puis modifiez la configuration ueditor.config.js file

Ajouter une référence ueditor dans le main.js du projet vue

Créer 3 nouvelles pages home, tab1 , onglet2. tab1 et tab2 sont des sous-pages sous home

Assurez-vous d'ajouter le composant keep-alive et le composant de transition en dehors de la vue du routeur, sinon l'instance ueditor ne peut pas être enregistrée

Créez un nouvel éditeur dans le dossier des composants en tant que composant public de l'éditeur

Appelez l'éditeur dans l'onglet 1, transmettez un identifiant et acceptez-le sur la page de l'éditeur. Notez que s'il y a plusieurs instances. sont nécessaires, les identifiants ne doivent pas être les mêmes.

 <template>
 <p>
 <editor ref="editor" id="tab1Editor"></editor>
 <button @click="getContent" class="m-t-10">获取内容</button>
 <p>
 <span>当前富文本编辑器内容是: {{content}}</span>
 </p>
 </p>
 </template>

 <script>
 import Editor from &#39;@/components/editor&#39;
 export default {
 name: &#39;tab1&#39;,
 components: { Editor },
 data() {
 return {
 content:&#39;&#39;
 }
 },
 methods: {
 //获取内容
 getContent(){
 this.content = this.$refs.editor.content
 }
 }
 }
 </script>

 <style scoped>
 .m-t-10{
 margin-top: 10px;
 }
 </style>
Copier après la connexion

Code de la page de l'éditeur, car nous appliquons keep-alive dans la vue du routeur, donc l'initialisation de l'utilisateur doit être placée dans activé
Make. assurez-vous que l'utilisateur sera restitué à chaque fois que vous entrez dans la page. La méthode destroy de l'éditeur est appelée désactivée pour garantir que
détruira l'instance de l'éditeur à chaque fois que vous quittez la page, afin que plusieurs instances de l'éditeur puissent être rendues. , et le contenu de l'éditeur peut être enregistré à chaque fois que vous changez.

Si plusieurs onglets n'ont besoin que d'une seule instance, veuillez appeler la méthode reset()

 <template>
 <p>
 <p :id="this.id"></p>
 </p>
 </template>

 <script>
 export default {
 name: &#39;editor&#39;,
 props: [&#39;id&#39;],
 data() {
 return {
 ue: &#39;&#39;, //ueditor实例
 content: &#39;&#39;, //编辑器内容
 }
 },
 methods: {
 //初始化编辑器
 initEditor() {
 this.ue = UE.getEditor(this.id, {
 initialFrameWidth: &#39;100%&#39;,
 initialFrameHeight: &#39;350&#39;,
 scaleEnabled: true
 })
 //编辑器准备就绪后会触发该事件
 this.ue.addListener(&#39;ready&#39;,()=>{
 //设置可以编辑
 this.ue.setEnabled()
 })
 //编辑器内容修改时
 this.selectionchange()
 },
 //编辑器内容修改时
 selectionchange() {
 this.ue.addListener(&#39;selectionchange&#39;, () => {
 this.content = this.ue.getContent()
 })
 }
 },
 activated() {
 //初始化编辑器
 this.initEditor()
 },
 deactivated() {
 //销毁编辑器实例,使用textarea代替
 this.ue.destroy()
 //重置编辑器,可用来做多个tab使用同一个编辑器实例
 //如果要使用同一个实例,请注释destroy()方法
 //this.ue.reset()
 }
 }
 </script>
Copier après la connexion

Recommandations associées :

Articles sur l'éditeur ueditor 10 articles recommandés

Introduction détaillée à l'installation et à l'utilisation de php UEditor Baidu editor partage

UEditor editor téléchargement personnalisé d'une image ou d'un chemin de fichier Méthode de modification

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal