步骤一、引入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富文本编辑器的更多相关文章

  1. day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器

    目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...

  2. django中ckeditor富文本编辑器使用

    1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...

  3. CKEditor富文本编辑器

    CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...

  4. 搭建自己的博客（十三）：为博客后台添加ckeditor富文本编辑器

    使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...

  5. vue集成ckeditor富文本框，怎么获取CKEditor实例？

    CKEDITOR 版本5 ,vue集成形式 vue集成ckeditor富文本框,由于不是通过js创建的富文本对象,所以,无法取得实例对象,官方说明 官方在builds-->Getting and ...

  6. vue集成百度富文本编辑器

    1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...

  7. 在java项目中加入百度富文本编辑器

    富文本编辑器在项目中很常见,他可以将文本,图片等信息存入数据库,在编辑一些图文混排的信息的时候很有用,比如商城项目的商品详情页,包含很多带有样式的文字和图片. 此前一直使用的百度的富文本编辑器uedi ...

  8. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  9. django2集成DjangoUeditor富文本编辑器

    富文本编辑器,在web开发中可以说是不可缺少的.django并没有自带富文本编辑器,因此我们需要自己集成,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor封装了我们需要的一 ...

随机推荐

  1. 2019-2020-1 20199324《Linux内核原理与分析》第三周作业

    第二章 操作系统是如何工作的 一.知识点总结 1.计算机的三个法宝 存储程序计算机 函数调用堆栈机制.堆栈:是C语言程序运行时必须使用的记录函数调用路径和参数存储的空间. 中断 2.堆栈相关的寄存器和 ...

  2. 线性反馈移位寄存器（LFSR）-非线性反馈移位寄存器的verilog实现（产生伪随机数）

    一.线性反馈移位寄存器(LFSR) 通过对事先选定的种子做运算使得人工生成的伪随机序列的过程,在实际中,随机种子的选择决定了输出的伪随机序列的不同,也就是说随机种子的选择至关重要. 产生伪随机数的方法 ...

  3. [LC] 285. Inorder Successor in BST

    Given a binary search tree and a node in it, find the in-order successor of that node in the BST. Th ...

  4. 吴裕雄--天生自然python学习笔记：python 创建和操作Firebase实时数据库

    Fire base 是专为移动开发提供的后端服务平台, Firebase 数据库与传统数据库不同,它不是用数据表来存储数据, 而是用 Key . Value 的字典型结构来存储数据,所以它不仅 是轻量 ...

  5. c# winForm 将窗体状态栏StatusStrip 分成左中右三部分 右边显示当前时间

    实现效果:通过StatusStrip显示窗体状态栏同时将状态栏分成三部分居左边显示相关文字信息中间空白显示居右边显示时间信息 1.创建窗体及添加StatusStrip  默认StatusStrip名称 ...

  6. descriptive statistics|inferential statistics|Observational Studies| Designed Experiments

    descriptive statistics:组织和总结信息,为自身(可以是population也可以是sample)审视和探索, inferential statistics.从sample中推论p ...

  7. python学习笔记（17）urllib.parse模块使用

    url.parse :定义了url的标准接口,实现url的各种抽取 parse模块的使用:url的解析,合并,编码,解码 使用时需导入 from urllib import parse urlpars ...

  8. python+selenium自动化测试之登录

    selenium_login.py import unittest from selenium import webdriver class LoginTest(unittest.TestCase): ...

  9. 吴裕雄--天生自然python学习笔记：python文档操作批量替换 Word 文件中的文字

    我们经常会遇到在不同的 Word 文件中的需要做相同的文字替换,若是一个一个 文件操作,会花费大量时间 . 本节案例可以找出指定目录中的所有 Word 文件(包含 子目录),并对每一个文件进行指定的文 ...

  10. windows下redis的配置和jedis api的最基本的使用

    redis的安装直接跳过 1.注册redis服务 在DOM窗口下,进入redis的安装目录(可以先进入安装目录,然后shift+右键,选择在此处打开powershell窗口), 输入命令: redis ...