项目页面集成ckeditor富文本编辑器
步骤一、引入ckeditor.js （注：本实例以ThinkPHP3.2框架为载体，不熟悉ThinkPHP的朋友请自行补习，ckeditor文件代码内容也请去ckeditor官网自行下载）
作为程序员话不多说直接上代码！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>史亚运的主页</title>
<script src="__PUBLIC__/Plugin/ckeditor/ckeditor.js"></script>
</head>
步骤二、在<textarea>标签中加上名为ckeditor的类选择器来显示ckeditor富文本编辑器
<li> <labe>留言：</labe> <textarea id="TextAreal" class="form-control ckeditor" name="post-message" rows="5" cols="100"> </textarea> <span style="color:red;">必选</span> </li>
效果如下：
步骤三、获取富文本编辑器中的内容（以下javascript代码建议写在页面底部）
<script type="text/javascript">
var ckeditor = CKEDITOR.replace('TextAreal');//获取富文本对象，TextAreal为<textarea>属性id的值
function postMessage(){
var name = $("input[name='name']").val()?$("input[name='name']").val():'';
//var message = ckeditor.document.getBody().getText();//获取ckeditor富文本编辑器中所有的文本内容
var message = ckeditor.document.getBody().getHtml();//获取ckeditor富文本编辑器中的包含标签和文本的所有内容
if(!message){
return false;
}
$.ajax({
type:"POST",
url:"<{:U('Message/add')}>",
data:{"message":message,"name":name},
dataType:"json",
success:function(result){
if(result.res){
alert('留言成功');
$("textarea[name='post-message']").val('');
$("input[name='name']").val()?$("input[name='name']").val(''):'';
}else{
alert('留言失败');
}
}
});
}
</script>
至此ckeditor富文本编辑器已成功集成到项目页面中。
项目页面集成ckeditor富文本编辑器的更多相关文章
- day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器
目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...
- django中ckeditor富文本编辑器使用
1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...
- CKEditor富文本编辑器
CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...
- 搭建自己的博客（十三）：为博客后台添加ckeditor富文本编辑器
使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...
- vue集成ckeditor富文本框，怎么获取CKEditor实例？
CKEDITOR 版本5 ,vue集成形式 vue集成ckeditor富文本框,由于不是通过js创建的富文本对象,所以,无法取得实例对象,官方说明 官方在builds-->Getting and ...
- vue集成百度富文本编辑器
1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...
- 在java项目中加入百度富文本编辑器
富文本编辑器在项目中很常见,他可以将文本,图片等信息存入数据库,在编辑一些图文混排的信息的时候很有用,比如商城项目的商品详情页,包含很多带有样式的文字和图片. 此前一直使用的百度的富文本编辑器uedi ...
- 在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
- django2集成DjangoUeditor富文本编辑器
富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...
随机推荐
- 37）PHP,获取数据库数据并在html中显示（晋级4）
我的php文件和html文件的位置关系: 然后我的主php文件是b.php,我的那个配置文件是BBB.php,我的html文件是login.html 然后我的b.php代码展示: <?php c ...
- 002.前端开发知识，前端基础HTML（2020-01-07）
一.列表标签 1.无序列表 ul <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</l ...
- Nesterov方法的python实现
牛顿动量法,相比于上一篇Momentum,不一样的地方是应用了临时更新 这里用python对其进行简单实现,如下: # coding=utf-8 """ 基于小批量梯度下 ...
- 感觉自己out了
看了公司混乱而落后的框架,想自己开发一个. 无意中到开源网站看到,开源的控件已经非常多了,基本上说应有尽有. 感叹这个知识大爆炸的年代. 自己现在是坐在井底的蛤蟆?
- matplotlib.pyplot.contour 简单等高线绘制
contour(X, Y, Z) X,Y是与Z形状相同的二维数组,可以通过 numpy.meshgrid()创建. numpy.meshgrid()----从坐标向量返回坐标矩阵 生成的x,y坐标矩阵 ...
- Qt QThread必须要了解的几个函数
概述 如果想对Qt中的QThread有个更加深刻的了解,必须要知道这几个重要的函数,现在就一一介绍下. 函数介绍 属性 返回值 函数体 功能 static QThread * QThread::cur ...
- ROC曲线、KS曲线
一.ROC曲线 ROC曲线由混淆矩阵为基础数据生成. 纵坐标:真阳性比率TPR,预测为正占真正为正的比例. 横坐标:假阳性比率FPR,预测为正占真正为负的比例. 除了roc曲线的纵横坐标外,还有一个准 ...
- 如何消除img间的默认间隙
方案一:div{font-size:0};方案二:img{ display:block};方案三:img{vertical-align:top;}方案四:div{ margin-bottom:-3px ...
- cs231n spring 2017 lecture7 Training Neural Networks II
1. 优化: 1.1 随机梯度下降法(Stochasitc Gradient Decent, SGD)的问题: 1)对于condition number(Hessian矩阵最大和最小的奇异值的比值)很 ...
- tomcat部署项目方式
三大部署方式1. Context描述文件部署通过独立的Context文件描述清楚项目的访问路径和地址,tomcat在启动的时候会解析这个Context文件,创建一个Context对象. Conte ...