kindeditor富文本框使用方法

这周我一共使用了两个文本框编辑器!我的上一篇文档讲的是wangeditor这个编辑器,现在就来讲讲kindeditor这个编辑器!

首先还是去它的官网去下载脚本!

http://kindeditor.net/demo.php

所做的操作和那个wangeditor编辑器差不多都是需要在你的HTML的<body>里面加上下面这段标签:

1   <textarea style="width: 98%;" rows="15" name="Conten" class="input-block-level" id="Contents"></textarea>

这个就只需要在<body>内加上这个代码就好!

接下来就是脚本代码!

 1  (function () {
 2         KindEditor.ready(function (K) {
 3             editor = K.create(‘textarea[id="Contents"]‘, {
 4                 resizeType: 0,
 5                 pasteType: 1,
 6                 filterMode: true,
 7                 newlineTag: ‘br‘,
 8                 useContextmenu: false,
 9                 allowPreviewEmoticons: false,
10                 uploadJson: ‘js/kindeditor/asp.net/upload_json.ashx‘,
11                 fileManagerJson: ‘js/kindeditor/asp.net/file_manager_json.ashx‘,
12                 allowFileManager: true
13             });
14         });

这样它的文本框就被显示出来了,这段话不止有显示,同时也还有图片上传所需要的配置!

至于获取文本框内的内容,网上有很多方法我也试了很多个。下面这个才是没有报错的!

1 editor.sync();
2     var Contents = $("#Contents").val();

接下来就是图片上传的代码了,这个不需要你改动什么!只需要在你把文本框编辑器显示出来的那段脚本里。把路径配置好就没问题了!

下面这个图片是我项目里路径的位置!

接下来你就什么都不需要做了,他会自己把图片上传给你做好!

只要你在那里配置好了,一般不会出什么问题!如果你运气不好,就比如我就出现问题了。困扰了我一天终于给解决了!

这个问题就是,有时候图片无法上传,有时候又可以。不可以时报的是路径不对,或者是405谓词什么不允许什么的!这个问题经过我的不懈努力终于给解决掉了!

原因是,它的默认配置图片上传是以PHP的形式去上传。而我使用的是ASP.NET,官方文档只是说你要做图片上传只需要在我刚上面写的显示出文本框时的脚本里把路径配置成相应的就行了!

这样做是可以,可它有时候又识别不了你在脚本里所配置的东西!

这样的话你就需要去改动这个东东的源码了!

在下面这个图片里面找到这个路径,找到image.js的脚本文件! 在这个里面做一些改动!

这样这个文本框图片上传的问题就解决了,希望能够帮到你们!

原文地址:https://www.cnblogs.com/Scholars/p/8968956.html

时间: 2024-10-09 21:22:28

kindeditor富文本框使用方法的相关文章

kindeditor富文本框,上传文件后,显示文件名称

kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定之后,内容中显示的只是一串很长的地址,这并不是我们想要的. 更多的时候,我们只是希望它这里能默认显示文件名称,只有在文件说明里,填写了文件名称,在内容里面才会以名称的形式呈现.这个时候,我们就要给它做个小手术,来完善它,下面贴出代码: 1.修改asp.net/upload_json.ashx文件,大

KindEditor富文本框编辑器上传图片功能实现,基于java项目

1. HTML标签与jquery代码 <textarea id="editor_id" style="width: 200px; height: 200px;"></textarea> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/java

Ext.net里面放置KindEditor富文本框(解决KindEditor不显示和后台取不到值的问题)

上周六,从上午10点到晚上12点终于搞定了Ext.net与KindEditor的兼容性问题.对于Ext.net的原理,我是菜鸟,表示不懂.我遇到的两个问题是,问题一是不显示KindEditor控件,通过ext:ResourceManager里面的 <DocumentReady Handler="createEditor();" /> 解决了,问题二是KindEditor控件的值传不会后台去,就是在前台也收不到值,但是我通过点击全屏按钮后就可以收到其值了,于是采用<Cl

富文本框KindEditor的使用技巧

富文本框KindEditor的使用技巧 最近在项目中经常遇到使用富文本框的情况,当然我们所接触的富文本.框有很多,我个人还是比较偏向于KE(KindEditor)),用起来比较舒服,但是很多新手在用的时候往往会感到不知所措.总感觉API写了很多但是就是不知道怎么去用,今天我就和大家讲讲KE的使用和基本技巧: 第一步:我们需要到官网上引用相关的资源包,点击进入官网下载资源包 第二步:引用资源文件 如图所示第一个default.css主要是为了修改我们KE的样式,第二个kindeditor-min.

富文本框KindEditor和beautifulsoup4模块

一.富文本框KindEditor 1.官网下载:http://kindeditor.net/down.php 放在项目static/kindeditor/目录下 2.html页面引入kindeditor文件: <script src = "/static/kindeditor/kindeditor-all.js"> </script> <script src="/static/js/jquery-3.2.1.min.js"><

jquery cleditor 光标经常点不进去问题解决方法 bootstrap 富文本框 控件

cleditor 光标点不进去,原因是内嵌的html代码段 body没有赋值默认高度. 解决方法1.赋值options.bodyStyle  设置min-height值.缺点:不能跟随设备更新最低高度. 2.源码代码段850行 '<body style="' + options.bodyStyle + '"></body></html>' 修改为:   '<body style="' + options.bodyStyle + ';m

使用kindeditor获取不到富文本框中的值

获取不到富文本框中的值,网上一搜一堆,但最终没有几个能解决问题的,折腾一番最终解决.注意就是红色代码,加上之后就可以解决问题了. KindEditor.ready(function (K) { var editor1 = K.create('#AContents', { cssPath: '/Content/kindeditor/plugins/code/prettify.css', uploadJson: '/Content/kindeditor/asp.net/upload_json.ash

kindEditor富文本编辑器

用法参考:http://kindeditor.net/docs/usage.html  一.使用 . 修改HTML页面 在需要显示编辑器的位置添加textarea输入框. <textarea id="editor_id" name="content" style="width:700px;height:300px;"> <strong>HTML内容</strong> </textarea> 在该HT

[布局]记录部件字段富文本框如何设置统一高度

在使用快速开发平台构建业务功能中,往往都会用到记录部件,如何布局各个字段位置使用户一目了然,往往就是我们头大的问题.在一个固定大小的窗体下,各个字段的样式都是系统自动默认的,如下图: 此种布局方式真是惨不忍睹,那么如何布局多个富文本字段的位置才能使界面简单明了呢?今天为大家带来记录部件中富文本框(数据表中字段编辑类型word)的布局方法:首先在 空白区域鼠标右键唤出菜单[定制版面],单击进入[记录部件布局定制]模式: 选中富文本字段,鼠标右键点击[创建群组]: 群组创建完成,在顶部空白区域右键唤