b-code-editor通过$nextTick方法清除数据

最新推荐文章于 2024-09-04 16:39:50 发布

原创最新推荐文章于 2024-09-04 16:39:50 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

文章讲述了作者在使用Vue的jsonEditor组件时遇到数据清除问题，发现可能是因为DOM节点创建延迟导致的。通过使用Vue的$nextTick方法确保在DOM更新后执行清除操作，解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击修改按钮json数据正常显示出来

但是点击新增我发现数据没有被清空

我在这做清除操作竟然没有作用

我又做了一个按钮触发

this.$refs['jsonEditor'].getEditor().setValue('')

我发现有用了

奇怪了，我怀疑是dom节点没有创建，导致清除不成功

所有我使用$nextTick方法

这个回调函数会在下一次DOM更新循环结束后被执行。
在上面的代码中，我将设置编辑器值的逻辑放在了this.$nextTick的回调函数中。这样可以确保在下一次DOM更新循环结束后再尝试设置编辑器的值，从而避免在组件mounted时就立即设置值导致的问题。

this.$nextTick(() => {
  this.$refs['jsonEditor'].getEditor().setValue('')
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hmbbpdx

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue插件之vue-quill-editor

一入前端深似海

04-15

5299

首先送上官网地址：点这是跳转官网。接下来按步骤食用： npm install quill --save 在main.js全局引入 import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(Vue

vue-quill-editor 自定义文字字号

且听风吟的博客

10-23

1957

默认的 vue-quill-editor 富文本编辑器的字号选择很少，只有默认的几种。需求是设置默认字体大小。

参与评论您还未登录，请先登录后发表或查看评论

使用bin-code-editor格式化JSON字符串并在页面中展示

h2790832998的博客

12-28

1362

在package.json中加入 "bin-code-editor": "^0.9.0",然后npm i 下载依赖包或者直接npm i bin-code-editor。把上面这种格式的数据像这个样子展示出来。用法：在dialog弹窗中放置这个组件。在main.js中写入。

code-editor:轻量级的代码编辑器

04-06

代码编辑器一个基于Web的简约代码编辑器

b-code-editor JSON编辑器的样式问题

weixin_73216040的博客

02-28

823

首先，给b-code-editor打上标签，然后在created阶段或者mounted阶段执行formatCode方法。这种情况下，我们要用到其。

Vue：Bin Code Editor格式化JSON编辑器

席木木的博客

06-01

1595

Vue项目中，Bin Code Editor格式化JSON编辑器的使用与踩坑记录。

code-editor:一个简单的代码编辑器，用于快速编辑

08-04

代码编辑器请在提供反馈和问题对于我们的功能/变更日志，请访问最新版本更新：我们使用了 Firebase 的 FirePad 代码的一部分来添加协作。支持的版本以下是代码编辑器支持的版本版本支持的 6.0.x :check_mark_button: 3.1.x :check_mark_button: 2.1.x :cross_mark: 2.0.x :cross_mark: 1.0.x :cross_mark: 报告漏洞我们目前不对某些漏洞负责。如果有，您可以提出问题或访问

CodeEditor-开源

05-14

适用于多种语言的代码编辑器，例如mips，c＃，c ++，xml，html，...

Vue3 使用富文本编辑器 wangeditor/editor-for-vue 配置详解

热门推荐

weixin_45563734的博客

09-04

1万+

Vue3 使用富文本编辑器 wangeditor/editor-for-vue 配置详解

vue-quill-editor 自定义 a 标签，给标签添加href属性

且听风吟的博客

10-25

7249

vue-quill-editor 富文本编辑器自定义 a 标签属性

online-code-editor:开源在线代码编辑器-Source code editor

03-24

在线代码编辑器开源在线代码编辑器

Code_Editor.js:简短的

04-23

# Brief : ## This is a personal code editor developed for myself to write and execute JavaScript code on localhost. • This is developed for learning purpose for improving my JS Skills. • Users can be able to write and execute their JavaScript code and can also be able to see the output. • It supports only JavaScript for now, I am working on this for other languages as well.

bin-ace-editor:新版代码编辑器，支持json、javascript、Java、sql等多种模式

04-28

介绍更新重构了代码编辑器组件和底层依赖，现已支持更多代码类型。并已正式更名为bin-ace-editor, 原代码编辑器bin-code-editor停止更新，保留至0.9.0版本。最新版本安装 npm 安装推荐使用npm安装，它能更好地和打包工具配合使用。而且可以更好的和 es6配合使用。并且支持按需引入 npm i bin-ace-editor -S # or yarn add bin-ace-editor 如果您了解node.js、npm安装，并希望配合webpack使用，请阅读下一节：。引入在 main.js 中写入以下内容： import Vue from 'vue'; import Editor from 'bin-ace-editor'; import App from './App.vue'; // 按需引入需要的语言包皮肤等资源 require('brace

vue-quill-editor 添加自定义工具栏

且听风吟的博客

09-04

6039

import { quillEditor } from 'vue-quill-editor' import Delta from 'quill-delta' import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.bubble.css'; const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike

vue中解决b-code-editor没法调整高度的问题

qq_37401609的博客

04-25

505

【代码】vue中解决b-code-editor没法调整高度的问题。

Bin Code Editor格式化JSON编辑器

weixin_45917647的博客

08-04

9294

Bin Code Editor格式化JSON编辑器

vue JsonEditor 编辑器

m0_60522381的博客

09-14

1259

JsonEditor官网做后台管理系统需要展示可视化的Json，这样方便录入人员读取。如图所示⬇️ 安装步骤第一步： npm i bin-code-editor -S # or yarn add bin-code-editor 第二步：在main.js中引入 import CodeEditor from 'bin-code-editor'; Vue.use(CodeEditor); 第三步：在所需的.vue文件中 <template> <div&...

bin-editor-next实现josn序列化

xiaoming4965的博客

10-07

617

线上链接实现效果安装步骤。

Vue项目页面中快速使用JSON数据格式化模块插件

weixin_44592407的博客

04-11

1190

JSON数据格式化模块插件，可以用来展示JSON数据，也可以验证某数据是否为JSON格式。2、在项目的main.js文件中导入并全局安装。来实现效果，方便快捷，3、具体页面中使用即可。5、最终实现效果如下。

vue富文本编辑器并打印

最新发布

02-12

### Vue.js 中集成富文本编辑器并实现打印功能 #### 集成 TinyMCE 富文本编辑器 TinyMCE 是一款功能强大的富文本编辑器，适用于多种 Web 开发场景。为了在 Vue 项目中集成 TinyMCE 并实现其基本功能，可以按照以下方式操作。安装所需依赖： ```bash npm install @tinymce/tinymce-vue tinymce --save ``` 创建组件 `TinymceEditor.vue` 来封装 TinyMCE 编辑器实例化逻辑： ```vue <template> <editor v-model="content" :init="editorInit"/> </template> <script setup lang="ts"> import { ref } from 'vue'; import Editor from '@tinymce/tinymce-vue'; const content = ref(''); // 初始化配置项 const editorInit = { height: 500, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help', }; </script> ``` 此代码片段展示了如何初始化 TinyMCE 的插件列表和工具栏按钮集[^2]。 #### 处理图片上传当用户尝试向富文本区域粘贴或拖拽图片时，需自定义 `images_upload_handler` 函数来处理文件上传流程，并最终返回图片 URL 给编辑器用于显示插入的图像资源[^1]。更新上述脚本中的 `editorInit` 对象如下所示： ```javascript const editorInit = { ... images_upload_handler(blobInfo, success, failure) { const formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.filename()); fetch('/api/upload-image', { method: 'POST', body: formData }).then(response => response.json()) .then(result => result.url ? success(result.url) : failure('Failed to upload')) .catch(() => failure('Network error')); } } ``` 这段 JavaScript 负责构建表单数据并通过 HTTP POST 请求发送至服务器端接口 `/api/upload-image` 进行实际存储；成功响应后会调用 `success()` 方法传入远程路径作为参数完成图片加载过程。 #### 添加打印支持为了让页面具备导出当前文档为 PDF 或者直接调起浏览器默认打印机对话框的能力，在模板部分增加相应按钮控件即可满足需求： ```html <button type="button" class="btn btn-primary me-2" @click="printContent">Print Content</button>  ``` 接着补充对应的事件处理器方法于 `<script>` 块内： ```typescript methods: { async printContent() { let iframeId = "printing-frame"; // 创建隐藏 iFrame 容器装载 HTML 版面结构 var iframeElement = document.createElement("iframe"); iframeElement.id = iframeId; iframeElement.name = iframeId; iframeElement.style.position = "absolute"; iframeElement.style.top = "-1px"; iframeElement.style.left = "-1px"; iframeElement.style.width = "1px"; iframeElement.style.height = "1px"; iframeElement.setAttribute("aria-hidden", true); document.body.appendChild(iframeElement); try { await this.$nextTick(); // 确保 DOM 更新完毕再继续执行 // 获取编辑区内的纯文本内容转换为标准 HTML 字符串形式 const htmlString = ` <!DOCTYPE html> <html> <head><title>Document Printout</title></head> <body>${this.content}</body> </html>`; // 将生成好的静态网页注入到新窗口对象里去渲染呈现出来准备打印输出 iframeElement.srcdoc = htmlString; setTimeout(function () { window.frames[iframeId].focus(); window.frames[iframeId].print(); // 清除临时使用的 DOM 元素防止内存泄漏 setTimeout(() => { document.body.removeChild(document.getElementById(iframeId)); }, 60 * 1e3); // 半分钟后销毁容器节点 }); } catch (error) { console.error(error.message || error.toString()); } }, }, ``` 该段 TypeScript/JavaScript 主要负责动态构造一个不可见的 IFRAME 标签用来承载待打印的内容副本，并利用浏览器内置 API (`window.print`) 发送指令给操作系统级服务程序启动硬件设备选择界面供用户确认具体设置选项。