vuejs+.netcore开发使用kind-editor富文本编辑

最新推荐文章于 2025-02-22 11:29:20 发布
最新推荐文章于 2025-02-22 11:29:20 发布
阅读量547 收藏
点赞数
文章标签： vue.js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bian2021/article/details/120779656
版权

目标：

1.vue中支持kindeditor

2.kindeditor上传及文件管理接口要使用.net core api，并需要支持token

一、下载kindeditor

二、将kindeditor整个文件夹复制到vue项目的public/static文件夹下（可以只保留其中的css和img文件），将kindeditor的关联主题样式拷贝到assets下

三、新建vue-kind-editor组件，将kindeditor中的lang、themes、kindeditor-all.js、kindeditor-all.min.js 拷贝到组件文件夹下，新建index.vue

index.vue代码，注意：token（新增）、pluginsPath（需指向static文件夹）、uploadJson、fileManagerJson属性

<template>
  <textarea :id="id" name="content" v-model="outContent"></textarea>
</template>

<script>
import "@/assets/kindeditor/themes/default/default.css";
import "./kindeditor-all.min.js";
import "./lang/zh-CN.min.js";
import store from "@/store";
export default {
  name: "vue-kind-editor",
  data() {
    return {
      editor: null,
      outContent: this.content,
    };
  },
  props: {
    header: {
      type: Object,
      default: () => ({}),
    },
    token: {
      type: String,
      default: store.getters.token,
    },
    content: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      required: true,
      default: "vue-kind-editor-" + new Date().valueOf(),
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "500px",
    },
    minWidth: {
      type: Number,
      default: 650,
    },
    minHeight: {
      type: Number,
      default: 100,
    },
    items: {
      type: Array,
      default: function () {
        return [
          "source",
          "|",
          "undo",
          "redo",
          "|",
          "preview",
          "print",
          "template",
          "code",
          "cut",
          "copy",
          "paste",
          "plainpaste",
          "wordpaste",
          "|",
          "justifyleft",
          "justifycenter",
          "justifyright",
          "justifyfull",
          "insertorderedlist",
          "insertunorderedlist",
          "indent",
          "outdent",
          "subscript",
          "superscript",
          "clearhtml",
          "quickformat",
          "selectall",
          "|",
          "fullscreen",
          "/",
          "formatblock",
          "fontname",
          "fontsize",
          "|",
          "forecolor",
          "hilitecolor",
          "bold",
          "italic",
          "underline",
          "strikethrough",
          "lineheight",
          "removeformat",
          "|",
          "image",
          "multiimage",
          "flash",
          "media",
          "insertfile",
          "table",
          "hr",
          "emoticons",
          "baidumap",
          "pagebreak",
          "anchor",
          "link",
          "unlink",
          "|",
          "about",
        ];
      },
    },
    noDisableItems: {
      type: Array,
      default: function () {
        return ["source", "fullscreen"];
      },
    },
    filterMode: {
      type: Boolean,
      default: true,
    },
    htmlTags: {
      type: Object,
      default: function () {
        return {
          font: ["color", "size", "face", ".background-color"],
          span: ["style"],
          div: ["class", "align", "style"],
          table: [
            "class",
            "border",
            "cellspacing",
            "cellpadding",
            "width",
            "height",
            "align",
            "style",
          ],
          "td,th": [
            "class",
            "align",
            "valign",
            "width",
            "height",
            "colspan",
            "rowspan",
            "bgcolor",
            "style",
          ],
          a: ["class", "href", "target", "name", "style"],
          embed: [
            "src",
            "width",
            "height",
            "type",
            "loop",
            "autostart",
            "quality",
            "style",
            "align",
            "allowscriptaccess",
            "/",
          ],
          img: [
            "src",
            "width",
            "height",
            "border",
            "alt",
            "title",
            "align",
            "style",
            "/",
          ],
          hr: ["class", "/"],
          br: ["/"],
          "p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6": ["align", "style"],
          "tbody,tr,strong,b,sub,sup,em,i,u,strike": [],
        };
      },
    },
    wellFormatMode: {
      type: Boolean,
      default: true,
    },
    resizeType: {
      type: Number,
      default: 2,
    },
    themeType: {
      type: String,
      default: "default",
    },
    langType: {
      type: String,
      default: "zh-CN",
    },
    designMode: {
      type: Boolean,
      default: true,
    },
    fullscreenMode: {
      type: Boolean,
      default: false,
    },
    basePath: {
      type: String,
    },
    themesPath: {
      type: String,
    },
    pluginsPath: {
      type: String,
      default: "/static/kindeditor/plugins/",
    },
    langPath: {
      type: String,
    },
    minChangeSize: {
      type: Number,
      default: 5,
    },
    loadStyleMode: {
      type: Boolean,
      default: true,
    },
    urlType: {
      type: String,
      default: "",
    },
    newlineTag: {
      type: String,
      default: "p",
    },
    pasteType: {
      type: Number,
      default: 2,
    },
    dialogAlignType: {
      type: String,
      default: "page",
    },
    shadowMode: {
      type: Boolean,
      default: true,
    },
    zIndex: {
      type: Number,
      default: 811213,
    },
    useContextmenu: {
      type: Boolean,
      default: true,
    },
    syncType: {
      type: String,
      default: "form",
    },
    indentChar: {
      type: String,
      default: "\t",
    },
    cssPath: {
      type: [String, Array],
    },
    cssData: {
      type: String,
    },
    bodyClass: {
      type: String,
      default: "ke-content",
    },
    colorTable: {
      type: Array,
    },
    afterCreate: {
      type: Function,
    },
    afterChange: {
      type: Function,
    },
    afterTab: {
      type: Function,
    },
    afterFocus: {
      type: Function,
    },
    afterBlur: {
      type: Function,
    },
    afterUpload: {
      type: Function,
    },
    uploadJson: {
      type: String,
      default: "/api/platform/resource/uploaddocument",
    },
    fileManagerJson: {
      type: String,
      default: "/api/platform/resource/filemanager",
    },
    allowPreviewEmoticons: {
      type: Boolean,
      default: true,
    },
    allowImageUpload: {
      type: Boolean,
      default: true,
    },
    allowFlashUpload: {
      type: Boolean,
      default: true,
    },
    allowMediaUpload: {
      type: Boolean,
      default: true,
    },
    allowFileUpload: {
      type: Boolean,
      default: true,
    },
    allowFileManager: {
      type: Boolean,
      default: true,
    },
    fontSizeTable: {
      type: Array,
      default: function () {
        return ["9px", "10px", "12px", "14px", "16px", "18px", "24px", "32px"];
      },
    },
    imageTabIndex: {
      type: Number,
      default: 0,
    },
    formatUploadUrl: {
      type: Boolean,
      default: true,
    },
    fullscreenShortcut: {
      type: Boolean,
      default: false,
    },
    extraFileUploadParams: {
      type: Object,
      default: function () {
        //注意：仅支持post
        return {
          //"key":"value"
        };
      },
    },
    filePostName: {
      type: String,
      default: "imgFile",
    },
    fillDescAfterUploadImage: {
      type: Boolean,
      default: false,
    },
    afterSelectFile: {
      type: Function,
    },
    pagebreakHtml: {
      type: String,
      default: '<hr style="page-break-after: always;" class="ke-pagebreak" />',
    },
    allowImageRemote: {
      type: Boolean,
      default: true,
    },
    autoHeightMode: {
      type: Boolean,
      default: false,
    },
    fixToolBar: {
      type: Boolean,
      default: false,
    },
    tabIndex: {
      type: Number,
    },
  },
  watch: {
    content(val) {
      this.editor && val !== this.outContent && this.editor.html(val);
    },
    outContent(val) {
      this.$emit("update:content", val);
      this.$emit("on-content-change", val);
    },
  },
  computed: {

  },
  mounted() {
    // 初始访问时创建
    this.initEditor();
  },
  /**
   * keep-alive 会用到进入时调用activated 离开时调用deactivated
   * 初始访问 created、mounted 切换时deactivated 再次进入时 activated
   */
  activated() {
    // keep-alive 进入时创建
    this.initEditor();
  },
  deactivated() {
    // keep-alive 离开时移除
    this.removeEditor();
  },
  methods: {
    removeEditor() {
      window.KindEditor.remove("#" + this.id);
    },
    initEditor() {
      var _this = this;
      _this.removeEditor();
      _this.editor = window.KindEditor.create("#" + this.id, {
        header: _this.header,
        token:_this.token,
        width: _this.width,
        height: _this.height,
        minWidth: _this.minWidth,
        minHeight: _this.minHeight,
        items: _this.items,
        noDisableItems: _this.noDisableItems,
        filterMode: _this.filterMode,
        htmlTags: _this.htmlTags,
        wellFormatMode: _this.wellFormatMode,
        resizeType: _this.resizeType,
        themeType: _this.themeType,
        langType: _this.langType,
        designMode: _this.designMode,
        fullscreenMode: _this.fullscreenMode,
        basePath: _this.basePath,
        themesPath: _this.themesPath,
        pluginsPath: _this.pluginsPath,
        langPath: _this.langPath,
        minChangeSize: _this.minChangeSize,
        loadStyleMode: _this.loadStyleMode,
        urlType: _this.urlType,
        newlineTag: _this.newlineTag,
        pasteType: _this.pasteType,
        dialogAlignType: _this.dialogAlignType,
        shadowMode: _this.shadowMode,
        zIndex: _this.zIndex,
        useContextmenu: _this.useContextmenu,
        syncType: _this.syncType,
        indentChar: _this.indentChar,
        cssPath: _this.cssPath,
        cssData: _this.cssData,
        bodyClass: _this.bodyClass,
        colorTable: _this.colorTable,
        afterCreate: _this.afterCreate,
        afterChange: function () {
          _this.outContent = this.html();
        },
        afterTab: _this.afterTab,
        afterFocus: _this.afterFocus,
        afterBlur: _this.afterBlur,
        afterUpload: _this.afterUpload,
        uploadJson: _this.uploadJson,
        fileManagerJson: _this.fileManagerJson,
        allowPreviewEmoticons: _this.allowPreviewEmoticons,
        allowImageUpload: _this.allowImageUpload,
        allowFlashUpload: _this.allowFlashUpload,
        allowMediaUpload: _this.allowMediaUpload,
        allowFileUpload: _this.allowFileUpload,
        allowFileManager: _this.allowFileManager,
        fontSizeTable: _this.fontSizeTable,
        imageTabIndex: _this.imageTabIndex,
        formatUploadUrl: _this.formatUploadUrl,
        fullscreenShortcut: _this.fullscreenShortcut,
        extraFileUploadParams: _this.extraFileUploadParams,
        filePostName: _this.filePostName,
        fillDescAfterUploadImage: _this.fillDescAfterUploadImage,
        afterSelectFile: _this.afterSelectFile,
        pagebreakHtml: _this.pagebreakHtml,
        allowImageRemote: _this.allowImageRemote,
        autoHeightMode: _this.autoHeightMode,
        fixToolBar: _this.fixToolBar,
        tabIndex: _this.tabIndex,
      });
    },
  },
};
</script>

