当前位置:首页 > 天道酬勤 > 正文内容

设置html编辑器(自定义编辑器)

张世龙2021年12月21日 21:20天道酬勤1430

今天在Asp.net MVC上使用kind编辑器富文本编辑器。

KindEditor 是什么?

kind编辑器是一个开源的在线HTML编辑器,主要用于帮助用户在网站上获得真实的编辑效果。 开发者可以使用KindEditor将传统的多行文本输入框(textarea )替换为可视化的富文本输入框。 kind编辑器是用JavaScript编写的,可以与Java、 NET、PHP、ASP等程序无缝集成。 适用于网络APP应用,如CMS、商城、论坛、博客、Wiki和电子邮件。

效果图

演示视频

正在加载视频.

下载

具体项目搭建步骤:

官网kind编辑器所需的文件。 地址:-kind编辑器-关于在线HTML编辑器。

下载kind编辑器

目录结构如下:

下载后的目录

我们使用一种叫做asp.net的demo,其他语言则参考与其对应的demo。

我们需要看一个叫asp.net的演示

新建Asp.net MVC程序。 我不在这里细说。 不自行百度。 这里使用框架版本的MVC。

现在,让我们来看看上面下载的asp.net演示:

upload_json.ashx :用于处理上传的图像;

file_manager_json.ashx :用于返回前台进行展示。

当然也可以不使用ashx文件来实现,但是移植到控制方法需要时间。

ASP .网络演示

在项目文件中创建新的Ashx文件夹,然后保存该文件。

ashx文件

请更改两个文件的路径。 我的文件保存在ImageContent文件夹下。

公共类文件管理器: ihttphandler

{

公共上下文(httpcontext上下文)。

{

//根目录路径、相对路径

字符串根路径=' /图像内容/';

//根目录URL。 3358 www.your site.com /连接/

字符串根URL=' /图像内容/';

//图像扩展名

字符串文件类型s=' gif,jpg,jpeg,png,bmp ';

-------------请参见

公共类加载: ihttphandler

{

私有httpcontext上下文;

公共上下文(httpcontext上下文)。

{

//文件保存目录路径

字符串保存路径

= "/ImageContent/"; //文件保存目录URL String saveUrl = "/ImageContent/";

我们添加一个控制器:代码大家可以参考如下代码

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.IO; namespace KindEditor.Controllers { public class KindEditorController : Controller { //富文本编辑器界面 public ActionResult Index() { return View(); } //接收提交的数据,我们用文本文件来模拟写入数据库 [HttpPost] [ValidateInput(false)] public ActionResult GetString(string content) { try { //注意获取路径的写法 string path= Server.MapPath("~/HtmlText.txt"); using (StreamWriter stream = new StreamWriter(path, false, System.Text.Encoding.UTF8)) { stream.Write(content); } //System.IO.File.WriteAllText("HtmlText.txt", content, System.Text.Encoding.UTF8); } catch (Exception) { throw; } return Content("Success"); } //渲染提交过来的数据 public ActionResult ShowContent() { string content; try { string path = Server.MapPath("~/HtmlText.txt"); using (StreamReader streamReader = new StreamReader(path, System.Text.Encoding.UTF8)) { content = streamReader.ReadToEnd(); } //content = System.IO.File.ReadAllText("HtmlText.txt"); } catch (Exception) { throw; } ViewData["content"] = content; return View(); } } }

Index()方法对应的前端界面:

@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Content/kindeditor/lang/zh-CN.js"></script> <script src="~/Content/kindeditor/kindeditor-all.js"></script> <script src="~/Scripts/jquery-3.6.0.js"></script> <script> KindEditor.ready( function (K) { editor = K.create('#editor_id', { //上传处理程序的路径 uploadJson: '/Ashx/upload_json.ashx', imageSizeLimit: '10MB', //批量上传图片单张最大容量 imageUploadLimit: 30, //批量上传图片同时上传最多个数 //文件管理处理程序的路径 fileManagerJson: '/Ashx/upload_json.ashx', allowFileManager: true }); }); </script> <title>Index</title> </head> <body> <div> <textarea id="editor_id" name="content" style="width:1000px;height:800px;"> </textarea> </div> <div class="divfooter"> <input type="button" id="savedoc" value="保存文档" class="btnop" /> </div> <script> $("#savedoc").click(function () { $.post("/KindEditor/GetString", { content: editor.html()}, function (data) { if (data =="Success") { window.location.href = '/KindEditor/ShowContent'; } }); }) </script> </body> </html>

我们前端重新渲染保存过的数据:

@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>ShowContent</title> </head> <body> <div> @Html.Raw(ViewData["content"]); </div> </body> </html>

至此大功告成,一些具体细微的设置大家可以参考官方文档,不过我发现KindEditor最新的一次更新也已经2016年了。其实我们打断点调试可以发现,富文本编辑器本质就是给内容加上HTML标签,我们用的时候在把他们以标签的形式展示出来。谢谢大家阅读,需要源码的可以评论源码二字。

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/26588.html

标签: contentpgc
分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。