富文本（vue3）SQL格式化 JSON格式化

先上图看效果：

SQL格式化使用的是 codemirror 和 sql-formatter 实现的（建议看文档搞）

使用就直接用就可以了，如果用的地方多建议 install 全局组件

    <codeEditorv-model:value="code":scene="type":height-size="200"></codeEditor>

对富文本编辑器进行封装。直接copy可用

<template><div class="in-coder-panel"><textareastyle="height: 100% !important"ref="textarea"v-model="code"></textarea></div>
</template><script>
// 引入全局实例
import _CodeMirror from "codemirror/lib/codemirror";//代码样式
import "codemirror/addon/hint/sql-hint";
// 核心样式
import "codemirror/lib/codemirror.css";
// 引入主题后还需要在 options 中指定主题才会生效
// 需要引入具体的语法高亮库才会有对应的语法高亮效果, 目前已动态引入
import "codemirror/theme/darcula.css";
// 主题样式
import "codemirror/addon/hint/show-hint.css";import {reactive,defineComponent,toRefs,getCurrentInstance,onMounted,watch,ref,onBeforeUnmount,
} from "vue";
import { format } from "sql-formatter";// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import "codemirror/mode/clike/clike.js";
import "codemirror/mode/r/r.js";const codemirrorThemList = [];
const requireModules = require.context("codemirror/theme/", false, /\.css$/);
requireModules.keys().forEach((value) => {const newValue = value.replace(/^\.\//, "").replace(/\.css$/, "");codemirrorThemList.push(newValue);
});// 尝试获取全局实例
const CodeMirror = window.CodeMirror || _CodeMirror;
let coder = null; // 编辑器实例export default defineComponent({name: "codeEditor",props: {value: {type: String,default: "",},heightSize: {type: Number,default: 500,},scene: {type: String,default: "look", // add: 新增； edit: 编辑； look: 查看},eventType: {type: String,default: "blur", // 可用事件'change', 'blur'等等；具体参考codemirror文档},theme: {type: String,default: "darcula", // 编辑器主题色},},setup(props, { emit }) {const { proxy } = getCurrentInstance();const data = reactive({code: props.value, // 内部真实的内容// 默认配置options: {// mode: "text/x-java", // 不设置的话，默认使用第一个引用mode: "text/x-mariadb",// 缩进格式tabSize: 2,// 主题，对应主题库 JS 需要提前引入theme: props.theme,// 显示行号lineNumbers: true,readOnly:props.scene === "add" || props.scene === "edit" ? false : "nocursor", // true: 不可编辑  false: 可编辑 'nocursor' 失焦,不可编辑},// 初始化initialize: () => {// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置coder = CodeMirror.fromTextArea(proxy.$refs.textarea, data.options);const h = props.heightSize + "px";coder.setSize("auto", h);// 此处也可使用'change'事件，不过每次书写的过程中都会触发，为了提高性能，故默认使用'blur'coder.on(props.eventType, (coder) => {if (coder.getValue() != format(coder.getValue())) {coder.setValue(format(coder.getValue()));}emit("update:value", coder.getValue());});},// 动态引入语法高亮库importThemDynamic: () => {return new Promise((resolve) => {codemirrorThemList.forEach((value) => {if (props.theme === value) {import(`codemirror/theme/${props.theme}.css`);resolve();}});});},});onMounted(() => {// console.log('value:', props.value)data.importThemDynamic().then(() => {data.initialize();});});onBeforeUnmount(() => {coder.off(props.eventType);});return {...toRefs(data),};},
});
</script><style>
.in-coder-panel {flex-grow: 1;display: flex;position: relative;
}.in-coder-panel .CodeMirror {flex-grow: 1;text-align: left !important;z-index: 1;
}.in-coder-panel .CodeMirror .CodeMirror-code {line-height: 20px;
}
</style>

vue3 实现JSON格式化可折叠复制使用了 clipboard vue3-json-viewer

 npm install clipboard --save