四、修改kindeditor.all.js，让其支持.net core的上传文件，修改完后可以进行压缩成kindeditor-all.min.js

1.修改kindeditor.all.js中的_ajax方法，来支持上传文件功能，代码如下

function _ajax(url, fn, method, formData, dataType,token) {
	method = method || 'GET';
	method = method.toUpperCase();
	dataType = dataType || 'json';
	var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

	xhr.open(method, url, true);
	//请求头必须在open之后设置
	if(token) xhr.setRequestHeader("Authorization","Bearer "+token);
	xhr.onreadystatechange = function () {
		if (xhr.readyState == 4 && xhr.status == 200) {
			if (fn) {
				var data = _trim(xhr.responseText);
				if (dataType == 'json') {
					data = _json(data);
				}
				fn(data);
			}
		}
	};
	if (method == 'POST') {
		xhr.send(formData);
	} else {
		xhr.send(null);
	}
}

2.修改image、flash、media、file插件，修改dialog组件的yesBtn的click方法，将其中的上传文件代码即uploadbutton.submit();改为调用1中的_ajax方法。注意：每个插件原理相同，代码略有不同。

//提交上传表单
						//uploadbutton.submit();

						var formData = new FormData();
						var file = document.getElementsByClassName("ke-upload-file");
						formData.append(filePostName, file[0].files[0]);
						for(var k in extraParams){
							formData.append(K,extraParams[k]);
						}
						K.ajax(K.addParam(uploadJson, 'dir=image&' + new Date().getTime()), function (data) {
							dialog.hideLoading();
							if (data.error === 0) {
								var url = data.url;
								if (formatUploadUrl) {
									url = K.formatUrl(url, 'absolute');
								}
								if (self.afterUpload) {
									self.afterUpload.call(self, url, data, name);
								}
								if (!fillDescAfterUploadImage) {
									clickFn.call(self, url, data.title, data.width, data.height, data.border, data.align);
								} else {
									K(".ke-dialog-row #remoteUrl", div).val(url);
									K(".ke-tabs-li", div)[0].click();
									K(".ke-refresh-btn", div).click();
								}
							} else {
								alert(data.message);
							}
						}, "post", formData,null, self.token);

