.NET rapid information system development framework V3.2->Web version "Product Management" case editing interface adds KindEditor multi-text editing control

  KindEditor is a set of open source HTML visual editors, mainly used to allow users to obtain WYSIWYG editing effects on websites, and is compatible with mainstream browsers such as IE, Firefox, Chrome, Safari, and Opera. KindEditor is written in JavaScript and can be seamlessly integrated with Java, .NET, PHP, ASP and other programs. KindEditor is very suitable for use in Internet applications such as CMS, shopping malls, forums, blogs, Wikis, emails, etc. Since the first release of 2.0 in July 2006, KindEditor has continuously expanded its editor market share by virtue of its excellent user experience and leading technology. It has become one of the most popular editors in China.

  We often need the support of rich text boxes in the beginning process. According to the needs of some customers, we have added support for KindEditor rich text box controls in the case module "Product Management". The download address of the KindEditor rich text box control is at the end of the article, and users who need it can download it.

  The main interface of product management is shown in the following figure: 

  Click the Edit button on the main product management interface to open the product editing interface. We use the KindEditor control in the description field of the editing interface, as shown in the following figure:

  The usage method is shown in the following code:

  1. Refer to the relevant css and js of the KindEditor control to the interface, as follows:


[html]  view plain copy  
  1. <linkrel="stylesheet"href="~/Content/Scripts/kindeditor/themes/default/default.css"/>     
  2. <scriptcharset="utf-8"src="~/Content/Scripts/kindeditor/kindeditor.js"></script    
  3. <scriptcharset="utf-8"src="~/Content/Scripts/kindeditor/lang/zh_CN.js"></script>      


2. Define the html control that needs to be set as the KindEditor control, as follows:


[html]  view plain copy  
  1. <textareastyle="width:300px;height:30px;"id="PRODUCTDESCRIPTION"name="PRODUCTDESCRIPTION"/>        


3. Specify the association when the interface is loaded, as follows: 


[javascript]  view plain  copy
  1. <script type="text/javascript">  
  2.         $(function(){  
  3.                 window.editor = KindEditor.create('#PRODUCTDESCRIPTION', {  
  4.                 resizeType: 1,  
  5.                 width: '500px',minWidth:'490px',height:'50px',  
  6.                 urlType: 'domain'// 带有域名的绝对路径  
  7.                 allowFileManager: false,  
  8.                 items: ['source''undo''redo''wordpaste''justifyleft''justifycenter''justifyright''insertorderedlist''formatblock''fontname''fontsize''forecolor''bold''italic''table''link''unlink''image']  
  9.             });  
  10.         });     
  11. </script>     








     RDIFramework 平台代码生成器V3.2 发布版 

   RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录  

   RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍 







Welcome to the official public WeChat of  RDIFramework .net framework ( WeChat : rdiframework-net ) to keep abreast of the latest developments.

   Scan the QR code to follow immediately



Guess you like