npm install vue3-json-viewer --save

import { createApp } from 'vue'
import App from './App.vue'
import JsonViewer from "vue3-json-viewer"
const app=createApp(App)
app.use(JsonViewer)
app.mount('#app')

<json-viewer :value="Data" copyable boxed sort />

富文本（vue3）SQL格式化 JSON格式化相关推荐

Android富文本开发，从0到1！
点击上方 "程序员小乐"关注, 星标或置顶一起成长后台回复"大礼包"有惊喜礼包! 每日英文 Each night I put my head to my pi ...
【开源我写的富文本】打造全网最劲富文本系列之大话技术难点与特色设计。...
文章开始前先上个图: 大话富文本技术概要: 在web领域,一提到富文本,大伙都觉得很高深,很难,很复杂.但是如果你看了我这篇简短的技术分析,你会发现其实富文本不算高深,称不上很难,只是比较复杂,需要用 ...
PHP防止富文本编辑器让服务器产生过多垃圾图片
PHP防止服务器富文本提交产生过多垃圾图片 1.前言做一个项目,然后用到了,富文本编辑器,比如: 这种富文本编辑器可以完成由用户来生成,图文并茂的内容,有点像CSDN的写博客部分.然后出现了问题: ...
（资源免费）Sublime Text 3如何格式化json文本+格式化Sql语句
Sublime Text 3如何格式化json文本+格式化Sql语句下面由sublime教程栏目给大家介绍sublime text3格式化json,希望对需要的朋友有所帮助! 问题研讨当前后端对接 ...
Winform Datagridview 单元格html格式化支持富文本
Winform Datagridview 单元格html格式化支持富文本示例: 源码:https://github.com/OceanAirdrop/DataGridViewHTMLCell 参考: ...
quill 富文本编辑器自定义格式化
quilljs 现在富文本编辑器轮子太多了,Github 上随便搜一下就有一堆,我需要实现的功能很简单,所以就佛系地选了 quilljs,quilljs 是一个轻量级的富文本编辑器. 链接: 官网:q ...
monaco-editor 格式化json,sql
初始化monaco-editor 微软的开源项目有点坑,纯英文的文档对很多刚开始前端的小朋友很不友好,刚好这段时间公司的项目遇到了文本编辑,发现这个居然是微软的vscode网页版,巧了,刚好开发工具正 ...
ABP入门系列（8）——Json格式化
ABP入门系列目录--学习Abp框架之实操演练源码路径:Github-LearningMpaAbp 讲完了分页功能,这一节我们先不急着实现新的功能.来简要介绍下Abp中Json的用法.为什么要在这一 ...
idea json格式化插件_IDEA常用插件
1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的敲击完美提示 Codota基于数百万个开源Java程序和您的上下文来完成代码行,从而帮助您以更少 ...
abp.ajax get,ABP入门系列之Json格式化
讲完了分页功能,这一节我们先不急着实现新的功能.来简要介绍下Abp中Json的用法.为什么要在这一节讲呢?当然是做铺垫啊,后面的系列文章会经常和Json这个东西打交道. 一.Json是干什么的 JSO ...

富文本（vue3）SQL格式化 JSON格式化

先上图看效果：

SQL格式化使用的是 codemirror 和 sql-formatter 实现的（建议看文档搞）

vue3 实现JSON格式化可折叠复制使用了 clipboard vue3-json-viewer

富文本（vue3）SQL格式化 JSON格式化相关推荐

最新文章

热门文章

富文本（vue3）SQL格式化 JSON格式化

先上图看效果：

SQL格式化使用的是 codemirror 和 sql-formatter 实现的（建议看文档搞）

vue3 实现JSON格式化 可折叠 复制 使用了 clipboard vue3-json-viewer

富文本（vue3）SQL格式化 JSON格式化相关推荐

最新文章

热门文章

vue3 实现JSON格式化可折叠复制使用了 clipboard vue3-json-viewer