由于从零开始的过程太曲折,我就说一下自己从开始到升级的过程,给自己留个纪念,也给大家一个参考,或者是一个解决问题的思路,嫌字多的大佬不喜勿喷哈。
先说一下背景,最近在维护一个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