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:
- <linkrel="stylesheet"href="~/Content/Scripts/kindeditor/themes/default/default.css"/>
- <scriptcharset="utf-8"src="~/Content/Scripts/kindeditor/kindeditor.js"></script
- <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:
- <textareastyle="width:300px;height:30px;"id="PRODUCTDESCRIPTION"name="PRODUCTDESCRIPTION"/>
3. Specify the association when the interface is loaded, as follows:
- <script type="text/javascript">
- $(function(){
- window.editor = KindEditor.create('#PRODUCTDESCRIPTION', {
- resizeType: 1,
- width: '500px',minWidth:'490px',height:'50px',
- urlType: 'domain', // 带有域名的绝对路径
- allowFileManager: false,
- items: ['source', 'undo', 'redo', 'wordpaste', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'formatblock', 'fontname', 'fontsize', 'forecolor', 'bold', 'italic', 'table', 'link', 'unlink', 'image']
- });
- });
- </script>
4、对于具体的KindEditor控件的各参数与属性说明可以参考该控件的官方网站说明即可。
相关文章：
RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录
RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍
一路走来数个年头，感谢RDIFramework.NET框架的支持者与使用者，大家可以通过下面的地址了解详情。
RDIFramework.net官方网站：http://www.rdiframework.net/
RDIFramework.Net官方博客：http://blog.rdiframework.net/
同时需要说明的，以后的所有技术文章以官方网站为准，欢迎大家收藏！
RDIFramework.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
