关于网页设计中,由于ewebeditor编辑器,升级成editor_k编辑器的方法

由于从零开始的过程太曲折,我就说一下自己从开始到升级的过程,给自己留个纪念,也给大家一个参考,或者是一个解决问题的思路,嫌字多的大佬不喜勿喷哈。

先说一下背景,最近在维护一个html网站,应该是属于asp类型的,反正里面都是asp文件,之前也没接触过,更没学习过网站制作。稍微跟同事学了一点,下载了Dreamweaver8,刚开始只是对网页的图片和布局进行修改,在Dreamweaver8上很少动代码,大部分是动设计界面,当然有些能看得出来功能的代码也会动一下。网页布局进行升级后,才发现最大的问题所在。

在发布以及修改文章时,发现根本输入不进去,无论我用什么浏览器都不行,后来百度说要用ie5.5以上的浏览器,但是我的ie浏览器是ie11,明明是5.5以上,但是还是不行,现象如图:

在这里插入图片描述
本来是一个大框框,现在变成了一个小框框而且无法输入,百度了好久,才发现是编辑器的问题,我才知道我用的是ewebeditor编辑器,然后又在网上百度,网上说是ewebeditor编辑器在ie11也已经停用了,现在用的编辑器也有很多种,包括kindeditor,CKeditor等,网上也有升级的教程,都是要修改一些代码,但是对我这个萌新来说,看懂了,但是学不会。
于是我开始寻求外援,淘宝找了一个网页设计的店铺,帮我升级编辑器,但是他们用的一般都是editor_k编辑器,我看了下界面,也兼容各种浏览器,而且页面挺好看,各种功能也都有,如图:
在这里插入图片描述
我的网站上一共有三个需要输入框的界面,一个界面收我200块,由于经费有限,我就让商家只做了一个界面,我想着等他做好我再用ftp把asp文件下载下来看看,我倒要看看他到底改了啥,得多复杂才这么贵,结果他十分钟就跟我说搞好了(估计从ftp下载文件还花了5分钟),我就觉得这应该也不难,于是我就开始了我的探索之旅。
下图是商家发给我的成果图商家发给我的成果图
首先我从商家改好的网站上下载了商家上传的编辑器文件,是一个文件夹,放在我本地的调试用的虚拟网页文件夹里,然后下载下来商家修改的asp文件,(用dw8的设计界面可以看的出来编辑框属于那个asp文件),然后和没修改之前的asp文件进行对比,一行一行代码对比,发现商家修改了两个地方。第一个地方比较简单,只是把调用的指令修改了,如下图:
在这里插入图片描述
灰色的代码是之前的,被商家备注掉了,然后商家自己加了一行调用的。代码我复制在这,应该就是d_document这里是调用文件的。

<textarea name="d_content" style="width:700px;height:420px;visibility:hidden;"></textarea>

经过我继续对比,第二处修改只是在 “ <head>” 和 “<body>” 之间加了这么一段代码:

<link rel="stylesheet" href="editor_k/themes/default/default.css" />
	<link rel="stylesheet" href="editor_k/plugins/code/prettify.css" />
	<script charset="utf-8" src="editor_k/kindeditor.js"></script>
	<script charset="utf-8" src="editor_k/lang/zh_CN.js"></script>
	<script charset="utf-8" src="editor_k/plugins/code/prettify.js"></script>
	<script>
		KindEditor.ready(function(K) {
			var editor1 = K.create('textarea[name="d_content"]', {
				cssPath : 'editor_k/plugins/code/prettify.css',
				uploadJson : 'editor_k/asp/upload_json.asp',
				fileManagerJson : 'editor_k/asp/file_manager_json.asp',
				allowFileManager : true,
				afterCreate : function() {
					var self = this;
					K.ctrl(document, 13, function() {
						self.sync();
						K('form[name=example]')[0].submit();
					});
					K.ctrl(self.edit.doc, 13, function() {
						self.sync();
						K('form[name=example]')[0].submit();
					});
				}
			});
			prettyPrint();
		});
	</script>
    
<script>
			KindEditor.ready(function(K) {
				var editor = K.editor({
					cssPath : 'editor_k/plugins/code/prettify.css',
				uploadJson : 'editor_k/asp/upload_json.asp',
				fileManagerJson : 'editor_k/asp/file_manager_json.asp',
					allowFileManager : true
				});
				K('#image1').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							imageUrl : K('#url1').val(),
							clickFn : function(url, title, width, height, border, align) {
								K('#url1').val(url);
								editor.hideDialog();
							}
						});
					});
				});
				K('#image2').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							showLocal : false,
							imageUrl : K('#url2').val(),
							clickFn : function(url, title, width, height, border, align) {
								K('#url2').val(url);
								editor.hideDialog();
							}
						});
					});
				});
				K('#image3').click(function() {
					editor.loadPlugin('image', function() {
						editor.plugin.imageDialog({
							showRemote : false,
							imageUrl : K('#url3').val(),
							clickFn : function(url, title, width, height, border, align) {
								K('#url3').val(url);
								K('#IMG1').attr('src', url);
								editor.hideDialog();
							}
						});
					});
				});
			});
		</script>