3.修改filemanager插件，修改reloadPage方法，调用_ajax方法的参数进行调整，代码如下

K.ajax(K.addParam(fileManagerJson, param + '&' + new Date().getTime()), function (data) {
				dialog.hideLoading();
				func(data);
			}, null, null, null, self.token);

五、.net core 接口，接口代码请根据自己系统进行修改，只需要注意返回的json格式要跟kindeditor处理方法对应。

/// <summary>
        /// 上传文件（kindeditor）
        /// </summary>
        /// <param name="dir"></param>
        /// <param name="imgFile"></param>
        /// <returns></returns>
        [HttpPost]
        //[AllowAnonymous]
        public async Task<IActionResult> UploadDocument([FromQuery(Name = "dir")] string dir, [FromForm] IFormFile imgFile)
        {
            var req = Request;

            if (String.IsNullOrEmpty(dir))
            {
                return new JsonResult(new { error = 1, message = "目录名不正确。" });
            }
            var _config = _uploadConfig[dir];
            if (_config == null)
            {
                return new JsonResult(new { error = 1, message = "目录名不正确。" });
            }

            var date = DateTime.Today.ToString("yyyyMMdd");

            if (imgFile == null || imgFile.Length < 1)
            {
                return new JsonResult(new { error = 1, message = "请上传文件！" });
            }

            //格式限制
            //var extentions = ((string)extTable[dir]).Split(',').ToList();
            //String fileExt = Path.GetExtension(imgFile.FileName).ToLower();
            //if (fileExt.Length > 0)
            //    fileExt = fileExt.Substring(fileExt.IndexOf('.') + 1);
            if (!_config.ContentType.Contains(imgFile.ContentType))
            {
                return new JsonResult(new { error = 1, message = "文件格式错误！" });
            }

            //大小限制
            if (!(imgFile.Length <= _config.MaxSize))
            {
                return new JsonResult(new { error = 1, message = "文件过大！" });
            }

            var fileInfo = new ZzwIot.Core.Common.Files.FileInfo(imgFile.FileName, imgFile.Length)
            {
                UploadPath = _config.UploadPath + "/",
                RequestPath = _config.RequestPath + "/"
            };

            var dateTimeFormat = _config.DateTimeFormat.NotNull() ? DateTime.Now.ToString(_config.DateTimeFormat) : "";
            var format = _config.Format.NotNull() ? StringHelper.Format(_config.Format, new { Id = date }) : "";
            fileInfo.RelativePath = Path.Combine(dateTimeFormat, format).ToPath();

            if (!Directory.Exists(fileInfo.FileDirectory))
            {
                Directory.CreateDirectory(fileInfo.FileDirectory);
            }

            fileInfo.SaveName = $"{IdWorkerHelper.GenId64()}.{fileInfo.Extension}";

            await _uploadHelper.SaveAsync(imgFile, fileInfo.FilePath);

            Hashtable hash = new Hashtable();
            hash["error"] = 0;
            hash["url"] = fileInfo.RequestPath + fileInfo.FileRelativePath;

            return new JsonResult(hash);
        }

        /// <summary>
        /// 文件管理（kindeditor）
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        //[AllowAnonymous]
        public IActionResult FileManager([FromQuery(Name = "dir")] string dir,
            [FromQuery(Name = "path")] string path,
            [FromQuery(Name = "order")] string order
          )
        {
            var config = _uploadConfig[dir];
            if (config == null)
            {
                return Content("目录错误");
            }

            String rootUrl = config.RequestPath + "/";


            //图片扩展名
            //String photoTypes = "gif,jpg,jpeg,png,bmp";

            String currentPath = "";
            String currentUrl = "";
            String currentDirPath = "";
            String moveupDirPath = "";

            String dirPath = config.UploadPath + "/";

            if (!Directory.Exists(dirPath))
            {
                Directory.CreateDirectory(dirPath);
            }

            //根据path参数，设置各路径和URL
            path = String.IsNullOrEmpty(path) ? "" : path;
            if (path == "")
            {
                currentPath = dirPath;
                currentUrl = rootUrl;
                currentDirPath = "";
                moveupDirPath = "";
            }
            else
            {
                currentPath = dirPath + path;
                currentUrl = rootUrl + path;
                currentDirPath = path;
                moveupDirPath = Regex.Replace(currentDirPath, @"(.*?)[^\/]+\/$", "$1");
            }

            //排序形式，name or size or type

            order = String.IsNullOrEmpty(order) ? "" : order.ToLower();

            //不允许使用..移动到上一级目录
            if (Regex.IsMatch(path, @"\.\."))
            {
                return Content("拒绝访问。");
            }
            //最后一个字符不是/
            if (path != "" && !path.EndsWith("/"))
            {
                return Content("Path无效。");
            }
            //目录不存在或不是目录
            if (!Directory.Exists(currentPath))
            {
                return Content("目录不存在。");
            }

            //遍历目录取得文件信息
            string[] dirList = Directory.GetDirectories(currentPath);
            string[] fileList = Directory.GetFiles(currentPath);

            switch (order)
            {
                case "size":
                    Array.Sort(dirList, new NameSorter());
                    Array.Sort(fileList, new SizeSorter());
                    break;
                case "type":
                    Array.Sort(dirList, new NameSorter());
                    Array.Sort(fileList, new TypeSorter());
                    break;
                case "name":
                default:
                    Array.Sort(dirList, new NameSorter());
                    Array.Sort(fileList, new NameSorter());
                    break;
            }

            Hashtable result = new Hashtable();
            result["moveup_dir_path"] = moveupDirPath;
            result["current_dir_path"] = currentDirPath;
            result["current_url"] = currentUrl;
            result["total_count"] = dirList.Length + fileList.Length;
            List<Hashtable> dirFileList = new List<Hashtable>();
            result["file_list"] = dirFileList;
            for (int i = 0; i < dirList.Length; i++)
            {
                DirectoryInfo directory = new DirectoryInfo(dirList[i]);
                Hashtable hash = new Hashtable();
                hash["is_dir"] = true;
                hash["has_file"] = (directory.GetFileSystemInfos().Length > 0);
                hash["filesize"] = 0;
                hash["is_photo"] = false;
                hash["filetype"] = "";
                hash["filename"] = directory.Name;
                hash["datetime"] = directory.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");
                dirFileList.Add(hash);
            }
            var photoTypes = "png,gif,jpg,jpeg,bmp";
            for (int i = 0; i < fileList.Length; i++)
            {
                FileInfo file = new FileInfo(fileList[i]);
                Hashtable hash = new Hashtable();
                hash["is_dir"] = false;
                hash["has_file"] = false;
                hash["filesize"] = file.Length;
                hash["is_photo"] = (Array.IndexOf(photoTypes.Split(','), file.Extension.Substring(1).ToLower()) >= 0);
                hash["filetype"] = file.Extension.Substring(1);
                hash["filename"] = file.Name;
                hash["datetime"] = file.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");
                dirFileList.Add(hash);
            }
            return new JsonResult(result);
        }

