向页面添加富文本编辑器

首先添加一个textarea:

1 <tbody id="tab_3" style="display: none">
2                 <tr>
3                     <td >
4                         <textarea rows="20" cols="180" id="productdesc" name="description"></textarea>
5                     </td>
6                 </tr>
7             </tbody>

添加js代码:

 1 if(ref == ‘#tab_3‘){
 2                 // 编辑器参数
 3                  var kingEditorParams = {
 4                     //指定上传文件参数名称
 5                     filePostName  : "uploadFile",
 6                     //指定上传文件请求的url。
 7                     uploadJson : ‘/upload/uploadFck.do‘,
 8                     //上传类型,分别为image、flash、media、file
 9                     dir : "image"//,
10 //                     width : ‘1000px‘,
11 //                     height : ‘400px‘
12                 };
13                 KindEditor.create(‘#productdesc‘,kingEditorParams);
14                 KindEditor.sync();
15             }

库的引用:

时间: 2024-11-06 15:22:23

向页面添加富文本编辑器的相关文章

django 开发之给admin 模块添加富文本编辑器

第一步下载kindeditor  http://kindeditor.net/demo.php 下载下来后放到静态文件static 下面的js下面 接着在admin 模块文章类下引入这富文本编辑器: class ArticleAdmin(admin.ModelAdmin): 下面 接着添加一个文件名字为config.js  添加一些配置

BBS第四天之文章详情,点赞点踩,根子评论,后台展示,文章添加(富文本编辑器)

一.文章详情 路由url.py: url(r'^(?P<username>\w+)/article/(?P<pk>\d+)$', views.article_detail), 点击个人站点文章title即可关联到文章详情路由找到其视图函数 views.py: def article_detail(request,username,pk): user = models.UserInfo.objects.filter(username=username).first() if not

万里长征第二步——django个人博客(第六步 ——添加富文本编辑器)

下载kindeditor 在admin.py文件中配置链接 class Media: js = ( '/static/js/kindeditor-4.1.10/kindeditor-min.js', #引入主文件 '/static/js/kindeditor-4.1.10/lang/zh_CN.js', #引入中文文件 '/static/js/kindeditor-4.1.10/config.js', #引入配置文件 ) 在kindeditor根目录下创建配置文件config.js,,并配置 K

Django中添加富文本编辑器

使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目的urls.py文件中 INSTALLED_APPS = [ ... 'ckeditor' ] urlpatterns = [ ... url(r'^ckeditor/', include('ckeditor_uploader.urls')),] 3.在models.py文件中使用ckeditor的

富文本编辑器的使用

第一步: 添加富文本编辑器的js的引用: 第二步:在jsp中添加textarea域,因为富文本编辑器是基于这个域进行创建的 第三步:富文本编辑器的引用 第四步:提交表单前需要将富文本编辑器和texarea的内容同步

给web项目整合富文本编辑器

给jsp页面整合富文本编辑器下载--删除多余的组件--加入到项目中--参照案例来完成整合步骤:1. 解压zip文件,将所有文件复制到Tomcat的webapps/kindeditor目录下. 2. 将kindeditor/jsp/lib目录下的3个jar文件复制到Tomcat的lib目录下,并重新启动Tomcat. * commons-fileupload-1.2.1.jar * commons-io-1.4.jar * json_simple-1.1.jar以下用我下载的副文本编辑器为例3.把

ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: 1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width&qu

BBS(仿博客园系统)项目05(后台管理功能实现:文章添加、富文本编辑器使用、xss攻击、BeautifulSoup4模块、富文本编辑器上传图片、修改头像)

摘要 布局框架搭建 随笔添加 后台管理富文本编辑器KindEditor xss攻击 文章简介的截取,BeautifulSoup4模块 富文本编辑器上传图片 头像修改 一.后台管理框架布局搭建 后台管理布局框架分析:导航条.左侧功能区.右侧主要功能显示和实现区 实现: 导航条:使用bootstrap模板:JavaScript>>导航条 左侧:使用bootstrap模板:组件>>列表组 右侧:使用bootstrap模板:JavaScript>>标签页 新建后台管理路由(注意

Ueditor百度富文本编辑器添加h5手机端预览功能

一.需求分析 项目中用到富文本编辑器的地方很多,富文本编辑器一般都是在pc后台上,因为前端是手机端,因此每次再富文本编辑内容保存以后,在手机端展示的样式和我们在富文本中编辑的不太一样,因此就需要在编写完内容之后可以模拟手机端进行预览一下,但是后端用富文本编辑器的地方比较多,不适合在每个页面进行开发,因此做成插件功能放入ueditor之中的方式改动的代价比较小. 首先看下效果 二.代码 先在ueditor.css中添加按钮样式图片: 路径:ueditor\themes\default\css\ue