富文本编辑器独立dom

2024-10-17

现代富文本编辑器Quill的模块化机制

DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎Star) 引言本文基于DevUI的富文本编辑器开发实践和Quill源码写成. EditorX是DevUI开发的一款好用.易用.功能强大的富文本编辑器,它的底层基于Quill,并对其做了大量扩展,以增强编辑器的能力. Quill是一款API驱动.支持格式和模块定制的开源Web富文本编辑器,目前在Gi

angularjs中展示富文本编辑器文本，向DOM中插入元素

前几天在用textangular富文本编辑器插件时,将存储的文本及格式存储到数据库中,但是从后台接口中再向angular页面插入时却不能执行,即在Angular中操作DOM没有实现,后来查看了一下,操作DOM需要使用指令Directive封装DOM,这样尝试之后终于解决了问题,从而对指令也有了很大的了解,以后再操作DOm就要小心了以下是我查阅资料时看到的,感觉so详细,解决了我很多issue,因此copy过来看看原文http://www.cnblogs.com/xuema/p/4350747

zx-editor 移动端（HTML5）富文本编辑器，可与原生App混合(hybrid)开发

ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址:https://github.com/capricornc... 本地运行 Build Setup # 安装依赖 npm i # 运行开发模式 # 通过 `http://localhost:9001` 可以访问 npm run dev # 生成项目文件 npm run build 使用 Use n

web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为重要. 本文将讲述两种使用富文本编辑器的思路, 重点讲述弹出式形态的实现思路, 以及中间踩过的坑. 基础: 文章的编辑采用ueditor作为富文本编辑器, 而前框的框架则使用bootstrap, 下文的解决方案都是基于此的. ueditor的相关博文: • ueditor和springmvc的集成

关于EasyUI与富文本编辑器结合使用的问题（kindueditor与uueditor）

最近使用easyui玩玩项目,在结合富文本编辑器时遇到了一些问题,很多人(在网上看到)集成富文本编辑器时常常不能显示, 第一次打开编辑的时候没有问题,但是第二次打开就出错了.为此我进行了一些调试研究.最终得以解决. 这个是百度编辑器

百度富文本编辑器ueditor使用总结

最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/article/details/13019657 http://cache.baiducontent.com/c?m=9d78d513d9d441d84fece4225a50c0676943f0612ba1db020fd0843999735a315016e4ac56240705a3d20c6d16df394

富文本编辑器 - wangEditor 上传图片