代码内容我是没仔细看,也看不太懂,跟网上的还是有一定的区别的,但是这两个地方的修改我照搬到另外一个需要编辑器的网页上发现那个网页也修好了。
还剩最好一个网页,与之前不同的是那两个网页都是编辑栏直接输入就行,但最后这个是文章的修改,也就是说在初始状态要先把文章的内容传递到这个编辑框中。刚开始我只知道复制过去,发现点击修改文章进去是空白,这里才意识到是没有把文章传递过来,我看之前的代码,用的是传递的,但是用这个指令传递会把之前的框也传进去,仍然无法修改,后来通过百度,看到商家用的是对框进行初始化,我就开始尝试,首先百度到了textarea的用法,也就是内容,这个内容就会出现在初始的编辑框中,然后又经过多次尝试,最后终于蒙对了怎么调用文章内容:

  ![在这里插入图片描述](https://img-blog.csdnimg.cn/e1e36a9d9bf84d04bb0759dd35e20ae5.png)

  <textarea name="d_content"  style="width:700px ;height:420px;visibility:hidden;">
		<%=rsArticle("content")%>
		  </textarea>

兜兜转转,现在看起来很简单的东西用了这么久才搞好,主要的原因也是没学过吧,对于这种东西重新学习的成本太大,只能以目的为导向一步步探索,也算是省了几百块钱吧,这里也只是给大家提供一个思路,应该也不会有太大的实际意义。
editor_k编辑器的链接也给大家放在这吧,网上好像很少搜到这个编辑器,看着界面还行。

链接:https://pan.baidu.com/s/1U5P2hzmA7VdBDtrQKwt5ZQ
提取码:shc1

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ACCESS数据库的后台管理编辑器 ======================================================================================================== eWebEditor ASP版,使用ACCESS配置数据库,带后台管理。为保证安全,强烈建议用户开始使用就修改后台管理用户及密码。 结构说明 ============================= admin : 后台管理相关图片 buttonimage : 按钮图片 css : 样式文件 db : 数据库文件 dialog : 对话框相关文件 example : 例子 include : 公用包含文件 sysimage : 系统图片 uploadfile : 默认的上传文件 安装=============================1、解开压缩包,直接拷贝到站点或建虚拟;2、访问例子文件,看是否运行正常: 1) eWebEditor 标准调用和弹窗调用示例: http://127.0.0.1/ewebeditor/example/test1.asp 2) eWebEditor 远程文件上传示例: http://127.0.0.1/ewebeditor/_example/test2.asp3、如果显示正常信息,即表示安装已完成! 使用=============================1、后台管理 地址:http://127.0.0.1/ewebeditor/admin_default.asp 默认登录用户:admin 默认登录密码:admin ======================================================================================================== ╭═══════════════╮ ║ ║ ╭══════┤ ├══════╮ ║ ║ 单机游戏网 ║ ║ ║ ║ ║ ║ ║ ╰═══════════════╯ ║ ║ ║ ║声明: ║ ║ 1) 本站不保证所提供软件或程序的完整性和安全性。 ║ ║ 2) 请在使用前查毒。 ║ ║ 4) 转载本站提供的资源请勿删除本说明文件。 ║ ║ 5) 本站提供的程序均为网上搜集,如果该程序涉及或侵害到您║ ║ 的版权请立即写信通知我们。 ║ ║ 6) 本站提供软件只可供研究使用,请在下载24小时内删除, ║ ║ 切勿用于商业用途,由此引起一切后果与本站无关。 ║ ║ ║ ║ 1. 推荐使用:WinRAR V3.2以上版本解压本站软件 ║ ║ ║ ║ ║ ║ ║ ║ ╭───────────────────────╮ ║ ╰══┤ ├══╯ ╰───────────────────────╯
ewebeditor 是一款基于 Web 的富文本编辑器插件,它提供了丰富的编辑功能和易于集成的接口,可以方便地在网页实现富文本编辑功能。 使用 ewebeditor 插件,您可以在网页实现类似于 Word 文档编辑的功能,包括文字格式设置、插入图片、插入表格、插入链接等等。该插件可以与后台服务器进行数据交互,支持保存和加载编辑内容。 具体来说,您可以按照以下步骤使用 ewebeditor 插件: 1. 下载插件:首先,您需要从官方网站或者其他可靠的来源下载 ewebeditor 插件的安装包。 2. 配置插件:解压安装包后,您需要进行一些配置工作。通常来说,您需要在网页引入插件的相关脚本文件,并配置编辑器的参数,比如设置编辑器的宽度、高度、语言等。 3. 调用插件:在网页的合适位置,您可以使用 HTML 标签调用 ewebeditor 插件,并指定相应的 ID。这样,一个富文本编辑器就会被渲染到网页上。 4. 处理编辑内容:当用户编辑完成后,您可以使用 JavaScript 或其他后台语言来处理编辑器的内容。您可以将编辑内容发送给服务器进行保存,或者进行其他相关操作。 总的来说,ewebeditor 插件是一个强大而易于使用的富文本编辑器插件,可以帮助您在网页实现富文本编辑的功能。具体的使用方法和配置项可以参考插件的官方文档或者相关教程。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值