一个创新型的移动端所见即所得富文本编辑器。
Demo: Medit Demo
为了更专注做一个更具价值和体验的移动端富文本编辑器,所以Medit目前不支持Pc端使用,仅支持移动端。
更易用的内容选择方式,目前已支持选取内容块后手势左右滑动选择、通过手机原生自带长按选择进行编辑操作。
优化编辑器样式,把原有的图标、弹层和编辑器内部标识都进行了优化。
开放功能扩展接口Medit.extend,可以通过这个接口来扩展更加丰富的内容。
开放内置功能配置接口Medit.nativeSetting,开放内置弹层调用接口Medit.settingPage。
工具条目前不在限制于页面顶部,用户可以对工具条进行自定义配置。
第一步,引入medit.js文件,如果不下载使用icon包的话可能会导致部分功能性icon无法显示,icon存放于 github/medit/build/images 下
在第一步和第二步之间可以选择性的引入medit插件,也可以自己来书写medit插件,medit提供了两个方法,一个是 medit.extend 方法来配置扩展插件,另外还有一个 medit.nativeSetting 方法来配置内部功能,详情请看下面的 medit类方法。
第二步,创建medit实例
/* * var meditObj = medit(editerContainerNode [, toolBarContainer]); * * 这里的medit方法内部实现了自动new,所以可以使用new medit,也可以直接使用medit。 * * editerContainerNode:这是必须的,代表的是编辑框的node结点。 * toolBarContainer: 这是可选的参数,可以传入一个node结点来配置工具条位置,如果不传入那么就会固定在页面顶部。 * * 下面是一个实例 */ var meditObj = medit(document.getElementById("medit"), document.getElementById("meditToolBar"));
经过上面两步之后一个medit富文本编辑器就可以使用了。
通过上面创建好的medit实例meditObj可以调用medit的方法来实现你想要的功能。
meditObj.getContent() 获取medit编辑器中所编辑的内容结果。
meditObj.clear() 清除medit编辑器的内容和自动保存在客户端浏览器中的内容。
meditObj.autoSave(name, callBack(content, time)) 配置medit自动保存,需要传入两个参数:
name:为了保证在同一页面引入两个编辑器后自动保存的效果,所以需要手动传入一个自动保存的字段名称,需要在页面中保持唯一性。
callBack(content, time):这是自动保存的回调函数,每次medit自动保存后都会调用这个回调函数,并传入当前保存的编辑器内容content和当前时间戳time。
meditObj.image(option) || meditObj.imageUpload(option) medit图片上传配置,option是配置参数
{ // 默认图片上传设置 path:'https://sm.ms/api/upload', // 图片上传路径 name:'smfile', // 图片上传文件参数 size:0, // 大小限制,0为不限制大小 timeout:0, // 上传超时时间,0为不限制 ext:["jpg","jpeg","png","gif","bmp"], // 上传文件格式限制 success:function(){}, // 上传成功回调 error:function(){} // 上传失败回调 }
目前有三个medit类方法,所谓类方法就是直接通过medit类进行调用而不是通过medit实例进行调用。
medit.extend(config) 功能扩展方法,可以通过这个方法实现medit插件和功能扩展。 config是一个对象,其中必须包括 图标: icon 、 其它类型模块转换为此类型模块时动作: doWhat 、 模块得到焦点时动作: focus 、模块失去焦点时动作: blur和 模块名称: name 这五个属性。其中icon可以是远程url,也可以是dataURL;name必须保持唯一,不能与内置功能名称产生冲突。
下面是一个功能模块的完整配置属性:
/* icon: [String] 类型选择icon url name: [String] 类型名称 isMerge: [Bollean] 是否开启相同内容自动合并 notDisplay: [Bollean] 在选择模式的时候不显示, emptyNotDelete: [Bollean] 如果当前块只存在一个子节点并且这个子节点要删除的时候是否开启递归删除 doWhat: [Function] 转换到此类型时会自动做哪些转换 focus:[Function] 点击或此模块获取焦点时自动触发的函数 blur:[Function] 此模块失去焦点时自动触发的函数 empty: [Function] 什么时候当前模块为空 selecting:[Function] 选择当前模块并且手指在屏幕上移动时触发的操作 selected:[Function] 手指移动结束执行的操作 setting: [Array(Object)] 当前模块可以进行哪些操作 -- name: [String] 操作名称 -- icon: [String] 操作按钮icon url -- doWhat: [Function/Array] 点击此操作按钮执行什么,或者是存在更深层次操作 */
medit.nativeSetting(callBack(config, name)) 内部功能配置方法,会循环调用callBack,然后把内置功能的配置和名称传入,返回值应该是一个修改后的config,然后medit就会应用这个config,如果没有返回值那么medit也就不会做任何改动。
medit.settingPage(title, contentHTML, callBack) 打开medit内置弹层,title是配置弹层顶部Title,contentHTML可以传入一段html文本作为弹层的内容,callBack是在弹层的ok按钮点击之后触发。
下面是一段应用medit类方法的实例:
medit.extend({ name: 'time', icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAClklEQVRYR8WXjW0VQQyExxUAHUAFJBWQVACpgFABoQJCBZAKgAqSVECogKQCSAVABUZf8B73s393QXorPa2ebs87Httjn2nHy3Z8v1YBcPfHkp5JeiHpYfzw4Vf8LiR9NbMfvY51AXD3A0lvJbH3rCtJ78yMvbqqANwdL99LOh5ZuZGEp3PjgIOZp6OznHtlZjCUXUUA7r4n6aMkdtZnSactegP0B0kv473rAMG+WFkAcfmXiPEtnplZ1kDJs7DxKRiBgcOcjQWA8IDL8Ry6D0oURlKqxErYIlSEBQcAMQlHDgCooQ/P92rxc3eHATOrhZI8SiAuzOxozNrkxaDtWxzYb9HeAwBbM7uwMCTwHABZ+5yEM7Nx5mdD3QsgQCRmr8zsMBkcAES8fsaDJ61sD6PNEKSLIl++x/9HKbRjAHhM2d2YWSq9qoisYSAAk4gkJNoAI/+k2N2p3dehYKd1/fr7dAMA7KKoQ4jHDJAY6PyArgViAwCU8jz6xZ2s5wBMsrQGIgFAITPnqHc8Heo+egoac21m+/8TQAnnGzMjtClkeA0AOmaRgclLDQYoW4SmtI7H1eTu1RCkJDwzs5NW/Lc8d/dqEqYyHOKz5ZIGY9UyhMpVQrQGYFOIoq6TXC6axprLcmfdPdm+NDNy4W7NewEzX5LL7nJsgZs1o4nM59pxSkbql47YPWAWPCe0OMW+aHKlgWQ8RBxtBdEz3JRGMtDi+YMYtwHRnHDHDITqIbvY+h3DzYLN3kkG24gOIlUNSWQ7DSfNE4x1zJTZ93rGcsSDLpkWhgDDngZV2jcJTHazp3UWk/T6sXxGJ0YBkkbtVuJ3jfCLMmxZjaSiieDx/CuJHIERRq6ix/M7uj7NWsDu83znAP4A8SpJMGG4znIAAAAASUVORK5CYII=', doWhat: function(node) { node.innerHTML = "this is time node"; return node; }, setting: [{ name: 'time', icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAClklEQVRYR8WXjW0VQQyExxUAHUAFJBWQVACpgFABoQJCBZAKgAqSVECogKQCSAVABUZf8B73s393QXorPa2ebs87Httjn2nHy3Z8v1YBcPfHkp5JeiHpYfzw4Vf8LiR9NbMfvY51AXD3A0lvJbH3rCtJ78yMvbqqANwdL99LOh5ZuZGEp3PjgIOZp6OznHtlZjCUXUUA7r4n6aMkdtZnSactegP0B0kv473rAMG+WFkAcfmXiPEtnplZ1kDJs7DxKRiBgcOcjQWA8IDL8Ry6D0oURlKqxErYIlSEBQcAMQlHDgCooQ/P92rxc3eHATOrhZI8SiAuzOxozNrkxaDtWxzYb9HeAwBbM7uwMCTwHABZ+5yEM7Nx5mdD3QsgQCRmr8zsMBkcAES8fsaDJ61sD6PNEKSLIl++x/9HKbRjAHhM2d2YWSq9qoisYSAAk4gkJNoAI/+k2N2p3dehYKd1/fr7dAMA7KKoQ4jHDJAY6PyArgViAwCU8jz6xZ2s5wBMsrQGIgFAITPnqHc8Heo+egoac21m+/8TQAnnGzMjtClkeA0AOmaRgclLDQYoW4SmtI7H1eTu1RCkJDwzs5NW/Lc8d/dqEqYyHOKz5ZIGY9UyhMpVQrQGYFOIoq6TXC6axprLcmfdPdm+NDNy4W7NewEzX5LL7nJsgZs1o4nM59pxSkbql47YPWAWPCe0OMW+aHKlgWQ8RBxtBdEz3JRGMtDi+YMYtwHRnHDHDITqIbvY+h3DzYLN3kkG24gOIlUNSWQ7DSfNE4x1zJTZ93rGcsSDLpkWhgDDngZV2jcJTHazp3UWk/T6sXxGJ0YBkkbtVuJ3jfCLMmxZjaSiieDx/CuJHIERRq6ix/M7uj7NWsDu83znAP4A8SpJMGG4znIAAAAASUVORK5CYII=', doWhat: function(node){ medit.settingPage("时间插件测试","Time test",function(){ console.log("ok点击了")}); } }], focus: function(node){ node.setAttribute("class","medit-editing"); }, blur: function(node) { node.removeAttribute("class"); } }) medit.nativeSetting(function(mode, modeName){ console.log(mode, modeName); });
内容比较多,主要的是javascript代码,这个代码Tin's从是google的上弄下的 并且翻译好了.然后我用数据库保存了布局框架,程序用asp.net. 先看看数据库结构(2个表), side表 SideID SideLeft SideCenter SideRight 1 1,3 2,45,6 SedeID表示ID号表示唯一的 SideLeft表示页面左侧的窗口的ID号,窗口号之间用逗号 S
内容比较多,主要的是javascript代码,这个代码Tin's从是google的上弄下的 并且翻译好了 : 他的blog http://www.blogjava.net/iamtin 然后我用数据库保存了布局框架,程序用asp.net. 先看看数据库结构(2个表), side表 SideID SideLeft SideCenter SideRight 1 1,3 2,4 5,6 SedeID 表
Django集成UEditor (封装成应用) 百度富文本编辑器 http://ueditor.baidu.com/website/ 使用效果 测试环境 ubuntu 16.04 python3.5.2 django1.11.7 目前测试解决了出现的以下两个问题,都是python版本问题 error1 # name 'file' is not defined controller.py 68行
富文本编辑,又称为WYSIWYG(What You See Is What You Get,所见即所得)。在网页中编辑富文本内容,是人们对Web 应用程序最大的期待之一。虽然也没有规范,但在IE 最早引入的这一功能基础上,已经出现了事实标准。而且,Opera、Safari、Chrome 和Firefox 都已经支持这一功能。这一技术的本质,就是在页面中嵌入一个包含空HTML 页面的iframe。通
uniapp能在app端编辑的富文本编辑器并且能够在pc端编辑的富文本编辑器有什么插件啊?求推荐大佬们推荐一个。。。。
本文向大家介绍JS开发 富文本编辑器TinyMCE详解,包括了JS开发 富文本编辑器TinyMCE详解的使用技巧和注意事项,需要的朋友参考一下 一、题外话 最近负责了一个cms网站的运维,里面存在很多和编辑器有关的问题,比如编辑一些新闻博客,论文模块。系统采用的是FCKEditor,自我感觉不是很好,如下图 特别是在用户想插入一个图片的话,就很麻烦,所有用户共享一个文件目录,这样就不好了,于是便想
本文向大家介绍说说你对富文本的理解,你有用过哪些富文本编辑器呢?相关面试题,主要包含被问及说说你对富文本的理解,你有用过哪些富文本编辑器呢?时的应答技巧和注意事项,需要的朋友参考一下 富文本是指在提供类似word的文本格式编辑方式的编辑器,可以让不会CSS样式的用户也可以通过简单的按钮点击设置出自己想要的文本格式。 一般现在是出现在留言板或者论坛的发帖和博客的发博文等功能块。 一般会支持图片上传,
tinymce富文本开发环境没问题,打包上线报错 目前遇见一个抓脑问题,富文本在本地开发环境使用正常,但是打包上线后有问题,目前找不到为什么。尝试升级了一下版本,看 npm 上有3个tag版本,将 tinymce 升级到 5.10.9,但还是同样问题,求各位大佬解救 项目版本 线上报错提示 问题定位打包后的混淆代码 通过网上查找,混淆代码对应的应该是此处代码 组件代码
本文向大家介绍PHP如何搭建百度Ueditor富文本编辑器,包括了PHP如何搭建百度Ueditor富文本编辑器的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入ja
本文向大家介绍Django集成百度富文本编辑器uEditor攻略,包括了Django集成百度富文本编辑器uEditor攻略的使用技巧和注意事项,需要的朋友参考一下 首先从 ueEditor官网 下载最新版本的包,目前官网上提供了ASP、.NET、PHP、JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点。 这里不介绍uEditor的使用方法,也不过多解释uEdit