`
chennanfei
  • 浏览: 41685 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

修改的Kissy富文本编辑器

IE 
阅读更多
这几天一直在寻找好用的在线富文本编辑器,本人的要求并不要,不需要有太多的功能,找来找去觉得Kissy Editor 更适合自己,功能满足要求,而且界面简洁令人看着舒坦。但是有一些问题:

1. 最大字符数不能根据需要设置,只能在js里改,这样如果多处要用这个编辑器且要求的字数不一样,这就不好办了。

2. 编辑器有一个小bug,只有在IE里才有。输入一段文字后再清空输入域,你会发现输入域并没有完全空,使用source模式可以看到有一小段样式代码

3. 不能定制编辑器,比如有些地方只需要少许功能,有些地方只需要一个计数功能,有些地方需要所有功能。

4. 下拉菜单的样式不好看

笔者花了一些时间对以上几点做了改进。给KISSY.Editor增加一个属性KISSY.Editor.customized = {type:"normal", maxTextLength:100};然后修改了一下代码:

KISSY.Editor.add("config", function (a) { 
     if(a.customized.type === "countonly") { 
         a.config = {base:"res/kissy/", language:"zh-cn", theme:"default", toolbar:[], statusbar:["wordcount"], pluginsConfig:{}}; 
     } 
     else if(a.customized.type === "simple") { 
         a.config = {base:"res/kissy/", language:"zh-cn", theme:"default", toolbar:["source", "", "fontName", "fontSize", "bold", "italic"], statusbar:["wordcount"], pluginsConfig:{}}; 
     } 
     else if(a.customized.type === "normal") { 
         a.config = {base:"res/kissy/", language:"zh-cn", theme:"default", toolbar:["source", "", "fontName", "fontSize", "bold", "italic", "underline", "strikeThrough", "foreColor", "backColor", "", "link", "", "insertOrderedList", "insertUnorderedList", "justifyLeft", "justifyCenter", "justifyRight"], statusbar:["wordcount",  "resize"], pluginsConfig:{}}; 
     } 
     else { 
         a.config = {}; 
     } 
});

如何在页面上使用?

<textarea id="textarea1" style="width:450px;height:200px;">123456</textarea>

KSSY.Editor.customized = {type:"normal", textMaxLength:500};

var editor = new KISSY.Editor("textarea1", undefined);

editor.contentDoc.body.innerHTML="hello";

如果要在JS里设置给输入域赋值,可以这样:

editor.contentDoc.body.innerHTML="hello";

如果要获得输入域的值可以调用editor.getContentDocData()
分享到:
评论

相关推荐

    Asp.net用户前台富文本编辑器

    "Kissy Editor"是压缩包中的一个文件,这可能是一款特定的富文本编辑器。Kissy Editor 1.0.0 build242版本可能是该编辑器的一个发行版,它可能包含了一些基本的编辑功能和优化的性能。Kissy Editor基于JavaScript库...

    kissy_editor

    KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让...目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布的富文本编辑器等组件。

    kissy Web编辑器,小巧灵活,简洁实用

    2. 精简实用:编辑器的核心功能包括富文本编辑,如文本格式化、插入图片、链接、列表、表格等,满足了日常内容创作的基本需求。Kissy Web编辑器注重用户体验,界面设计简洁,使得用户能快速上手,减少学习成本。同时...

    JS开源编辑器 Kissy Editor

    **JS开源编辑器 Kissy Editor** 是一个专为前端开发者设计的轻量级文本编辑器,它具有良好的浏览器兼容性,能适应各种主流浏览器环境,包括Chrome、Firefox、Safari、Opera以及Internet Explorer等。Kissy Editor的...

    文本编辑器kissy_editor_1.0.0_build242

    Kissy Editor 1.0.0 Build 242,作为一款优秀的在线文本编辑器,为用户提供了便捷、高效的富文本编辑体验。本文将深入探讨Kissy Editor的功能特性、使用场景以及核心优势,旨在帮助开发者更好地理解和运用这款工具。...

    kissy_editor淘宝官方。点开demo.html即可实现网页编辑器

    《Kissy Editor:淘宝官方富文本编辑器深度解析》 Kissy Editor,作为一个源自淘宝官方的富文本编辑器,它的出现极大地提升了网页内容编辑的便捷性和用户体验。在深入理解这个编辑器之前,我们先来看看其核心特点:...

    淘宝的KISSY编辑器ver.1.0

    淘宝的KISSY编辑器ver.1.0是一款基于Yahoo! User Interface Library (YUI3)构建的专业级富文本编辑器。...如果你正在寻找一个轻量级、高效的富文本编辑器,淘宝的KISSY编辑器ver.1.0无疑是一个值得考虑的选择。

    kissy源文件代码

    淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。 KISSY ...

    淘宝开源编辑器KISSY Editor

    淘宝开源编辑器KISSY Editor是一款基于JavaScript的富文本编辑器,由淘宝网开发并公开发布。KISSY Editor致力于提供一个高性能、易用且可高度定制的Web内容编辑解决方案。它以其模块化的设计理念,允许开发者根据...

    js编辑器KISSY和TinyEditor

    它通常通过简单的API调用即可实现与后端数据的交互,适合快速构建简单的富文本编辑功能。虽然功能相对简单,但TinyEditor对于不需要复杂编辑功能的小型项目来说,是一个高效且实用的选择。 KISSY和TinyEditor在编辑...

    KISSY Editor 一个小巧灵活的网页编辑器

    **KISSY Editor** 是一个轻量级且高度可定制的网页编辑器,它专为开发者设计,提供了丰富的API和灵活的插件机制,使得在网页中实现富文本编辑功能变得更加简单。这款编辑器以其小巧的体积、高效的性能以及易用性著称...

    kissy editor 2.0

    Kissy Editor 2.0是淘宝帮派推出的一款强大的富文本编辑器,专为提升用户在社区中的内容创作体验而设计。它集成了多种功能,使用户可以方便地创建、编辑和格式化文本,同时还支持插入图片、视频等多种媒体元素,极大...

    kissy 框架

    淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。

    淘宝宝贝描述编辑器 KISSY Editor 2.0 beta

    最新淘宝宝贝描述编辑器 2.0beta版 KISSY Gallery 说明 展览馆,存放社区贡献的正式组件 组件目录结构 0) assets 统一使用 UTF-8; 1) github上 Gallery 目录结构说明: gallery 根目录下, 提交各个组件目录, 拿...

    淘宝在线编辑器JAVA版_带文件上传

    淘宝在线编辑器JAVA版是一款基于KISSY Editor的富文本编辑器,专为Java开发者设计,支持文件上传功能。KISSY Editor是阿里巴巴开源的一款强大的JavaScript富文本编辑器,而这个JAVA版则提供了与服务器端交互的能力,...

    KISSY Editor 1.0.0

    在 Web 编辑器领域, CKEditor – 七年的专注,赢取的是王者风范。 TinyMCE – 五年前的小家碧玉,如今已成长为大家闺秀。...于是有了今天发布的淘宝开源编辑器:KISSY Editor, 已在 淘帮派 上线试用。

    Web常用UI库 kissy.zip

    - `src`目录:存放Kissy库的源代码,按照模块结构组织,开发者可以在这里查看和修改源码。 - `docs`目录:包含Kissy的文档,包括API参考、教程和示例,便于学习和参考。 - `tests`目录:测试用例,用于验证Kissy的...

    kissy-1.4.8.rar

    2. **兼容性广泛**:Kissy 针对不同的浏览器进行了广泛的兼容性测试,包括老旧的IE浏览器,这使得开发者无需担心因浏览器差异带来的问题,可以专注于功能实现。 3. **组件丰富**:Kissy 提供了一系列的内置组件,如...

    Kissy学习教程

    Kissy 是一个轻量级的前端JavaScript库,它旨在简化Web开发,提高代码效率和可维护性。这个“Kissy学习教程”压缩包文件包含了深入理解并掌握Kissy的资源,帮助开发者快速上手和应用Kissy到实际项目中。 在学习...

Global site tag (gtag.js) - Google Analytics