精华内容
下载资源
问答
  • 最近项目需要, 把公众号的文章直接在小程序显示, 页面除了文章内容以外,还有其他组件. ... ...使用web-view组件 使用rich-text组件 第一个方案是由于小程序还没有更新2,3的功能时的一个临时解决办法. ...

    最近项目需要, 把公众号的文章直接在小程序显示, 页面除了文章内容以外,还有其他组件.

    小程序中渲染html, 解决方案有三个

    1. 使用wxParse把html转化成小程序标签
    2. 使用web-view组件
    3. 使用rich-text组件

    第一个方案是由于小程序还没有更新2,3的功能时的一个临时解决办法. 而使用web-view控件最大问题只能整屏显示.

    于是翻阅rich-text控件的文档说明.也是坑满满的.

    rich-text的控件使用很简单, 只需要给nodes属性赋值要渲染的html节点数组或者直接是html代码即可.

    一开始想偷懒, 直接在nodes重赋值html代码. 发现基本无法使用. 因为rich-text不支持的标签很多, 遇到不支持的标签(比如section)会忽略解析.导致很多的html内容都会莫名消失.

    只能乖乖的把html代码变成节点数组,然后对每个节点进行判断兼容.

    于是有了we-rich这个库.

    we-rich 直接把html代码转化成小程序rich-text 可以渲染的nodes节点

        <div class='post post-featured'>
          <p>hello</p>
          <section>world</section>
          <img src="test.png" style="max-width:100%" />
        </div>
    复制代码
    [ 
      {
        "type": "node",
        "name": "div",
        "attrs": {"class": "post post-featured"},
        "children": [ 
          {
            "type": "node",
            "name": "p",
            "attrs": {},
            "children": [{"type": "text", "text": "hello"} ]
          }, 
          {
            "type": "node",
            "name": "div",
            "attrs": {},
            "children": [{"type": "text", "text": "world"}
            ]
          }, 
          {
            "type": "node",
            "name": "img",
            "attrs": {"src": "test.png", "style": "max-width:100%"},
            "children": []
          }
        ]
      }
    ] 
    复制代码

    使用办法

    npm install we-rich
    
    var weRich = require('we-rich');
    var nodes = weRich.parse(html)
    复制代码

    转载于:https://juejin.im/post/5a4745b851882538650984c9

    展开全文
  • 富文本编辑js

    2016-11-05 22:48:58
    富文本编辑js
  • 通过js富文本框输入:我很好public void setContent(String content) {String js = "document.getElementById('content_ifr').contentWindow.document.body.innerHTML='我很好'";((JavascriptExecutor)dr).execute...

    通过js向富文本框输入:我很好

    public void setContent(String content) {

    String js = "document.getElementById('content_ifr').contentWindow.document.body.innerHTML='我很好'";

    ((JavascriptExecutor)dr).executeScript(js);  //dr强制类型转换JavascriptExecutor,执行js

    }

    容纳框架的内容的文档。返回 frame/iframe 生成的文档对象。

    返回 frame/iframe 生成的 window 对象。

    document.body.innerHTML    //在网页中所要显示出来的内容,

    document.body.innerHTML = "nnnn";   //网页中显示:nnnn

    http://www.runoob.com/jsref/dom-obj-frame.html

    http://www.runoob.com/ 一个资料全的网站

    展开全文
  • 2.22 JS处理富文本前言这篇解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题一、加载配置1.打开博客园写随笔,首先需要登录,这里为了避免透露...

    2.22 JS处理富文本

    前言

    这篇解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题

    一、加载配置

    1.打开博客园写随笔,首先需要登录,这里为了避免透露个人账户信息,我直接加载配置文件,免登录了。

    不懂如何加载配置文件的,看加载firefox配置

    二、打开编辑界面

    1.博客首页地址:bolgurl = "http://www.cnblogs.com/"

    2.我的博客园地址:yoyobolg = bolgurl + "yoyoketang"

    3.点击“新随笔”按钮,id=blog_nav_newpost

    三、定位iframe

    1.打开编辑界面后先不要急着输入内容,先sleep几秒钟

    2.输入标题,这里直接通过id就可以定位到,没什么难点

    3.接下来就是重点要讲的富文本的编辑,这里编辑框有个iframe,所以需要先切换

    四、js输入中文

    1.这里定位编辑正文是定位上图的红色框框位置body部分,也就是id=tinymce

    2.定位到之后,用js的方法直接输入,无需切换iframe

    3.直接点保存按钮,无需再切回来

    五、参考代码:

    #coding:utf-8

    from selenium importwebdriver

    from selenium.webdriver.common.keys importKeys

    importtime

    #profileDir路径对应直接电脑的配置路径

    profileDir = r'C:\xxx\xxx\AppData\Roaming\Mozilla\Firefox\Profiles\1x41j9of.default'profile =webdriver.FirefoxProfile(profileDir)

    driver =webdriver.Firefox(profile)

    bolgurl = "http://www.cnblogs.com/"yoyobolg = bolgurl + "yoyoketang"driver.get(yoyobolg)

    driver.find_element_by_id("blog_nav_newpost").click()

    time.sleep(5)

    edittile = u"Selenium2+python自动化23-富文本"editbody = u"这里是发帖的正文"driver.find_element_by_id("Editor_Edit_txbTitle").send_keys(edittile)

    body = "这里是通过js发的正文内容"

    #js处理iframe问题(js代码太长了,我分成两行了)

    js = 'document.getElementById("Editor_Edit_EditorBody_ifr")'\

    '.contentWindow.document.body.innerHTML="%s"' %body

    driver.execute_script(js)

    #保存草稿

    driver.find_element_by_id("Editor_Edit_lkbDraft").click()

    展开全文
  • 转载来源:...富文本编辑,又称为WYSIWYG (What You See Is What You Get所见即所得),指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑方式有两种编...

    转载来源:https://www.cnblogs.com/xiaohuochai/p/5884206.html

    一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档。实际上差不多就是这样。富文本编辑,又称为WYSIWYG (What You See Is What You Get所见即所得),指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑

    方式

    有两种编辑富文本的方式,一种是使用iframe元素,另一种是使用contenteditable属性

    【1】iframe

    在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性,这个空白的HTML页面可以被编辑,而编辑对象则是该页面

    元素的HTML代码

    designMode属性有两个可能的值:"off"(默认值)和"on"。在设置为"on"时,整个文档都会变得可以编辑

    只有在页面完全加载之后才能设置designMode属性。因此,在包含页面中,需要使用onload事件处理程序

    [注意]此方法必须在服务器端才能执行,否则会提示跨域安全提示

    window.οnlοad= function(){

    frames['wysiwyg'].document.designMode = 'on';

    }

    【2】contenteditable

    把contenteditable属性应用给页面中的任何元素,然后用户立即就可以编辑该元素

    设置document.designMode='on'时,页面的任意位置都可以编辑;使用contenteditable='true'则只对具体元素和其包含的元素起作用

    [注意]一定要区分contenteditable和contentEditable。contenteditable是元素的特性,而contentEditable是对象的属性

    打开富文本编辑

    关闭富文本编辑

    btn1.onclick = function(){wysiwyg.contentEditable = true;}

    btn2.onclick = function(){wysiwyg.contentEditable = false;}

    命令

    与富文本编辑器交互的主要方式,就是使用document.execCommand()。这个方法可以对文档执行预定义的命令,而且可以应用大多数格式

    document.execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)方法需要传递3个参数

    aCommandName表示要执行的命令名称,不可省略

    aShowDefaultUI表示是否展示用户界面,默认为false,可省略

    aValueArgument表示额外参数值,默认为null,可省略

    [注意]为了确保浏览器兼容性,第二个参数应始终设置为false,因为firefox在该参数为true时抛出错误

    段落格式

    居中   document.execCommand('justifyCenter');

    左对齐    document.execCommand('justifyLeft');

    右对齐 document.execCommand('justifyRight');

    添加缩进   document.execCommand('indent');

    去掉缩进   document.execCommand('outdent');

    测试内容

    居中

    左对齐

    右对齐

    添加缩进

    去掉缩进

    var btns = document.getElementsByTagName('button');

    for(var i = 0; i < btns.length; i++){

    btns[i].onclick = function(){

    document.execCommand(this.getAttribute('data-name'));

    }

    }

    文本格式

    字体类型   document.execCommand('fontname',false,sFontName)

    字体大小   document.execCommand('fontsize',false,sFontSize)

    字体颜色   document.execCommand('forecolor',false,sFontColor)

    背景色 document.execCommand('backColor',false,sBackColor)

    加粗   document.execCommand('bold');

    斜体   document.execCommand('italic');

    下划线 document.execCommand('underline');

    测试内容

    宋体

    大字体

    红色字体

    浅绿背景

    加粗

    斜体

    下划线

    var btns = document.getElementsByTagName('button');

    for(var i = 0; i < btns.length; i++){

    btns[i].onclick = function(){

    document.execCommand(this.getAttribute('data-name'),false,this.getAttribute('data-value'));

    }

    }

    编辑

    复制   document.execCommand('copy');

    剪切   document.execCommand('cut');

    粘贴   document.execCommand('paste');(经测试无效)

    全选   document.execCommand('selectAll');

    删除   document.execCommand('delete');

    后删除 document.execCommand('forwarddelete');

    清空格式   document.execCommand('removeFormat');

    前进一步   document.execCommand('redo');

    后退一步   document.execCommand('undo');

    打印    document.execCommand('print');(对firefox无效)

    测试内容

    复制

    剪切

    粘贴

    全选

    删除

    后删除

    清空格式

    前进一步

    后退一步

    打印

    var btns = document.getElementsByTagName('button');

    for(var i = 0; i < btns.length; i++){

    btns[i].onclick = function(){

    document.execCommand(this.getAttribute('data-name'));

    }

    }

    插入

    插入标签    document.execCommand('formatblock',false,elementName);

    插入


      document.execCommand('inserthorizontalrule');

    插入

    1.   document.execCommand('insertorderedlist');

    插入

    •   document.execCommand('insertunorderedlist');

    插入

    document.execCommand('insertparagraph');

    插入图像    document.execCommand('insertimage',false,URL);

    增加链接    document.execCommand('createlink',false,URL);

    删除链接    document.execCommand('unlink');

    测试内容

    插入div

    插入hr

    插入ol

    插入ul

    插入p

    插入图像

    增加链接

    删除链接

    var btns = document.getElementsByTagName('button');

    for(var i = 0; i < btns.length; i++){

    btns[i].onclick = function(){

    document.execCommand(this.getAttribute('data-name'),false,this.getAttribute('data-value'));

    }

    }

    选区

    【getSelection()】

    在富文本编辑器中,使用getSelection()方法,可以确定实际选择的文本。这个方法是window对象和document对象的属性,调用它会返回一个表示当前选择文本的Selection对象。每个Selection对象都有下列属性

    [注意]IE8-浏览器不支持

    anchorNode:选区起点所在的节点

    anchorOffset:在到达选区起点位置之前跳过的anchorNode中的字符数量

    focusNode:选区终点所在的节点

    focusOffset:focusNode中包含在选区之内的字符数量

    isCollapsed:布尔值,表示选区的起点和终点是否重合

    rangeCount:选区中包含的DOM范围的数量

    Selection对象的这些属性并没有包含多少有用的信息。好在,该对象的下列方法提供了更多信息,并且支持对选区的操作

    addRange(range):将指定的DOM范围添加到选区中

    collapse(node,offset):将选区折叠到指定节点中的相应的文本偏移位置

    collapseToEnd():将选区折叠到终点位置

    collapseToStart():将选区折叠到起点位置

    containsNode(node):确定指定的节点是否包含在选区中

    deleteFromDocument():从文档中删除选区中的文本,与document.execCommand("delete",false,null)命令的结果相同

    extend(node,offset):通过将focusNode和focusOffset移动到指定的值来扩展选区

    getRangeAt(index):返回索引对应的选区中的DOM范围

    removeAllRanges():从选区中移除所有DOM范围。实际上,这样会移除选区,因为选区中至少要有一个范围

    reomveRange(range):从选区中移除指定的DOM范围

    selectAllChildren(node):清除选区并选择指定节点的所有子节点

    toString():返回选区所包含的文本内容

    Selection对象的这些方法都极为实用,它们利用了DOM范围来管理选区。由于可以直接操作选择文本的DOM表现,因此访问DOM范围与使用execCommand()相比,能够对富文本编辑器进行更加细化的控制。下面来看一个例子

    var selection = document.getSelection();

    //取得选择的文本

    var selectionText = selection.toString();

    //取得代表选区的范围

    var range = selection.getRangeAt(0);

    //突出显示选择的文本

    var span = document.createElement("span");

    span.style.backgroundColor = "yellow";

    range.surroundContents(span);

    以上代码会为富文本编辑器中被选择的文本添加黄色的背景。这里使用了默认选区中的DOM范围,通过surroundContents()方法将选区添加到了带有黄色背景的元素中

    HTML5将getSelection()方法纳入了标准,IE8-浏览器不支持DOM范围,但可以通过它支持的selection对象操作选择的文本。IE中的selection对象是document的属性,要取得富文本编辑器中选择的文本,首先必须创建一个文本范围,然后再像下面这样访问其text属性

    var range = document.selection.createRange();

    var selectedText = range.text;

    虽然使用IE的文本范围来执行HTML操作并不像使用DOM范围那么可靠,但也不失为一种有效的途径。要像前面使用DOM范围那样实现相同的文本高亮效果,可以组合使用htmlText属性和pasteHTML()方法

    var range = document.selection.createRange();

    range.pasteHTML("");

    以上代码通过htmlText取得了当前选区中的HTML,然后将其放在了一对标签中,最后又使用pasteHTML()将结果重新插入到了选区中

    表单提交

    因为富文本编辑不是使用表单控件实现的,因此富文本编辑器中的HTML不会被自动提交给服务器,而需要手工来提取并提交HTML。为此,通常可以添加一个隐藏的表单字段,让它的值等于从iframe或使用contenteditable属性的元素中提取出的HTML。具体来说,就是在提交表单之前提取出HTML,并将其插入到隐藏的字段中。下面就是通过表单的onsubmit事件处理程序实现上述操作的代码

    form.onsubmit = function(e){

    e = e || event;

    var target = e.target || e.srcElement;

    target.elements["comments"].value = frames["richedit"].document.body.innerHTML;

    }

    在此,通过文档主体的innerHTML属性取得了iframe中的HTML,然后将其插入到了名为"comments"的表单字段中。这样可以确保恰好在提交表单之前填充"comments"字段。如果在代码中通过submit()来手工提交表单,那么一定不要忘记事先执行上面的操作。对于contenteditable元素,也可以执行类似操作

    form.onsubmit = function(e){

    e = e || event;

    var target = e.target || e.srcElement;

    target.elements["comments"].value = document.getElementById('wysiwyg').innerHTML;

    }

    展开全文
  • 原生JS实现简单富文本编辑器原生JS实现简单富文本编辑器点 击(function() {//富文本编辑器类class Editor {constructor() {this.bindElem();}bindElem() {var toolbar = document.getElementById("toolbar");var bs ...
  • 原生JS实现简单富文本编辑器原生JS实现简单富文本编辑器大小123456789点 击(function() {//富文本编辑器类class Editor {constructor() {this.bindElem();}bindElem() {var toolbar = document.getElementById(...
  • 富文本编辑器js插件

    2019-01-02 16:38:30
    使用百度富文本编辑器所需的插件 umeditor.config.js插件
  • 很多时候,在获取后端接口图文详情的富文本内容中,往往img标签中包含的图片如果图片过大,那么在手机无法达到自适应的效果,往往会溢出容器的宽度。那么这就需要我们前端来处理一下了。问题描述: (图片溢出情况)...
  • UE,UM 百度富文本框 编辑器 全部源码,非常使用 我的项目一直在用,大家赶快下载保存起来吧.项目中使用 改变相应的 id 就可以了
  • 这个富文本编辑器,主要是用p自带的contenteditable属性document.execCommand()方法实现的,为了方便布局,偷了下小懒,直接拿table布局了,唉,作为一名那些年的前端开发人员,还真是不不知道该说些啥了。...
  • JS实现富文本编辑器

    2016-12-31 21:06:32
    JS 富文本编辑器 所见即所得 轻量级富文本编辑器
  • 富文本编辑器js,css

    2018-12-14 18:27:07
    该资源提供富文本编辑器所用到样式css以及动态交互的js
  • 富文本quill.js使用

    2021-01-07 15:10:35
    富文本Quill.js背景使用封装组件完整代码 富文本Quill.js 背景 项目中使用vue-quill-editor 不能兼容table所以重新使用了quill.js 使用 引入 Editor: () => import("@/components/editor/Editor") template ...
  • 2.22 JS处理富文本

    2018-06-14 15:07:00
    2.22 JS处理富文本 前言 <富文本>这篇解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的问题一、加载配置 1.打开博客园写随笔,首先需要登录,...
  • 富文本内容存储在数据库,在页面展示的时候,需要向富文本添加一些字符串(比如说:ABCD ,又或者分数等)。工具实现:jquery代码如下:addTextToDom : function(html,text){var $t;try{$t = $(html);if($t.length == ...
  • 前言介绍一款 markdown富文本编辑器源码https://gitee.com/pingfanrenbiji/markdown-nice这里要感谢一些开源作者 这位大佬的微信公众号是本地启动yarnstarthttp://localhost:3000/编译打包yarnbuild编译之后的静态...
  • node js 富文本

    2019-10-15 14:28:21
    安装富文本 npm i ueditor --save 引入模块 let bodyParser = require("body-parser") let ueditor = require("ueditor") app.use(bodyParser.urlencoded({ extended: true })) app.use(bodyParser.json...
  • js 去除富文本

    2019-08-20 09:34:45
    // 去除富文本的标签只获得文本内容 export function removeTag (str) { let fn_result = str; fn_result = fn_result.replace(/(↵)/g, ""); // fn_result = fn_result.replace(/\s*|\t|\r|\n/g, "");// 去除tab...
  • html+js富文本

    2020-08-20 15:38:10
    html+js富文本 rtf是Rich Text Format的缩写,意即多文本格式。这是一种 类似DOC格式(Word文档) 的文件,有很好的兼容性,使用Windows“附件”中的“写字板”就能打开并进行编辑。 div方式实现简单富文本 依赖方法...
  • 无任何依赖,一个js文件包含富文本编辑器所有功能。 介绍iceEditor是一款简约风格的富文本编辑器,体型十分娇小,无任何依赖,基于javascript开发的Web富文本编辑器,轻量、简洁、易用、开源免费,一个少有的全新的...
  • 文章目录一、在vue中引入tinymce二、配置HTML变量三、引入js脚本四、引入组件富文本编辑器一、在vue中引入tinymcenpm install @tinymce/tinymce-vue -S将下载好的 tinymce 脚本库放到你的项目的static目录下面二、...
  • js ueditor(富文本)

    2020-08-24 09:33:32
    js直接引用的富文本插件 地址 提取码:x4zn
  • * 处理富文本里的图片宽度自适应 * 1.去掉img标签里的style、width、height属性 * 2.img标签添加style属性:max-width:100%;height:auto * 3.修改所有style里的width属性为max-width:100% * 4.去掉<br/>...
  • 富文本编辑器借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例,其它富文本编辑器的使用也是类似的。在虚拟环境中安装包。pip3 install django-tinymce...
  • 使用百度富文本编辑器umeditor,所必需的插件umeditor.min.js
  • CKeditor富文本编辑器的js压缩包,CKEditor就像一个在你网页中的文本区域(textarea)一样工作,它提供了一个简单易写的用户界面、版式和丰富的文字输入区域
  • 官方地址[https://eleditor.fixel.cn/demo.html](https://eleditor.fixel.cn/demo.html)上传视频```#contentEditor{width: 100%;min-height: 300px;box-sizing: border-box;padding: 10px;color: #444;...
  • js处理富文本

    2017-04-23 12:13:00
    通过js富文本框输入:我很好 public void setContent(String content) { String js = "document.getElementById('content_ifr').contentWindow.document.body.innerHTML='我很好'"; ((JavascriptExecutor)dr)....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,461
精华内容 1,384
关键字:

富文本js