描述  在html页面实现像word一样的编辑功能(可视化HTML编辑器)

解决方法

  ckeditor插件官方网站 http://ckeditor.com/

使用

  1:去官方下载ckeditor插件,添加到项目

    

  2:在页面<head>中引入ckeditor核心文件ckeditor.js

    <script type="text/javascript" src="script/ckeditor/ckeditor.js"></script>

  3:在使用编辑器的地方插入HTML控件<textarea>

    <textarea id="idckeditor" class="ckeditor"></textarea>

  4:将相应的控件替换成编辑器代码

   <script type="text/javascript"> CKEDITOR.replace('idckeditor');</script>

配置属性

  ckeditor的配置都集中在 ckeditor/config.js 文件中

  //语言

    config.language = 'zh-cn';

  // 设置宽高

    config.width = 100;

    config.height = 100;

  // 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2'

    config.skin = 'v2';

  // 背景颜色

    config.uiColor = '#FFF';

  // 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js

    config.toolbar = 'Basic';

    config.toolbar = 'Full';

  //工具栏是否可以被收缩
    config.toolbarCanCollapse = true;

  //工具栏的位置
    config.toolbarLocation = 'top';//可选:bottom

  //工具栏默认是否展开
    config.toolbarStartupExpanded = true;
  // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
    config.resize_enabled = false;

  //改变大小的最大高度

    config.resize_maxHeight = 3000;

  //改变大小的最大宽度
    config.resize_maxWidth = 3000;

  //改变大小的最小高度
    config.resize_minHeight = 250;

  //改变大小的最小宽度
    config.resize_minWidth = 750;

  // 当提交包含有此编辑器的表单时,是否自动更新元素内的数据
    config.autoUpdateElement = true;

  // 设置是使用绝对目录还是相对目录,为空为相对目录
    config.baseHref = ''
  // 编辑器的z-index值
    config.baseFloatZIndex = 10000;

精简ckeditor

在部署到Web服务器上时,下列文件夹和文件都可以删除:

  /_samples :示例文件夹;

  /_source :未压缩源程序;

  /lang文件夹下除 zh-cn.js、en.js 以外的文件(也可以根据需要保留其他语言文件);

  根目录下的 changes.html(更新列表),install.html(安装指向),license.html(使用许可);

默认样式设置

  ckeditor/style.js 文件中设置默认的样式

参考资料

  http://blog.csdn.net/tfy1332/article/details/22648141

效果图

  

最新文章

  1. MySQL SQL优化之in与range查询【转】
  2. 拖拽改变div的大小
  3. poj 1753 Flip Game 枚举(bfs+状态压缩)
  4. 在CENTOS6上安装MONGODB
  5. ios开发之滑动长图截全屏应用
  6. 获取 Windows 任务栏 Rect
  7. nginx二级域名配置自动跳转到一级域名
  8. zTree-已勾选项id传输到action的解决方案
  9. 爬虫(BeautifulSoup--select--class的选择)
  10. fs.inotify.max_user_watches默认值太小,导致too many open files
  11. echo 与 printf的区别与联系
  12. Python股票分析系列——系列介绍和获取股票数据.p1
  13. Java面试MySQL的一些问题
  14. Java笔记 #05# Java Native Interface
  15. Luogu P4211 [LNOI2014]LCA
  16. Ambertools15安装(详细)
  17. 自然语言交流系统 phxnet团队 创新实训 个人博客 (十)
  18. 【Ctsc2011】幸福路径
  19. 【git2】git+码云+webStrom
  20. PAT 甲级 1151 LCA in a Binary Tree

热门文章

  1. 剖析SSH核心原理(一)
  2. Java数据结构之线性表(2)
  3. Asp.Net BulletedList
  4. Nmap 源代码学习四 软件简单使用
  5. Swift 自己主动引用计数机制ARC
  6. dom4j生成、解析xml
  7. 【JavaScript】谈谈Google Polymer以及Web UI框架的未来
  8. 性能监视器(SSAS)
  9. Can&#39;t find keyplane iOS模拟器键盘不显示解决办法
  10. Jackson学习二之集合类对象与JSON互相转化--转载