Tinyeditor：集成tinyMCE与elFinder的便捷页面编辑器

JavaScript
需积分: 13 1 下载量 38 浏览量 更新于2024-10-29 收藏 2.19MB ZIP 举报
资源摘要信息:"tinyeditor:Tinyeditor - 带有文件管理器和其他工具的 tinymce 内联编辑器" 知识点详细说明： 1. TinyMCE编辑器概述 TinyMCE是一个流行的网页内容编辑器，它允许用户在网页上进行富文本编辑。它通常被用于内容管理系统（CMS）和其他需要在线内容编辑功能的网站。TinyMCE支持跨浏览器操作，具有多种可定制的工具栏和插件，使得开发者能够根据自己的需要扩展编辑器的功能。 2. elFinder文件管理器 elFinder是一个基于Web的文件管理器，它提供了一个类似于桌面操作系统的界面，允许用户在浏览器中浏览和管理服务器上的文件。elFinder通常与TinyMCE集成，作为一个工具插件，使得用户可以在编辑器内直接上传、删除和管理文件。 3. Tinyeditor工具 Tinyeditor是一个封装了TinyMCE和elFinder的插件，旨在为用户提供一个简单的集成解决方案，使得普通用户和开发人员都能轻松地将内容编辑功能添加到自己的网页中。通过使用Tinyeditor，开发者可以避免直接处理复杂的配置和依赖关系。 4. 使用Tinyeditor的基本步骤 - 导入所需文件：只需包含一个文件，即tinyeditor.js。 - 初始化Tinyeditor：在HTML文档的`<head>`标签内导入JavaScript文件，并在`<body>`标签的末尾进行初始化。 5. 初始化代码解释 初始化Tinyeditor涉及创建一个新的`FgTinyEditor`实例。在初始化过程中，需要配置几个关键属性： - `selector`：指定页面中哪些元素将被转换为可编辑区域。这里使用`.editable`作为选择器。 - `rootPath`：设置elFinder文件管理器的根路径，通常是一个服务器路径。这里使用了PHP的输出语句`base_url('tinyeditor')`来动态生成路径。 - `saveUrl`：设置保存编辑内容的服务器端脚本路径，这里也使用了PHP的输出语句`base_url('save')`。 - `defaultTools`：决定是否加载默认工具栏，`true`表示使用默认配置，用户也可以根据需要自定义工具栏。 - `loadjQuery`：指示是否需要加载jQuery库，这对于依赖于jQuery的插件是必需的。 - `tools`：自定义工具栏配置，其中可以定义工具的图标（icon）、标题（title）等属性。 6. 文件管理器和其他工具 Tinyeditor通过elFinder提供文件管理功能，并集成了其他工具，如图像上传、文本格式化等。这些工具通常被组织在编辑器的工具栏中，允许用户通过点击图标快速访问各种功能。 7. 在线资源和社区支持 尽管本资源文件的名称列表中只有"tinyeditor-master"，但可以推测这是一个GitHub项目或者类似的代码托管服务上的资源库。对于获取最新文档、API说明、示例代码和社区支持，可以直接访问该项目的在线资源。对于开发人员来说，查阅项目页面、问题跟踪和文档都是了解和使用Tinyeditor的宝贵资源。 8. 开发者的扩展性 Tinyeditor的核心优势之一是其扩展性。开发者可以根据特定需求定制工具栏，添加新的功能插件，或者与后端服务集成，实现数据的保存和加载。这使得Tinyeditor不仅适用于简单的网页编辑需求，还可以扩展到复杂的Web应用程序中。 9. 对于IT专业人士的建议 对于那些正在寻找一种轻量级但功能强大的解决方案来增加网页内容编辑能力的IT专业人士来说，Tinyeditor是一个值得考虑的选项。通过集成TinyMCE和elFinder，它提供了一个成熟的编辑环境，同时避免了复杂的配置需求，允许开发者专注于实现业务逻辑而非底层实现细节。 总结： Tinyeditor提供了一个易用且功能强大的解决方案，它将TinyMCE编辑器和elFinder文件管理器打包为一个单一的、可扩展的插件。通过简单的配置步骤，开发者可以将富文本编辑功能和文件管理功能集成到自己的Web项目中，从而提高内容管理的效率和用户体验。

TinyEditor 简洁且易用的html所见即所得编辑器

2020-12-10 上传
前几日曾给大家介绍过一款国产的xhtml编辑器，今天要给大家推荐的TinyEditor，是国外知名Web设计博客leigeber.com刚发布的一款简洁且易用的html所见即所得编辑器。 TinyEditor有以下特点 它使用Javascript编写，不依赖于其它类库 这是一个轻量级的编辑器，要调用的文件仅有8kb 它可以处理大多数的html格式化需求，并且内置的功能使得生成的标记尽量简洁 编辑器中用到的小图标使用了CSS Sprite技术，减少了http连接 在主流浏览器中测试通过 可个人或商业项目中使用，遵循creative commons

TinyEditor:Javascript 中最小的 WYSIWYG 文本编辑器

2021-07-07 上传
小编辑器 Javascript 中最小的 WYSIWYG 文本编辑器。

tinyeditor gbk 汉化版

