CFEditor -- ClassFoo 在线编辑器示例

这是 ClassFoo 全站所使用的所见即所得(WYSIWYG)富编辑器(Rich Editor),其使用 BootStrap 3.x 样式。

开源 GitHub:https://github.com/ethan-chan/CFEditor

在当前编辑器样例中,您可以随意修改

查看最终效果(及评论)

欢迎加群:294782186(Bootstrap、JQuery、HTML5、CSS3)。


感谢使用 ClassFoo 站内编辑器分享知识

本文主要介绍 CFEditor 富编辑器的特点,同时展示了其具体编辑效果。

CFEditor 1.0 基于 

   等数款插件打造)

关键字CFEditor 编辑器 Editor 刚起步 努力做最好 IE8


在线示例(可任意编辑)

在线示例效果


轻巧

基于 HTML5(HyperText Mark-up Language 5) ,在未对代码进行针对大小优化的情况下,仍远小于传统编辑器。其优先使用浏览器特性,而非采用其它不得已的模拟方法实现,以保留体验及性能。

传统编辑器为支持所有浏览而不得不做出这种选择,而 CFEditor 不支持 IE5\6\7Life is more easier
注意 这里插播一条无用信息。


兼容

最低支持 IE8,足以覆盖使用群体。


跨平台

生成结果跨平台。即使用 CFEditor 编辑成生的一份内容可以同时正常显示于 PCphonepad 及其它阅读设备。


功能完整

覆盖常用编辑功能,同时增加独有效果,未来支持更复杂的内容展示形式。


安全

沙盒执行,保证绝对安全的编辑环境,且处理脏标签脏样式,清除所有 Javascript 脚本。

下面的代码 CFEditor 会帮您直接过滤掉。

<script type="text/javascript">
console.log('我是一段小代码,进来就被打\n');  // God bless,you can't find me.
</script>

如果您在其它地方执行它,会返回:

我是一段小代码,进来就被打


支持 MarkDown

是的,您没看错,CFEditor 生成的内容可以直接转换成极为干净MarkDown 格式:

> ## This is a header.
> 
> 1.   This is the first list item.
> 2.   This is the second list item.
> 
> Here's some example code:
> 
>     return shell_exec("echo $input | $markdown_script");


支持换肤

编辑器中提供的样式全部由 Bootstrap 提供,而其在网上有大量的皮肤可供下载。

CFEditor 未直接提供字体颜色修改,除了保证页面整洁外,上述也是重要原因。