BlogEngine.Net – Halve Top:半顶在途,永不止步。 http://www.halve.top 半顶在途,永不止步。 Tue, 10 Jul 2018 10:49:49 +0000 zh-CN hourly 1 https://wordpress.org/?v=6.3 http://www.halve.top/wp-content/uploads/2017/11/cropped-1-32x32.png BlogEngine.Net – Halve Top:半顶在途,永不止步。 http://www.halve.top 32 32 BlogEngine.Net – Halve Top:半顶在途,永不止步。 http://www.halve.top/?p=37 http://www.halve.top/?p=37#respond Fri, 24 Nov 2017 11:00:34 +0000 http://www.halve.top/?p=37 很遗憾,本站的原支持程序BlogEngine.Net已经许久没有发布新版本了。

这意味着它已经进入了衰退期。

所以本站的支持程序选用了世界上最流行的博客程序——WordPress。

除了文章迁移了之外,其他内容已经永久删除。

特此通告,万一有人订阅了RSS呢。

]]>
http://www.halve.top/?feed=rss2&p=37 0
BlogEngine.Net – Halve Top:半顶在途,永不止步。 http://www.halve.top/?p=16 http://www.halve.top/?p=16#comments Tue, 07 Feb 2017 11:00:53 +0000 http://www.halve.top/?p=16 一、需求分析

本博客的博客程序使用的是BlogEngine.Net 3.3.5.0(截至2017/1/20,以下简称BE),由于后台发布文章页面的富文本编辑器不能满足我的使用需求。我决定适配一个别的富文本编辑器到BE。

二、资料搜集

BE是有44万多行实际代码的项目,一开始我先从BE的项目目录结构着手。大致分析了一下各个一级、二级目录下文件的作用。然后就是从某一个功能点切入,上下梳理出实现该功能的业务流程。

因为对于体量那么大的项目,如果从程序入口开始一步步的分析,将会非常耗时。而且很有可能分析了很久都还在后台逻辑代码上,没有前端的表示,很难去理解一个个的变量和函数有何作用。所以我决定从各个可见的功能点入手来解剖整个项目,表现在这篇文章上就是为BE添加一个富文本编辑器。

光靠自己一时也很难找出实现这个功能的关键代码在哪里,所以最好的方法就是找一下官方有没用关于这个的wiki。

虽然官方的wiki涵盖的功能不多,所幸这个功能还是有写的。BlogEngine.net:adopting-ckeditor

这篇wiki的发布日期是2014/5/22日,当时的版本还是2.9,所以很多目录结构和代码已经和3.3不一样。

以下的步骤仅适用于3.3版本。

三、适配步骤

1.下载富文本编辑器包。

本文中使用的富文本编辑器是CKEditor,CKEditor:下载地址。该编辑器有多个含有不同功能的集合包可供选择,读者根据自己需求下载。我使用的是Full Package原则上任何集合包都适用于以下步骤。

2.解压编辑器包。

解压编辑器包后,可以发现该编辑器的实现语言使用的是Javascript,并有少量CSS和HTML文件作为实体和框架。

细想一下编辑器的特征:一、编辑器是嵌入到HTML页面中使用的。二、编辑器的功能实现是于后台无关的。可以明白使用JS的原因。

3.添加编辑器包到BE工程。

将 ..\ckeditor_4.6.2_full\ckeditor 放到 ..\BlogEngine\BlogEngine.NET\admin\editors 文件夹下。后者是BE工程中专门存放不同编辑器实现代码的目录。

构成 ..\BlogEngine\BlogEngine.NET\admin\editors\ckeditor 的目录结构。

然后用Visual studio打开解决方案,把编辑器包放进解决方案的对应位置。

4.适配编辑器到BE工程。

经过第3步后,编译环境已经可以调用到编辑器包中的资源了。但是BE工程实际上还感知不到编辑器的存在。

编辑器并非仅为BE工程设计的,它也可用于其他Web项目。为了达到这种目的,有两种解决方法:一,编辑器的设计者根据使用它的项目编写上层的API,这样把编辑器包复制进不同的项目后就可以直接使用。二,编辑器在中层预留个接口,由使用它的项目的设计者根据自身项目的不同来实现这个接口。

