描述  在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

效果图

  

posted on 2016-08-11 18:01  墨造梦人  阅读(1369)  评论(0编辑  收藏  举报