代码编辑器codemirror 获取值 赋值【文章最后有我实际操作代码 修改回显 并保存】

最新推荐文章于 2023-10-24 18:00:21 发布
最新推荐文章于 2023-10-24 18:00:21 发布
阅读量1.1w 收藏 6
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_ZhangAdd/article/details/88030169
版权

首先引入这两个css

<link href="../../css/plugins/codemirror/codemirror.css" rel="stylesheet">
<link href="../../css/plugins/codemirror/ambiance.css" rel="stylesheet">

然后页面中定义一个textarea

<textarea id="scriptDesc" name="scriptDesc"></textarea>

然后添加脚本

<!-- 	脚本编辑器	开始 -->
	<script src="../../js/plugins/codemirror/codemirror.js"></script>
	<script src="../../js/plugins/codemirror/mode/javascript/javascript.js"></script>
<!-- 	脚本编辑器	结束 -->

然后进行设置【注意：id是 text area得id】  创建完这个对象就可以使用 editor.getValue() editor.setValue()进行取值 赋值操作了【文章最后有 我操作的页面】

var editor = CodeMirror.fromTextArea(document
				.getElementById("scriptDesc"), {
			lineNumbers : true,
			matchBrackets : true,
			styleActiveLine : true
		});

下面是实现效果 

 

下面是我一个修改页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DBAAS</title>

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
  	<link href="../../plugins/layui/css/layui.css" rel="stylesheet">
  	<link href="../../css/plugins/codemirror/codemirror.css" rel="stylesheet">
	<link href="../../css/plugins/codemirror/ambiance.css" rel="stylesheet">
</head>

<body>
     <div class="col-sm-12">
          <form class="form-horizontal m-t" id="scriptForm" method="post" action="">
          	 <input type="hidden" id="id" name="id"/>
          	 <div class="form-group">
                  <label class="col-sm-3 control-label">脚本名称：</label>
                  <div class="col-sm-8">
                      <input id="scriptName" name="scriptName" type="text" class="form-control">
                  </div>
              </div>
              <div class="form-group">
				<label class="col-sm-3 control-label">脚本代码：</label>
				<div class="col-sm-8">
					<textarea id="scriptDesc" name="scriptDesc"></textarea>
				</div>
			  </div>
              <div class="hr-line-dashed"></div>
              <div class="form-group">
                  <div class="col-sm-4 col-sm-offset-3">
                      <button class="btn btn-primary" type="button" id="save">保存</button>
                      <button class="btn btn-white" type="button" id="cancel">取消</button>
                  </div>
              </div>
          </form>
      </div>

    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <script src="../../js/plugins/validate/jquery.validate.min.js"></script>
    <script src="../../js/plugins/validate/messages_zh.min.js"></script>
    <script src="../../js/demo/form-validate-demo.js"></script>
	<script src="../../plugins/layer/2.1/layer.js"></script>
	<script src="../../plugins/layui/layui.js"></script>
	<!-- 	脚本编辑器	开始 -->
	<script src="../../js/plugins/codemirror/codemirror.js"></script>
	<script src="../../js/plugins/codemirror/mode/javascript/javascript.js"></script>
	<!-- 	脚本编辑器	结束 -->
	
	<!--编写自己的脚本  -->
	<script type="text/javascript">
		var scriptDesc ;
		
		var editor = CodeMirror.fromTextArea(document
				.getElementById("scriptDesc"), {
			lineNumbers : true,
			matchBrackets : true,
			styleActiveLine : true
		});
		$(function(){
			//表单回显数据
		    var data = JSON.parse(window.localStorage.getItem("data"));
		    $("#id").val(data.id);
		    window.localStorage.clear();
		    
			var id = data.id;
		   $.ajax({ 
		        url : "/script/selectScript", // 请求url
		        type : "get", // 提交方式
		        dataType : "json", // 数据类型
		        data :{
		        	id:id
		        },
		        success : function(res) { // 提交成功的回调函数
		        	editor.setValue(res.data.scriptDesc);
		        	$("#scriptName").val(res.data.scriptName);
		        },
		        error: function(XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
		        }
		    });  
		    
		})
		
		$("#cancel").click(function(){
	    		var index = parent.layer.getFrameIndex(window.name);
    			parent.layer.close(index);
	    	});
		
		/* 修改 */
		$("#save").click(function() {
			scriptDesc = editor.getValue();
			//校验表单数据
			var scriptName = $("#scriptName").val();
			var id = $("#id").val();
			
			if (scriptName == "") {
				layer.msg("脚本名称不能为空");
				return;
			}

			if (scriptDesc == "") {
				layer.msg("脚本代码不能为空");
				return;
			}

			var script = {
				scriptName: scriptName,
				scriptDesc: scriptDesc,
				id: id
			};
			
			//提交表单
			$.ajax({ 
		        url : "/script/save", // 请求url
		        type : "post", // 提交方式
		        dataType : "json", // 数据类型
		        data : script,// 参数序列化
		        success : function(res) { // 提交成功的回调函数
		        	if(res.code == 200){
		        		layer.alert("保存成功",{icon: 6},function(){
		        			var index = parent.layer.getFrameIndex(window.name);
		        			window.parent.location.reload();//刷新父页面
		        			parent.layer.close(index);
		        		})
		        		
		        	}else{
		        		layer.msg(res.message);
		        	}
		        },
		        error: function(XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
		        }
		    });
    	});  
		
		
	</script>