显然,第二种方法更符合现实。这就需要一个适配的过程。

BE的开发者规定了编辑器的适配方法,并在Wiki中进行了说明。

4.1构建实体元素文件

在 ..\BlogEngine\BlogEngine.NET\admin\editors\ckeditor 目录下新建一个editor.cshtml文件。文件中输入以下代码。
<textarea cols="100" id="editor1" name="editor1" rows="10" data-sample="1"></textarea>

实际上,任何使用到编辑器的页面都会从配置文件中找到cshtml文件,然后把该行代码嵌入到自己的代码中。

因此,该代码是作用是让编辑器作为一个HTML元素表现在页面中。

4.2实现读写接口

在 ..\BlogEngine\BlogEngine.NET\admin\editors\ckeditor 目录下新建一个editor.js文件。文件中输入以下代码。

var editorGetHtml = function () {
 return editor.getData();
}
 
var editorSetHtml = function (html) {
 editor.setData(html);
}
 
 
var editor = CKEDITOR.replace('editor1', {
 height: 400
});

编辑器的主要作用是以所见即所得的模式代替手写HTML标签的方式展现和编辑各种图文元素。而实际上,要在网页上显示图文,其本质还是HTML标签。

读接口的作用是让编辑器把所见即所得的图文转换为HTML标签代码传递给BE。反而言之,写接口的作用是BE把已有的HTML标签代码传递给编辑器,以所见即所得的方式展现和编辑。

因此,不论使用何种编辑器,都需要去实现读写接口。这里还多了一步是把编辑器实体元素转换为JS变量。以供读写函数去访问实体元素中存储的HTML标签代码。这一步根据编辑器实现方式的不同,可能不是必须的。

这部分JS代码的编写应该参照编辑器给出的API解释。

5.更改配置文件

经过上面的步骤,CKEditor已经可以被BE使用。但是BE同时带着几个不同的编辑器,因此还需要指定CKEditor为默认使用的编辑器。

在 ..\BlogEngine\BlogEngine.NET\web.config 中的<appSettings>子节点下,添加新的键值对代码。

<add key="BlogEngine.DefaultEditor" value="~/admin/editors/ckeditor/editor.cshtml"/>

指明包含了默认编辑器实体元素文件的位置。

6.嵌入JS代码

由我们实现的读写接口的代码可知,JS代码是紧跟着HTML元素的。从cshtml文件中可以发现没有把JS嵌入到页面的操作。因此还需要一个嵌入JS代码的步骤。

打开 ..\BlogEngine\BlogEngine.NET\AppCode\App_Start\BlogEngineConfig.cs 文件。可以发现有一段代码是用于根据配置的默认编辑器的不同,嵌入不同编辑器JS代码的。但是原来的该段代码逻辑上是并不能实现这个功能的,应该改成下面的样子。

if (BlogConfig.DefaultEditor == "~/admin/editors/bootstrap-wysiwyg/editor.cshtml")
{
 bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/admin/editors/bootstrap-wysiwyg/jquery.hotkeys.js");
 bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/admin/editors/bootstrap-wysiwyg/bootstrap-wysiwyg.js");
 bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/admin/editors/bootstrap-wysiwyg/editor.js");
}
else if(BlogConfig.DefaultEditor == "~/admin/editors/ckeditor/editor.cshtml")
{
 bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/admin/editors/ckeditor/ckeditor.js");
 bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/admin/editors/ckeditor/editor.js");
}
else if (BlogConfig.DefaultEditor == "~/admin/editors/tinymce/editor.cshtml")
{
 // tinymce plugings won't load when compressed. added in post/page editors instead.
 //bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/admin/editors/tinymce/tinymce.min.js");
 //bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/admin/editors/tinymce/editor.js");
}
else
{
 bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/admin/editors/summernote/summernote.js");
 // change language here if needed
 //bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/admin/editors/summernote/lang/summernote-ru-RU.js");
 bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/admin/editors/summernote/editor.js");
}

四、总结

完成适配步骤后,编译整个工程,进入文章编写页面后,可以发现富文本编辑器已经从TinyMCE变成了CKEditor。

]]>
http://www.halve.top/?feed=rss2&p=16 3