2013-03-18 上传
网上只能找到tinyeditor的英文版本，对于国内用户还是不太方便，自己动手汉化了一下，并且将编码改成了gbk,希望可以帮助有需要的朋友。 下面是关于tinyeditor的介绍（摘自网络）： 前几日曾给大家介绍过一款国产的xhtml编辑器，今天要给大家推荐的TinyEditor，是国外知名Web设计博客leigeber.com刚发布的一款简洁且易用的html所见即所得编辑器。 TinyEditor有以下特点 •它使用Javascript编写，不依赖于其它类库 •这是一个轻量级的编辑器，要调用的文件仅有8kb •它可以处理大多数的html格式化需求，并且内置的功能使得生成的标记尽量简洁 •编辑器中用到的小图标使用了CSS Sprite技术，减少了http连接 •在主流浏览器中测试通过 •可个人或商业项目中使用，遵循creative commons license 下面来看如何使用： 1，在网页文件中引用TinyEditor提供的js文件和css文件 2，在网页文件中添加编辑器所需要的标签，其实就是个textarea，如下 <textarea id="input" height:200px"></textarea> 注意textarea中定义的长宽也就是编辑器的大小。 3，通过脚本初始化编辑器，并配置各种参数，如下： new TINY.editor.edit('editor',{ id:'input', // (必须)上面第二步中定义的textarea的id width:584, // (选填) 编辑器宽度 height:175, // (选填) 编辑器高度 cssclass:'te', // (选填) 编辑器的class，用来通过css控制样式 controlclass:'tecontrol', // (选填) 编辑器上按钮的class rowclass:'teheader', // (选填) 编辑器按钮行的class dividerclass:'tedivider', // (选填) 编辑器按钮间分割线的样式 controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'], // (必须) 要根据需要在编辑器上添加按钮控件, 其中'|'代表功能按钮间的竖分割线，'n'代表按钮行间的分割线 footer:true, // (选填) 是否显示编辑器底部 fonts:['Verdana','Arial','Georgia','Trebuchet MS'], // (选填) 编辑器中可选择的字体 xhtml:true, // (选填) 编辑器生成xhtml还是html标记 cssfile:'style.css', // (选填) 要为编辑器附加的外部css文件 content:'starting content', // (选填) 设置编辑器编辑区域中的初始内容 css:'body{background-color:#ccc}', // (选填) 设置编辑器编辑区域背景 bodyid:'editor', // (选填) 设置编辑区域ID footerclass:'tefooter', // (选填) 设置编辑器底部class toggle:{text:'源代码',activetext:'可视化',cssclass:'toggle'}, // (选填) 设置源代码浏览切换文字，及切换按钮的class resize:{cssclass:'resize'} // (选填) 设置编辑器大小调整按钮的class }); 可以说的上是高度可配置了，而且配置项都比较清晰。 在TinyEditor的实际应用中，需要注意的是，在提交编辑器内容之前，一定调用instance.post()函数，以确保编辑区域中最新的可视化内容转化为标记文本。 查看示例：http://sandbox.leigeber.com/tinyeditor/

最小的网页编辑器-tinyeditor

2011-03-20 上传
对于那些追求轻量化、高效能的开发者和网站管理员来说，TinyEditor无疑是构建网页编辑功能时值得考虑的工具。在实际应用中，结合其自定义配置和社区支持，可以灵活适应各种应用场景，满足多样化的开发需求。

TinyEditor 简洁易用的html编辑器-源码.zip

2023-02-26 上传
源码学习，压缩包解压密码：www.cqlsoft.com

js编辑器KISSY和TinyEditor

2012-12-16 上传
JavaScript（简称JS）是网页开发中的重要脚本语言，它为网页添加动态功能，而编辑器则是开发者编写和调试JS代码的重要工具。在JS编辑器领域，KISSY和TinyEditor是两个备受关注的实现。 KISSY是一个开源的JavaScript...

TinyEditor

2010-05-11 上传
TinyEditor是一个不依赖于任何JavaScript框架，只有8kb左右的简单JavaScript WYSIWYG编辑器。可以将任意textarea转成一个编辑器。TinyEditor编辑框可以调整大小，预先设置内容，设置生成HTML或XHTML代码等等。

TinyEditor一个极小的只有400字节的网页代码编辑器

2019-08-10 上传
在提供的压缩包"TinyEditor-master"中，我们可以预期找到该编辑器的源代码和其他相关文件。通常，这样的文件夹结构可能包含以下几个部分： 1. `index.html`：主页面文件，包含了编辑器的界面和初始化代码。 2. `...

ngTinyEditor:ngTinyEditor基于angular和tinyEditor（ngWYSIWYG），比以前更漂亮

2021-05-07 上传
然后偶然发现了tinyEditor这个富文本编辑器，代码量很小，满足了我们项目的基本全部需求，然后又看到有开发者直接编写好了angurla 版本的tinyEditor ，命名为ngWYSIWYG 。我不知道这个WYSIWYG 和tinyEditor 什么关系...

Tinymce.zip

2021-07-09 上传
在父组件中，可以像使用其他Vue组件一样使用`TinyEditor`，并监听`input`事件获取编辑器中的内容： ```html <TinyEditor @input="handleContentChange" /> import TinyEditor from './TinyEditor.vue'; ...
少女壮士
  • 粉丝: 29
  • 资源: 4659
上传资源 快速赚钱

最新资源