</body>
</html>

 

Mr_ZhangAdd
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js代码-element tree 回显非全选的误区
07-16
js代码-element tree 回显非全选的误区
代码编辑器CodeMirror常用API
weixin_33897722的博客
07-16 702
2019独角兽企业重金招聘Python工程师标准>>> ...
CodeMirror事件和常用方法
热门推荐
风火一回，一生不毁
10-19 2万+
1.change(changeObj)：当dom元素被修改前，codeMirror文本被修改后触发。 changeObj是一个｛from，to，text，removed，origin｝对象。其中from，to分别表示起始行数和结束行数。text是一个字符串数组表示被修改的文本范围
解决layui富文本编辑器图片上传无法回显的问题
10-16
今天小编就为大家分享一篇解决layui富文本编辑器图片上传无法回显的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uni-app 富文本编辑 回显富文本和修改富文本！
最新发布
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！
Vue2.6引入codemirror并获取其内容
比起未来可期，我更喜欢如约而至
07-28 3620
Vue2.6引入codemirror并获取其内容
CodeMirror 使用大全
weixin_30685029的博客
04-23 1169
CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件，为各种编程语言实现关键字，函数，变量等代码高亮显示，丰富的api和可扩展功能以及多个主题样式，能满足您各种项目的需求。 CodeMirror支持大量语言的语法高亮，包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等，以及diff、L...
在vue中实现在线代码编辑器之CodeMirror
crud_man的博客
10-24 8865
以上就是我使用codemirror的一些经验，我是通过页面集成了vue-codemirror，来实现了一个在页面上的代码编辑器，从而可以方便的编辑和查看某些配置文件。
Vue3中使用CodeMirror出现setValue后点击报错
七月❤的博客
11-17 408
markRaw标记后，当后面将sqlEditor变成proxy对象时，发现调用change方法改变数据时，界面并不会再跟新了。包装前的原始数据，然后通过对原始数据进行修改，进而可以修改对应的代理对象内部数据。这是通过原始数据修改改变的，并不会触发。所以，如果我们有些时候，有些操作可以不需要每次修改数据都去更新。有的情况下，我们希望某个数据在以后的操作中永远都不会被追踪，函数创建响应式数据，其特点是，每次修改数据都会更新。界面，这样的问题是非常消耗性能。界面，那么我们可以通过。
Android开发之完成登陆界面的数据保存回显操作实例
09-03
主要介绍了Android开发之完成登陆界面的数据保存回显操作实现方法,结合完整实例形式较为详细的分析了Android针对登录数据的保存及回显操作技巧,需要的朋友可以参考下
图片转base64保存到数据库 , 并回显到浏览器
12-24
图片转base64保存到数据库 , 并回显到浏览器
页面编辑器CodeMirror的使用，以及使用时出现的问题
qq_45030980的博客
06-14 7041
官网：**https://codemirror.net** 使用前先下载依赖： npm install --save codemirror 编译器样式地址(theme): 效果地址: https://codemirror.net/demo/theme.html#default 引入样式地址：https://codemirror.net/theme/ <template> <div id="app"> <textarea id="text...
在线代码编辑器 CodeMirror 使用简介
qq_41132952的博客
11-21 7201
在线代码编辑器 CodeMirror 使用简介 CodeMirror是一款在线的支持语法高亮的代码编辑器 github源码特点： 支持100多种语言 支持多语言混合 代码自动提示 代码折叠 键盘绑定事件 编辑模式 Vim，Emacs和Sublime Text 很多的方法和插件… 几十个demo可供参考已经应用CodeMirror的产品使用:基本的用法<!-- 引入codemirror 外部基本资源
解决codeMirror使用setValue更新数据之后需要获取到焦点才会在展示上更新
liv空间站
06-04 6996
https://stackoverflow.com/questions/8349571/codemirror-editor-is-not-loading-content-until-clicked 不会科学上网这个网站打开可能会很慢，所以我就把里边的解决方法拿出来，方便参考 解决方法 利用定时器刷新 this.codemirror.setValue('') setT...
代码编辑器实践之vue-codemirror使用
weixin_41886421的博客
08-05 2723
程序员用到`IDE`次数比较频繁，比如`vscode`、`idea`等，这些都是市场上比较流行的代码编辑器，拥有非常全面的功能。但是有时候在项目开发上也会用到代码编辑器，比如复杂的`Array`输入，或者需要用到用户交互的代码逻辑，或者需要用到json、yaml格式文件时的校验等等。本来也不了解，只是接收到了项目需求，于是开始慢慢了解，以下为一点点实践，不足之处敬请指出
记录一下使用codemirror6写一个低代码脚本编辑器遇到的坑
fudebao的博客
04-09 4183
最近公司让我实现一个低代码在线脚本编辑器组件，组件需要支持点击左边模型字段插入标签，还需要支持函数自动补全。
vue-codemirror使用详细过程（包括修改宽度，更换语言模式，C++模式，HTML模式，括号补全）
laisy334514的博客
10-17 1万+
近期在做一个oj项目，要使用代码编辑器，过程中碰到一些问题，现在记录下步骤。 参考文章：https://blog.csdn.net/senmage/article/details/103742854 大致效果： 1.安装，直接在你的vue项目中使用npm指令 npm install vue-codemirror --save 2.引入和参数配置，这里直接参考https://blog.csdn.net/senmage/article/details/103742854 （先都按照参考文章..
VueUeditorWrap 富文本编辑器文本回显代码
08-20
### 回答1： 以下是 VueUeditorWrap 富文本编辑器的文本回显代码： ```html <!-- 在模板中使用 v-model 双向绑定富文本编辑器的内容 --> <vue-ueditor-wrap v-model="content"></vue-ueditor-wrap> <!-- 在需要回显富文本的地方，使用 v-html 渲染内容 --> <div v-html="content"></div> ``` 其中，`vue-ueditor-wrap` 是 VueUeditorWrap 组件的名称，`content` 是在 Vue 实例中定义的数据，用于双向绑定富文本编辑器的内容。在需要回显富文本的地方，使用 `v-html` 渲染 `content` 数据即可。 ### 回答2： VueUeditorWrap是一个基于Vue.js的富文本编辑器组件，用于在页面上显示富文本内容。其文本回显的代码如下： ```vue <template> <div> <vue-ueditor-wrap id="editor" :content="content"></vue-ueditor-wrap> <div v-html="content"></div> </div> </template> <script> import VueUeditorWrap from 'vue-ueditor-wrap' export default { components: { VueUeditorWrap }, data() { return { content: '<p>这是富文本编辑器的文本内容。</p>' } } } </script> ``` 首先，在template中使用`vue-ueditor-wrap`组件，并通过`:content`属性将要回显的文本内容传递给组件。在data中，设置了`content`的初始值为文本的HTML代码。通过`v-html`指令，将`content`的值渲染为HTML内容，实现文本的回显。 以上代码以静态的方式展示了VueUeditorWrap富文本编辑器的文本回显功能，可以根据具体需求进行适当修改和调整。 ### 回答3： VueUeditorWrap是一个基于Vue.js的富文本编辑器组件，用于用户输入和处理富文本内容。 要实现文本回显，需要将用户输入的富文本内容保存起来，并在需要回显的时候将其渲染到页面上。 首先，我们需要在Vue组件中引入VueUeditorWrap组件，并在data中声明一个变量用于保存富文本内容： ```javascript import VueUeditorWrap from 'vue-ueditor-wrap'; export default { components: { VueUeditorWrap }, data() { return { content: '' // 用于保存富文本内容的变量 } }, methods: { // 处理保存富文本内容的方法 handleSaveContent(content) { this.content = content; } } } ``` 然后，在模板中使用VueUeditorWrap组件，将保存富文本内容的方法传递给组件的update方法： ```html <vue-ueditor-wrap ref="editor" @update="handleSaveContent" ></vue-ueditor-wrap> ``` 接下来，我们可以在需要回显文本的地方，使用`v-html`指令来将保存的富文本内容渲染出来： ```html <div v-html="content"></div> ``` 这样，当用户输入富文本内容后，会通过`handleSaveContent`方法保存在`content`变量中。然后，在需要回显文本的地方，通过`v-html`指令将`content`变量中的内容渲染到页面上，实现文本回显。 以上就是使用VueUeditorWrap富文本编辑器实现文本回显的代码片段。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值