ckeditor是一款由javascript编写的富文本网页编辑器,它可以填写文字、插入图片、视频、Excel等富媒体信息,也可以在源码方式下填写内容,在各个网站中应用非常广泛。

下面就来说说ckeditor到底是怎么使用的。

方法/步骤

 
  1. 首先百度中输入ckeditor,第一个链接就是它的官网,点击进入。

  2. 点击右侧的download按钮。

  3. 接下来会提示要下载哪种类型的包,建议第三种full package,因为这个全,点击Download CKEditor将它下载下来。

     
  4. 解压下载后的zip包,可以看到它里面有好多的js和css。

  5. 接下来就要进行配置了。

  6. 第一步:将ckeditor整个文件夹放到网站资源目录下,如下图。

  7. 第二步:在要添加ckeditor的网页上加入ckeditor.js,如下图。

  8. 第三步:在要转换成富文本的textarea下方编写js:CKEDITOR.replace('textarea的name'),如下图。

  9. 第四步:打开网站查看效果,如下图。

  10. 这样就简单快捷地实现了网页在线编辑器,不过这个编辑器看上去呆呆的,其实它还可以变得更加漂亮呢,改天再写怎么样让它变得漂亮起来。

ckeditor(在线文本编辑器)使用教程的更多相关文章

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  3. CKEditor富文本编辑器

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

  4. javascript 在线文本编辑器

    javascript 在线文本编辑器实现代码. 效果例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5 ...

  5. 项目页面集成ckeditor富文本编辑器

    步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...

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

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

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

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

  8. $Django 在线文本编辑器skindeditor

    简介 KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富 ...

  9. Django添加ckeditor富文本编辑器

    源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...

  10. 搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器

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

随机推荐

  1. [学习笔记]通过open函数改变标准输出的方法

    int main(void) { char s[] = "abc.txt"; ; close(STDOUT_FILENO);//关闭标准输出文件描述符 int fd1 = open ...

  2. C#实现远程开机(局域网测试通过)

    首先介绍相关知识. UDP协议 UDP 是User Datagram Protocol的简称, 中文名是用户数据报协议,是OSI(Open System Interconnection,开放式系统互联 ...

  3. MVVM模式下WPF动态绑定展示图片

    MVVM模式下WPF动态展示图片,界面选择图标,复制到项目中固定目录下面,保存到数据库的是相对路径,再次读取的时候是根据数据库的相对路径去获取项目中绝对路径的图片展示. 首先在ViewModel中 / ...

  4. Java编程思想读书笔记之一切皆对象

    一切皆对象 Java程序运行时,数据保存到哪里 寄存器 这是最快的保存区域,因为它位于和其他所有保存方式不同的地方:处理器内部.然而,寄存器的数量十分有限,所以寄存器是根据需要由编译器分配.我们对此没 ...

  5. Schema技术

    Schema 技术 Schema 是 DTD 的代替者,名称为 XML Schema,用于描述XML 文档结构,即对XML文档做出规范,比 DTD 更加强大,最主要的特征之一就是XML Schema ...

  6. vuejs项目性能优化总结

    在使用elementUI构建公司管理系统时,发现首屏加载时间长,加载的网络资源比较多,对系统的体验性会差一点,而且用webpack打包的vuejs的vendor包会比较大.所以通过搜集网上所有对于vu ...

  7. AJAX使用四步曲

    前言 AJAX这个东西还是很模糊的,下面会对AJAX这个技术进行详细讲解一些,另外,在网上商城中应用到了,使用它有四个步骤,下面详细介绍一些. 内容 定义: AJAX=异步JavaScript和XML ...

  8. 【bzoj3813】: 奇数国 数论-线段树-欧拉函数

    [bzoj3813]: 奇数国 题意:给定一个序列,每个元素可以分解为最小的60个素数的形式.(x=p1^k1*p2^k2*......p60^k60)(p1=2,p2=3,…,p60=281) 支持 ...

  9. uoj#450. 【集训队作业2018】复读机(单位根反演)

    题面 传送门 题解 我的生成函数和单位根反演的芝士都一塌糊涂啊-- \(d=1\),答案就是\(k^n\)(因为这里\(k\)个复读机互不相同,就是说有标号) \(d=2\),我们考虑复读机的生成函数 ...

  10. Cannot find module 'webpack/bin/config-yargs'

    1.版本不兼容 npm install webpack-dev-server@1.15.0 -g