六、vue-kind-editor调用

import KindEditor from "@/components/vue-kind-editor";

<kind-editor :content.sync="addForm.content" id="kind-editor" />

bian2021
关注
vue3-kind-editor:基于KindEditor富文本编辑器，用于Vue3.x的组件
qq_27936291的博客
05-14 2352
这个组件的核心来自KindEditor，是在KindEditor基础上封装的，如果想了解更多配置，你可以查看KindEditor相关配置，在vue结构上增加.
Vue 手把手教你使用 kindeditor
leleshuo
07-03 8190
Vue 手把手教你使用 kindeditor
如何在Vue中使用Kindeditor实现WORD图片一键转存？
2501_90699850的博客
02-22 840
要求：开源，免费，技术支持编辑器：KindEditor需求：从word复制粘贴内容和图片,web截屏前端：vue2,vue3,react,vue-cli,html5,后端：java,jsp,springboot,asp.net,php,asp,.net core,.net mvc,.net form平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,信创国产化操作系统。
vue集成kindeditor富文本的实现示例代码
10-16
主要介绍了vue集成kindeditor富文本的实现示例代码，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
.net core 富文本例子
01-11
.net core 完美运行 UEditor 1.4.3 例子.有uditor.json配置.直接可以用和运行.可以保存图片和文件.直接拿来就可以使用.
改造kindeditor支持asp.net core mvc上传文件
FG7313的博客
09-28 285
kindtor默认使用的上传方法是使用目录下面的一般处理程序upload_json.ashx，暂时还不支持asp.net core下的文件上传，下面放出的自定义处理上传文件的接口方法。 自定义接收上传文件的action替换一般处理程序 代码如下： public class FileController : Controller { private r...
快速了解如何在.NETCORE中使用Generic-Host建立主机
08-19
使用Generic-Host建立主机在.NETCORE中 在.NETCORE中，Generic-Host是一个非常重要的组件，它可以帮助我们快速建立一个主机，从而实现各种后台任务和服务。下面，我们将详细介绍如何在.NETCORE中使用Generic-Host...
使用MediaTR教程在.NETCore中实现CQRS-C#-Dockerfile-下载
03-15
(更多详情、使用方法，请下载后细读README.md文件) "带 MediaTR 的 CQRS 阅读我的教程： 第 1 部分： medium.@ducmeitnet-core-using-cqrs-pattern-with-mediatr-part-1-55557e90931b 第 2 部分： medium.@...
aspose.word .net +.netcore 版本可用
04-08
Aspose.Word是一款强大的文档处理库，它允许开发者在.NET和.NET Core平台上创建、编辑、转换以及操作Microsoft Word文档。这个工具对于那些希望在应用程序中处理Word文档，而又不依赖Microsoft Office的开发人员来说...
Vue + .NetCore前后端分离，不一样的快速发开框架(提供Vue2/Vue3版本)
10-27
Vue + .NetCore前后端分离，不一样的快速发开框架(提供Vue2/Vue3版本)。快速开发(基础功能全部由代码生成器生成)。支持前端、后台自定义业务代码扩展,后台提供了大量常用扩展与通用类。前端、后台提供了近300个扩展...
Vue + .NetCore前后端分离，不一样的快速发开框架
04-04
Vue + .NetCore前后端分离，不一样的快速发开框架(提供Vue2/Vue3版本)框架核心快速开发(基础功能全部由代码生成器生成)支持前端、后台自定义业务代码扩展,后台提供了大量常用扩展与通用类前端、后台提供了近300个...
kind editor学习
04-11
NULL 博文链接：https://lx13345.iteye.com/blog/1688374
kindeditor-all.js
10-10
kindeditor改造支持上传图片，修复iframe跨域出现的问题,，提供给用户进行下载，防止用户以为使用了kindEditor造成的图片上传不了，发生报错
vuehtmleditor实现HTML编辑器的Vuejs组件
08-09
vue-html-editor：实现HTML编辑器的Vue.js组件
在Vue项目中使用kindEditor编译器
热门推荐
skey_wang的前端之路
01-02 1万+
kingEditor官网地址：http://kindeditor.net/demo.php 里面有大量的demo，可根据需求自行选择。 我在项目中选用kindEditor是因为它的体积比较小（2M多）。(Ueditor编译器7M多) 在项目中写入：html<textarea id="content2" name="content" style="width:700px;height:350p
在.net core的web项目中使用kindeditor
09-21 279
本项目是一个.net core的mvc项目 1.下载kindeditor 4.1.11 解压后将文件夹置于 wwwroot目录下，如图: 2.在HomeController的Index控制器对应的index视图输入一下代码: @{ Layout = null; } <!DOCTYPE html> <html> <head&gt...
vue-kindeditor 安装和解决问题
张小胖
05-30 2089
1、kindeditor 安装 与 使用 2、kindeditor 光标下插入内容 3、kindeditor 上传图片和视频
Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传（开源代码.net core3.0）
Unknowncheats的博客
05-12 767
KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。 然而很多人缺为在Asp.Net Core中的使用在发愁，于是这个开源Demo就这样产生了，那么我现在给各位介绍下它的快速使用吧！ 一、前端配置 1...
io.lettuce.core.RedisCommandExecutionException: WRONGTYPE Operation against a key holding the wrong kind of value解析
最新发布
04-13
<think>好的，我现在要解决用户遇到的Redis WRONGTYPE错误。首先，我需要理解这个错误的原因。根据用户提供的引用内容，这个错误通常是因为对某个键执行了不兼容的操作类型。比如，用户试图用HashOperations操作一个原本是字符串类型的键，导致类型不匹配。 接下来，我应该逐步分析解决步骤。首先，确认错误的具体原因。用户提到使用type命令查看键的类型，发现是字符串而不是哈希，所以无法进行哈希操作。这说明键已经存在，并且类型不符。因此，解决方案可能包括检查键类型、删除或重命名现有键，或者确保操作类型正确。 然后，我需要考虑如何将这些步骤具体化，让用户能够一步步操作。比如，使用Redis命令检查键的类型，删除旧键，或者修改代码中的键名。同时，用户可能还需要预防措施，比如在操作前检查键是否存在及其类型，或者使用不同的键名避免冲突。 还需要注意用户可能的代码示例，比如他们可能使用了错误的操作，如hashOperations.put("user", "name", "zhangsan")，而"user"键已经是字符串类型。这时候建议他们改用字符串操作，或者删除该键后重新作为哈希使用。 此外，用户可能想知道如何避免未来出现类似问题，所以需要提供预防措施，如键名前缀、类型检查等。需要确保解决方案全面，覆盖根本原因、具体步骤和预防方法。 最后，要确保回答结构清晰，分点说明，让用户容易理解和操作。同时，引用提供的参考资料，特别是引用[3]中的详细解释，来支持解决方案的正确性。</think>### 解决方案：Redis出现WRONGTYPE错误的处理方法 #### 错误原因分析 当Redis返回`WRONGTYPE Operation against a key holding the wrong kind of value`错误时，表示**尝试对已存在的键执行了与其数据类型不兼容的操作**。例如： 1. 对一个存储为字符串（String）类型的键使用哈希（Hash）操作命令[^3]； 2. 对列表（List）类型的键使用集合（Set）操作命令。 #### 解决步骤 1. **确认键的当前类型** 使用`TYPE`命令检查目标键的数据类型： ```bash TYPE your_key # 例如 TYPE user ``` 若返回`string`，但代码中使用了哈希操作，则类型冲突。 2. **处理冲突键** - **方案1：删除旧键（推荐）** 若旧数据可清除，直接删除后重新操作： ```bash DEL your_key # 例如 DEL user ``` - **方案2：使用新键名** 修改代码中的键名，避免冲突： ```java hashOperations.put("new_user", "name", "zhangsan"); // 修改键名为new_user[^3] ``` 3. **验证修复结果** 重新执行操作后，使用`HGETALL`命令检查哈希数据： ```bash HGETALL new_user # 应返回字段name的值"zhangsan" ``` #### 代码修正示例 原始错误代码： ```java HashOperations hashOperations = redisTemplate.opsForHash(); hashOperations.put("user", "name", "zhangsan"); // 假设"user"键已存在且为String类型 ``` 修正后代码： ```java // 方法1：删除旧键后操作 redisTemplate.delete("user"); // 显式删除旧键 hashOperations.put("user", "name", "zhangsan"); // 方法2：改用新键名 hashOperations.put("user_profile", "name", "zhangsan"); // 避免键名冲突[^3] ``` #### 预防措施 1. **操作前检查键类型** 通过`TYPE`命令或程序逻辑判断键是否存在及类型： ```java if (redisTemplate.hasKey("user")) { DataType type = redisTemplate.type("user"); if (type != DataType.HASH) { redisTemplate.delete("user"); } } ``` 2. **规范键名设计** 使用前缀区分数据类型，例如： - `string:user` 表示字符串类型 - `hash:user` 表示哈希类型 3. **隔离不同业务数据** 通过命名空间（如`业务模块:数据类型:ID`）减少键名冲突概率，例如：`order:hash:1001`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值