vue3.0在线编辑器codemirror开发

使用codemirror封装codeEditor.vue组件

<template><div class="in-coder-panel"><textarea ref="textarea" v-model="code"></textarea></div>
</template><script>// 引入全局实例import _CodeMirror from 'codemirror/lib/codemirror'// 核心样式import 'codemirror/lib/codemirror.css'// 引入主题后还需要在 options 中指定主题才会生效// 需要引入具体的语法高亮库才会有对应的语法高亮效果, 目前已动态引入// import 'codemirror/theme/midnight.css'// 主题样式import 'codemirror/addon/hint/show-hint.css'import { reactive, defineComponent, toRefs, getCurrentInstance, onMounted, onBeforeUnmount } from 'vue'// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入import 'codemirror/mode/javascript/javascript.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 || _CodeMirrorlet coder = null // 编辑器实例export default defineComponent({name: 'codeEditor',props: {value: {type: String,default: ''},scene: {type: String,default: 'look' // add: 新增； edit: 编辑； look: 查看},eventType: {type: String,default: 'blur' // 可用事件'change', 'blur'等等；具体参考codemirror文档},theme: {type: String,default: '3024-day' // 编辑器主题色}},setup(props, { emit }) {const { proxy } = getCurrentInstance()const data = reactive({code: props.value, // 内部真实的内容// 默认配置options: {mode: 'javascript', // 不设置的话，默认使用第一个引用// 缩进格式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)// 此处也可使用'change'事件，不过每次书写的过程中都会触发，为了提高性能，故默认使用'blur'coder.on(props.eventType, coder=> {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 lang="scss"> // 此处不可使用"scoped".in-coder-panel{flex-grow: 1;display: flex;position: relative;.CodeMirror {flex-grow: 1;text-align: left !important;z-index: 1;.CodeMirror-code {line-height: 19px;}}}
</style>

在页面中使用codeEditor.vue

<template><codeEditor v-model:value="code" :scene="type" theme="3024-day"></codeEditor>
</template><script>
import { defineComponent, reactive, toRefs } from 'vue'
import codeEditor from '@/components/common/codeEditor.vue'
export default defineComponent({components: {codeEditor},props: {type: {type: String,default: 'add'}}setup (props) {const data = reactive({code: 'let a = 123'})return {...toRefs(data),...toRefs(props)}}
})
</script>

codemirror参考文档
codemirror主题效果概览

vue3.0在线编辑器codemirror开发相关推荐

vue3.0 结合element ui 开发后台ui框架
vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run s ...
DotNetTextBoxV3.0在线编辑器控件Ver3.4.2 Open Source开源版
英文名:DotNetTextBox V3.0 WYSWYG Web Control For Asp.Net2.0/3.0/3.5 Open Source 中文名:DotNetTextBox V3.0 ...
DotNetTextBoxV3.0在线编辑器控件Ver3.4.1 Open Source开源版(附商业试用版下载)
英文名:DotNetTextBox V3.0 WYSWYG Web Control For Asp.Net2.0/3.5 Open Source 中文名:DotNetTextBox V3.0 所见即所 ...
FCKeditor 2.0在线编辑器的设置与修改以及使用
对于一个全新的网站,FCKeditor就可以直接拿过来用了,不需要进行什么修改.但是对于绝大多数的已有网站而言,FCKeditor的一些设置并不适合自己的使用,这篇文章旨在告诉你简单的修改FCKedi ...
DotNetTextBox V3.0 所见即所得编辑器控件Ver3.4.0 FreeVersion(新增商业试用版下载)
英文名:DotNetTextBox V3.0 WYSWYG Web Control For Asp.Net2.0 and Asp.net3.5 中文名:DotNetTextBox V3.0 所见即所得 ...
来一起用 Vue3.0 造轮子
Vue.js 3.0 "One Piece" 已正式发布,33% 的渲染速度提升.41% 的体积缩小.54% 的内存用量下降.代码可维护和可复用性提升--两个字来形容:真香! 你开 ...
在线代码编辑器 CodeMirror 配置说明 - javascript开发的代码语法高亮显示引擎
CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net/ 下载后,解压开得到的文件夹中,lib下是放的是核心库和核心css,mode下放的是各种支 ...
【红隼书签】用Vue3.0 开发一款导入浏览器书签的在线书签
用Vue3.0 开发一款导入浏览器书签的在线书签
markdown在线编辑器 editor.md 二次开发详细教程
markdown在线编辑器 editor.md 二次开发需求经常需要在网络论坛发布文章进行宣传,但每个论坛的编写格式存在差异,给发布带来了很大的障碍. 最近markdown格式的兴起,给广大发布者 ...

vue3.0在线编辑器codemirror开发

vue3.0在线编辑器codemirror开发相关推荐

最新文章

热门文章