效果: . 项目结构图: wangEditor-upload-img.html代码: <html> <head> <title>wangEditor-图片上传</title> <link rel="stylesheet" href="wangEditor/css/wangEditor-1.3.0.min.css"> <style type="text/css"> .wrap{

简易富文本编辑器bootstrap-wysiwyg源码注释

好久没写随笔了,因为最近比较忙,小公司基本都是一个前端干所有属于和部分不属于前端的事情,所以就没空弄了,即使想分享,也因为没有时间和精力就搁置了. 这周周六日休息,正好时间比较充裕(ps:目前处在单休中...),就分析了以下bootstrap-wysiwyg的源码,虽然只有200多行,但是本人js水平还是欠佳,所以大概用了一天的时间(ps:可怜我偶尔的双休还是变成了单休),对bootstrap-wysiwyg的源码进行了解读和部分的注释,在这里放出来,给需要的人,毕竟不是人人都喜欢百度的编辑器的

quillJS 富文本编辑器源码分析系列1

quillJS 富文本编辑器目前是一款很火富文本编辑器,使用广泛,github 上面的 star 有 22,492,虽然说不以 star 论英雄,不过这可以说明它还是比较受欢迎的: 它的特点是:轻量,易上手,易扩展,开源,所见即所得的一款现代编辑器,还有一点是它的实现思路和其他的编辑器有点不一样(会一步步分析),这就是为什么要记录和学习它的原因吧,还有就是为了补充这一块的知识,可以自己独立开发一款真正的编辑器,哈哈: 这里用的版本是 1.3.6,先看一下 webpack 中的依赖的几个包: "d

富文本编辑器Quill(一)简单介绍

Quill是一个很流行的富文本编辑器,github上star大约21k: github:https://github.com/quilljs/quill/ 官网: https://quilljs.com/ 使用  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <!-- Creat

Html富文本编辑器

本文推荐两款简单的富文本编辑器[KindEditor,NicEdit]用于获得所见即所得的编辑效果,本文仅供学习分享使用,如有不足之处,还请指正. 概述这两款编辑器都是采用JavaScript编写,不需要引用dll,可以与主流后端编程语言[Java , .NET,PHP,ASP等]无缝对接,体积小,可以将现有的TextArea变成富文本编辑器.下面来分别介绍下: 什么是KindEditor ? KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,

富文本编辑器Ueditor 及 hibernate 逆向工程

1.1 富文本编辑器Ueditor ueditor下载地址: http://ueditor.baidu.com/ 下载1.4.3 –utf8-Jsp版本.完整demo可参考下载文件中的index.html 导入 ueditor 到项目中:将ueditor导入到项目的js目录下.导入ueditor/jsp/lib目录中的“commons-codec-1.9.jar”.“json.jar”.“ueditor-1.1.1.jar”这几个jar包到项目的web-inf/lib目录中.

Django配置富文本编辑器kindeditor

一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的控件.常见的富文本编辑器有ckeditor,ueditor,kindeditor,tinmce... KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为

放弃WebView，使用Crosswalk做富文本编辑器

版权声明: 欢迎转载,但请保留文章原始出处作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/4100132.html 为什么放弃WebView Android WebView做普通浏览还好,做富文本编辑器(执行js:document.body.contentEditable=true;),常常会遇到各种奇葩的bug,而且很难修复. 尽管Google在版本迭代中不断修复bug,但依旧没法用它来做富文本编辑. Kitkat的改变 Google为了加强Web

【JavaScript】富文本编辑器

这是js写的富文本编辑器,还存在一些bug,但基本功能已经实现,通过这个练习,巩固了js富文本编辑方面的知识,里面包含颜色选择器.全屏.表情.上传图片等功能,每个功能实际对应的就是一个小插件啦部分程序: var RichEditor = function(container, params) { params = params || {}; var options = { width: 900, height: 500, borderColor: "#ddd", buttons: {

quilljs 一款简单轻量的富文本编辑器（适合移动端）

quilljs入门使用教程: quill.js是一款强大的现代富文本编辑器插件.该富文本编辑器插件支持所有的现代浏览器.平板电脑和手机.它提供了文本编辑器的所有功能,并为开发者提供大量的配置参数和方法. 使用方法在页面中引入编辑器主题颜色文件quill.snow.css,以及quill.js文件. <link href="http://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"> <

Java-Swing中使用Web富文本编辑器

资料下载 (截取出了邮件发送的功能.) 2018/11/10 因为要 win7 电脑 IE 8 的原因,使用了 jxBrower 拓展,更容易使用,参考链接(推荐) 问题介绍 window客户端软件的一个需求,使用Java-swing技术实现邮件发送功能. 邮件编辑使用富文本编辑器,用户可以自定义邮件格式. 支持上传图片. 支持附件发送. 内容支持名字的替换,显得像是单独给某个人发的一样. 功能图片展示解决过程开始看到这个需求,也没有什么想法感觉还好,于是百度.谷歌了一堆东西.首先百度Jav

关于百度富文本编辑器UEdit的初始化内容失败问题

百度富文本编辑器毫无疑问是强大的,但也会出问题.这个问题是在脚本中普遍存在的,由异步性导致的加载顺序问题. 我们使用 var ue = UE.getEditor('editor', {}); 创建实例. 并使用 ue.setContent("Helllo World!"); 初始化内容. 但是有时候初始化失败. 原因是初始化的时候富文本编辑器还没有加载完成. 这个原因对于经验丰富的攻城狮不难想到,因为js的异步问题不是只在这产生,很多时候都有这种异步导致的加载顺序问题. 对此头疼了一整

百度富文本编辑器ueditor使用启示

百度富文本编辑器ueditor使用启示一.总结一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示官方完整demo 官方完整demo对应的源代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

summernote(富文本编辑器)将附件与图片上传到自己的服务器（vue项目）

1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callbacks: { onChange: function(contents, $editable) { console.log('onChange:', contents, $editable); } } }); // summernote.change $('#summernote').on('summer

富文本编辑器独立dom

热门专题