`

CKEditor中BBCode支持table等其他标签

阅读更多

项目中使用了CKEditor的BBCode功能,但是可是化界面中编辑的表格不能自动转换为BBCode标签,经过研究发现修改扩展BBCode还是比较容易的,主要是以下代码:

	var bbcodeMap = { 'b' : 'strong', 'u': 'u', 'i' : 'em', 'color' : 'span', 'size' : 'span', 'quote' : 'blockquote', 'code' : 'code', 'url' : 'a', 'email' : 'span', 'img' : 'span', '*' : 'li', 'list' : 'ol' },
			convertMap = { 'strong' : 'b' , 'b' : 'b', 'u': 'u', 'em' : 'i', 'i': 'i', 'code' : 'code', 'li' : '*' },
			tagnameMap = { 'strong' : 'b', 'em' : 'i', 'u' : 'u', 'li' : '*', 'ul' : 'list', 'ol' : 'list', 'code' : 'code', 'a' : 'link', 'img' : 'img', 'blockquote' : 'quote' },
			stylesMap = { 'color' : 'color', 'size' : 'font-size' },
			attributesMap = { 'url' : 'href', 'email' : 'mailhref', 'quote': 'cite', 'list' : 'listType' };

 混淆压缩过后的代码类似这样:

var a={table:'table',td:'td',tr:'tr',b:'strong',u:'u',i:'em',color:'span',size:'span',quote:'blockquote',code:'code',url:'a',email:'span',img:'span','*':'li',list:'ol'},b={table:'table',td:'td',tr:'tr',strong:'b',b:'b',u:'u',em:'i',i:'i',code:'code',li:'*'},c={table:'table',td:'td',tr:'tr',strong:'b',em:'i',u:'u',li:'*',ul:'list',ol:'list',code:'code',a:'link',img:'img',blockquote:'quote'},d={color:'color',size:'font-size'},e={url:'href',email:'mailhref',quote:'cite',list:'listType'},
 
0
0
分享到:
评论
2 楼 tedeum 2012-06-05  
xurichusheng 写道
CKEditor上传图片的时候没有“浏览”按钮,只能手动输入图片的URL,这个个人感觉人性化不怎么好。

还没用过,不过CKEditor有个项目是浏览图片的,可以和editor一起用:http://ckfinder.com/
1 楼 xurichusheng 2012-06-04  
CKEditor上传图片的时候没有“浏览”按钮,只能手动输入图片的URL,这个个人感觉人性化不怎么好。

相关推荐

    ckeditor4.0自定义标签操作详细步骤及修改后编辑器jar包下载

    在IT领域,文本编辑器是开发人员日常工作中不可或缺的工具之一,CKEditor 4.0作为一款强大的富文本编辑器,被广泛应用于网页内容编辑、文档处理等多个场景。本篇文章将详细阐述如何在CKEditor 4.0中进行自定义标签...

    [CKEditor]table单元格选择插件ie

    在【CKEditor】中,表格是常见的元素之一,而"table单元格选择插件ie"则是一个专门针对表格单元格选择的功能扩展,尤其针对Internet Explorer(IE)浏览器进行了优化,解决了在旧版IE中可能存在的兼容性问题。...

    grails ckeditor 0.4修改支持flv插入

    描述中的链接指向了一个百度博客文章,尽管我们无法直接访问该链接,但可以推测该博客文章可能提供了关于如何在CKEditor中实现FLV支持的详细步骤、配置过程或使用教程。这可能包括如何集成FLV插件,如何配置CKEditor...

    CKEditor 4 开发人员指南(中文)

    CKEditor支持使用插件来扩展其功能,开发者可以到CKEditor官方网站下载各种插件来满足特定需求。此外,CKEditor提供了一套完整的API,允许开发者编写自定义脚本进一步定制编辑器,比如创建自定义工具栏按钮,定制...

    ckeditor-5 已增加调整行高

    ckeditor-5可能内部实现了对这个属性的支持,使得用户设定的行高能够正确地体现在最终的HTML输出中。 5. **协作与版本控制**:对于多用户协作的项目,ckeditor-5可能需要确保行高设置能够在不同的用户间保持一致,...

    ckeditor支持flv文件播放

    在CKEditor中,默认情况下,其内置的Flash插件是用来支持SWF文件的播放,SWF是Adobe Flash Player支持的一种文件格式,常用于展示动画和交互式内容。然而,描述中提到的问题是,CKEditor原生不支持FLV视频文件的播放...

    ckeditor 4.1 两端对齐按钮支持中文两端对齐补丁

    总之,通过在CKEditor 4.1中加入"text-justify: inter-ideograph"样式,我们可以解决中文文本在两端对齐显示的问题,提升用户体验,特别是在处理大量中文内容的网站或应用中。这个补丁的实施需要对CKEditor的源代码...

    CKEditor 3.6.2中文文档

    ### CKEditor 3.6.2中文文档知识点详解 #### 一、CKEditor简介 - **定义**: CKEditor(原名FCKeditor)是一款专为网页设计的开放源代码所见即所得的文字编辑器。这款编辑器的目标在于轻量化的设计理念,让用户无需...

    jsp中使用ckeditor

    总结起来,集成CKEditor到JSP项目中需要完成导入相关库、创建编辑器实例、配置编辑器、处理提交数据、处理响应和错误等步骤。通过这些操作,我们可以为用户提供一个功能强大且易于使用的富文本编辑界面。同时,不要...

    ckeditor html5_video 插件添加封面和中文功能

    4. **更新配置和事件**:确保用户选择的封面能在视频标签中正确显示,这可能需要修改插件的配置和监听相关的用户操作事件。 5. **本地化支持**:更新或创建 `lang/zh-cn.js` 文件,添加关于封面和中文提示的翻译。 ...

    CKEditor4+ckfinder ASP.NET 支持图片上传

    ckfinder则是一个文件管理工具,与CKEditor搭配使用,允许用户在编辑文章时方便地上传、选择和管理图片或其他文件。这个ASP.NET项目是关于如何在CKEditor4中集成ckfinder,以实现图片上传功能的示例。 首先,我们...

    lineheight支持最新的ckeditor

    之前在网上下载的都不可以用,于是想尽办法发现是网上提供的是不支持最新的ckeditor.用法找见自己的ckeditor地址让后放到ckeditor/plugins/ 下,最后修改ckeditor/config.js,如果之前添加过工具则在 config....

    ckeditor-5 支持H5 player

    本话题将深入探讨如何在CKEditor 5中实现对H5播放器的支持,以满足现代网页媒体需求。 1. **CKEditor 5 概述** CKEditor 5 是由CKSource公司开发的新一代富文本编辑器,它采用了模块化设计,支持自定义构建,可以...

    CKEditor示例源码20121228

    描述中提到,该源码包含在.NET环境中集成CKEditor编辑器的方法,这意味着它可能是一个.NET项目的实例,展示了如何在ASP.NET或其他.NET框架的应用程序中使用CKEditor。"配置方法存放在docs文件夹下"这一信息提示,...

    ckeditor3.x 支持自定义上传,媒体预览

    在这个特定的主题中,我们关注的是CKEditor 3.x如何支持自定义上传和媒体预览功能。这两个特性使得用户能够在编辑器中方便地处理多媒体内容,如视频和音频,提升用户体验。 首先,让我们讨论“自定义上传”。在...

    CKEditor 4.1.1 两端对齐按钮支持中文两端对齐补丁

    本补丁通过加入text-justify:inter-ideograph,可以使CKEditor4.1.1中两端对齐按钮支持中文两端对齐,原版本只支持西文两端对齐, 本补丁仅支持CKEditor4.1.1其他版本的不要打(包括CKEditor4.1)。

    ckeditor的demo代码

    此外,CKEditor还支持插件扩展,可以安装额外的模块来增加更多的功能,比如图片上传、视频嵌入等。 总的来说,这个"ckeditor的demo代码"主要展示了CKEditor的基本用法和核心概念,包括如何引入CKEditor库、创建编辑...

    ckeditor5_v19完整版

    `translations` 目录可能包含了CKEditor5的多语言支持文件,使得编辑器可以适应全球不同地区的用户需求。这些文件通常以JSON格式存储,包含了各种语言的翻译字符串,便于国际化设置。 总的来说,`ckeditor5_v19完整...

    富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11

    此外,标签“工具”暗示了CKEditor是一个开发工具,可以帮助开发者提高工作效率,简化富文本内容的创建过程。 总结来说,CKEditor 4.4.7 是一款强大的富文本编辑器,它为网页开发者提供了丰富的文本编辑功能,且...

    Ext中CKEditor应用事例

    在IT行业中,富文本编辑器是网页开发中的一个重要组件,它允许用户在浏览器环境中进行文本格式化、插入图片、超链接等操作。CKEditor是一款功能强大的开源富文本编辑器,广泛应用于各种Web应用程序中。本篇文章将...

Global site tag (gtag.js) - Google Analytics