uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）

照着腾讯文档小程序开发了微信小程序富文本编辑器组件，这几天做个整理，如有这个需求可以前往腾讯文档小程序 *** 作看看实际效果。毕竟参照的是微信自家小程序，无法做到百分百效果，只能按现有开放api尽可能实现。

项目地址：

https://github.com/chellel/wechat-editor-project

uniapp插件市场：

https://ext.dcloud.net.cn/plugin?id=6365

editor富文本编辑器组件官方文档：

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

否则会受到小程序css影响。小程序本身editor标签有css样式：

editor {

display: block

position: relative

box-sizing: border-box

-webkit-user-select: text

user-select: text

outline: 0

overflow: hidden

width: 100%

height: 200px

min-height: 200px

}

that.updatePosition(keyboardHeight)

that.editorCtx.scrollIntoView()

在插入目标文字时，将值设为\n'，可以实现换行

this.editorCtx.insertText({ text: '\n' })

参考：请问editor组件控制拉起键盘 *** 作支持吗？

https://developers.weixin.qq.com/community/develop/doc/0006eeb6ae8cf0e7f3293e13f56400?highLine=editor%25E6%2598%25BE%25E7%25A4%25BA%25E9%2594%25AE%25E7%259B%2598

小程序技术专员-sanford 2019-09-20

不支持的。iOS无法通过接口拉起键盘，必须用户点击；安卓则可以。所以，终究是不一致，不行。。

该组件主要为微信editor组件的api调用集成封装，因此受到的限制同文档描述一致，即编辑器内支持部分 HTML 标签和内联样式，不支持class和id，支持的标签详见： https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 。

不满足的标签会被忽略，<div>会被转行为<p>储存。

这也是为什么在做富文本解析时，仅仅用rich-text组件无法有效还原html内容，在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签。因此最好方式是引入市场封装好的富文本解析插件去解析html。

所以，开发者需要自行权衡在做富文本编辑开发时，是否使用微信自带的editor组件，或者参考腾讯文档小程序采用webview内嵌网页等方式去渲染。

小程序富文本编辑器editor初体验：( https://www.jianshu.com/p/a932639ba7a6 )

如果是微信原生开发，将demo组件中的相关dom元素标签和api换成微信原生即可。

WebBrowser的8个方法、13个属性和事件

方法 说明 ===========================================

　GoBack 相当于IE的“后退”按钮，使你在当前历史列表中后退一项

　GoForward 相当于IE的“前进”按钮，使你在当前历史列表中前进一项

　GoHome 相当于IE的“主页”按钮，连接用户默认的主页

　GoSearch 相当于IE的“搜索”按钮，连接用户默认的搜索页面

　Navigate 连接到指定的URL

　Refresh 刷新当前页面

　Refresh2 同上，只是可以指定刷新级别，所指定的刷新级别的值来自RefreshConstants枚举表，

该表定义在ExDisp.h中，可以指定的不同值如下：

REFRESH_NORMAL 执行简单的刷新，不将HTTP pragma: no-cache头发送给服务器

REFRESH_IFEXPIRED 只有在网页过期后才进行简单的刷新

REFRESH_CONTINUE 仅作内部使用。在MSDN里写着DO NOT USE! 请勿使用

REFRESH_COMPLETELY 将包含pragma: no-cache头的请求发送到服务器

　Stop 相当于IE的“停止”按钮，停止当前页面及其内容的载入

属性 说明 ===========================================================

　Application 如果该对象有效，则返回掌管WebBrowser控件的应用程序实现的自动化对象(IDispatch)。如果在宿主对象中自动化对象无效，这个程序将返回WebBrowser

控件的自动化对象

　Parent 返回WebBrowser控件的父自动化对象，通常是一个容器，例如是宿主或IE窗口

　Container 返回WebBrowser控件容器的自动化对象。通常该值与Parent属性返回的值相同

　Document 为活动的文档返回自动化对象。如果HTML当前正被显示在WebBrowser中，则

Document属性提供对DHTML Object Model的访问途径

　TopLevelContainer 返回一个Boolean值，表明IE是否是WebBrowser控件顶层容器，是就返回true

　Type 返回已被WebBrowser控件加载的对象的类型。例如：如果加载.doc文件，就会返

回Microsoft Word Document

　Left 返回或设置WebBrowser控件窗口的内部左边与容器窗口左边的距离

　Top 返回或设置WebBrowser控件窗口的内部左边与容器窗口顶边的距离

　Width 返回或设置WebBrowser窗口的宽度，以像素为单位

　Height 返回或设置WebBrowser窗口的高度，以像素为单位

　LocationName 返回一个字符串，该字符串包含着WebBrowser当前显示的资源的名称，如果资源

是网页就是网页的标题；如果是文件或文件夹，就是文件或文件夹的名称

　LocationURL 返回WebBrowser当前正在显示的资源的URL

　Busy 返回一个Boolean值，说明WebBrowser当前是否正在加载URL，如果返回true

就可以使用stop方法来撤销正在执行的访问 *** 作

事件===========================================

BeforeNavigate2 导航发生前激发，刷新时不激发

CommandStateChange 当命令的激活状态改变时激发。它表明何时激活或关闭Back和Forward

菜单项或按钮

DocumentComplete 当整个文档完成是激发，刷新页面不激发

DownloadBegin 当某项下载 *** 作已经开始后激发，刷新也可激发此事件

DownloadComplete 当某项下载 *** 作已经完成后激发，刷新也可激发此事件

NavigateComplete2 导航完成后激发，刷新时不激发

NewWindow2 在创建新窗口以前激发

OnFullScreen 当FullScreen属性改变时激发。该事件采用VARIENT_BOOL的一个输

入参数来指示IE是全屏显示方式(VARIENT_TRUE)还是普通显示方式(VARIENT_FALSE)

OnMenuBar 改变MenuBar的属性时激发，标示参数是VARIENT_BOOL类型的。

VARIANT_TRUE是可见，VARIANT_ FALSE是隐藏

OnQuit 无论是用户关闭浏览器还是开发者调用Quit方法，当IE退出时就会激发

OnStatusBar 与OnMenuBar调用方法相同，标示状态栏是否可见。

OnToolBar 调用方法同上，标示工具栏是否可见。

OnVisible 控制窗口的可见或隐藏，也使用一个VARIENT_BOOL类型的参数

StatusTextChange 如果要改变状态栏中的文字，这个事件就会被激发，但它并不理会程序是否有状态栏

TitleChange Title有效或改变时激发

重大或有趣的对象属性：

WebBrowser.OleObject.Document

WebBrowser.OleObject.Document.All

WebBrowser.OleObject.Document.bgColor

WebBrowser.OleObject.Document.Body.Style.overflowX

WebBrowser.OleObject.Document.Body.Style.overflowY

WebBrowser.OleObject.Document.Body.Style.zoom

WebBrowser.OleObject.Document.cookie

WebBrowser.OleObject.Document.documentElement.innerHTML

WebBrowser.OleObject.Document.documentElement.innerText

WebBrowser.OleObject.Document.FileSize

WebBrowser.OleObject.Document.Frames

WebBrowser.OleObject.Document.Images

WebBrowser.OleObject.Document.LastModified

WebBrowser.OleObject.Document.Links

WebBrowser.OleObject.Document.Location.Protocol

WebBrowser.OleObject.Document.ParentWindow

WebBrowser.OleObject.Document.ParentWindow.ScrollBy （九：整数iY ：整数）

WebBrowser.OleObject.Document.selection

WebBrowser.OleObject.Document.Title

WebBrowser.OleObject.Document.URL

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document

提供有关文件显示。详情见http://msdn.microsoft.com/workshop/a...j_document.asp 。

文件相当于：

WebBrowser.Document作为IHTMLDocument2

注：

如果没有文件已加载然后（ WebBrowser.Document作为IHTMLDocument2 ）将为零。为了避免运行时例外检查的价值，才能使用它，例如：

变种

文件： IHTMLDocument2

开始

文件： = WebBrowser.Document作为IHTMLDocument2

如果转让（文件） ，然后

。

。

简洁，并不是所有的例子包括：本网页上的这一错误检查。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.All

阵列的所有项目/物体在文件中。这包括图片，链接，文字等

。长度返回一些内容数组。

。项目（ 0 ）传回的第一份文件内容。

。项目（ n ）段。 InnerText读/写之间的文字开始和结束标记的项目。

。项目（ n ）段。 ScrollIntoView （ bAlignToTop ：布尔）卷轴项目'东经'到的观点。 bAlignToTop =真正保持一致的窗口顶部的。 bAlignToTop =假以配合窗口底部的。

文件相当于：

变种

文件： IHTMLDocument2

docAll ： IHTMLElementCollection

开始

文件： = WebBrowser.Document作为IHTMLDocument2

如果转让（文件）

docAll ： = document.all

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.bgColor

设置或检索背景颜色的文件。例如，设置背景颜色为白色：

WebBrowse.OleObject.Document.bgColor ： = ' ＃ FFFFFF '

或将其设置为黑色：

WebBrowse.OleObject.Document.bgColor ： = ' ＃ 000000 '

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.Body.Style.overflowX

读/写字符串值，指明是否水平滚动条显示。价值观是：

可见默认。没有滚动条。显示被截断，以明显的地区。

滚动滚动条始终可见-无论需要与否。

隐藏没有滚动条。内容以外的可见光区是隐藏的。

汽车的内容被截断和滚动条显示如果需要的话。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.Body.Style.overflowY

至于WebBrowser.OleObject.Document.Body.Style.overflowX但垂直滚动条。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.Body.Style.zoom

设置或检索放大使用。默认值是1 ，没有放大。要显示在正常大小的一半使用0.5 。为了显示其在正常大小的两倍使用2 。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.cookie

返回一个字符串的所有浏览器的Cookies举行-这是本地存储的Cookie ，而不是服务器端的cookie 。

文件相当于：

变种

文件： IHTMLDocument2

饼干：字符串

开始

文件： = WebBrowser.Document作为IHTMLDocument2

如果转让（文件） ，然后

饼干： = document.cookie

Cookies是代表字符串的形式：

名称=值

注：

如果有多个名称/值配对然后这些都是分开分号('').

某些字符可能是'逃跑' -这是由一个百分比符号之后，两个位数的十六进制数的ASCII码代表的性质。名单的ASCII码请点击这里。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.documentElement.innerHTML

对于HTML文件，返回文件包括HTML格式。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.documentElement.innerText

返回文本文件的内容-在没有任何（ HTML ）的格式。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.FileSize

回报率的大小， HTML文件中的字节。

文件相当于：

（ WebBrowser.Document作为IHTMLDocument2 ） 。档案大小

请注意，该文件相当于返回文件大小作为一个字符串，它会抛出一个异常如果没有页面加载。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.Frames

阵列框架的文件中。

。长度返回若干帧的文件中。

。项目（ 0 ）传回的第一帧。

。项目（ 0 ） 。文件返回文档对象代表帧。

。项目（ 0 ） 。 Document.URL返回的URL的第一帧。

文件相当于：

（ WebBrowser.Document作为IHTMLDocument2 ） 。框架

例如，要获取有关帧作为（ 1 IHTMLWindow2或IHTMLDocument2 ） ：

变种

文件： IHTMLDocument2

ole_index ： OleVariant

doc_all ： IHTMLElementCollection

frame_dispatch ： IDispatch

frame_win ： IHTMLWindow2

frame_doc ： IHTMLDocument2

开始

文件： = WebBrowser.Document作为IHTMLDocument2

ole_index ： = 0

frame_dispatch ： = document.Frames.Item （ ole_index ）

如果frame_dispatch “ ”零然后

开始

frame_win ： = frame_dispatch作为IHTMLWindow2

frame_doc ： = frame_win.document

。

。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.Images

阵列的图像载于本文件。

。长度传回的图像文件中。

。项目（ 0 ）传回的图片。

。项目（ 0 ） 。 Src的读取或写入的路径，第一形象。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.LastModified

退货时，文件的最后修改，作为一个字符串。正式的格式是“月/日/年时时：分分：党卫军” ，但在我的经验，通常是“月/日/年时时：分分：党卫军” 。

文件相当于：

变种

htmlDoc ： IHTMLDocument2

dateString ：字符串

开始

htmlDoc ： = WebBrowser.Document作为IHTMLDocument2

如果转让（ htmlDoc ）

dateString ： = html_doc.LastModified

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.Links

阵列的各个环节（即“的<a href...>”分子） 。

。长度返回的连结数目。

。项目（ 0 ）传回的第一个链接。

。项目（ 0 ） 。 href返回地址的第一个链接。

。项目（ 0 ） 。标记名的名称，返回类型的第一个环节。的链接，这是永远的A 。

文件相当于：

变种

htmlDoc ： IHTMLDocument2

allLinks ： IHTMLElementCollection

firstLink ： IHTMLElement

网址：字符串

开始

htmlDoc ： = WebBrowser.Document作为IHTMLDocument2

allLinks ： = htmlDoc.Links

firstLink ： = allLinks.Item （ 0 ， '' ）作为IHTMLElement

网址： = firstLink.toString

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.Location.Protocol

返回一个字符串代表'协议'部分网址。这将（通常）是：

议定书价值意蕴

文件：本地或网络文件。

ftp:FTP 。

的Gopher ： Gopher网络会议。

http:Hypertext传输协议

网址为： https ：安全超文本传输协议。

的JavaScript ： JavaScript代码。

地址：客户发送电子邮件。

新闻：新闻组。

水库：资源文件。

的Telnet ：远程登录终端登录。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.ParentWindow

返回（只读）提到集装箱窗口。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.ParentWindow.ScrollBy （九：整数iY ：整数）

横向卷轴的窗口'的iX '像素-负值春联左边，一个积极的价值春联权利。垂直滚动窗口的' iY '像素-负值春联和一个积极的价值卷轴下来。

文件相当于：

变种

文件： IHTMLDocument2

开始

文件： = webBrowser.Document作为IHTMLDocument2

如果转让（文件） ，然后

document.parentWindow.scrollBy （九， iY ）

注：

该窗口不会滚动向上/向下，如果它已经达到了正常的顶部/底部限制。同样不会滚动左/右如果它已经达到了正常的左/右限制。因此，例如，当一个文件是第一次尝试加载滚动它-1 ， -1不会有任何影响。

这将影响到框架文件，因为通常的顶层文件将不会滚动，即使将它包含帧。下面的过程说明了如何滚动每一份文件和框架，包括嵌入式框架：

程序ScrollBrowserWindowBy （常量窗口： IHTMLWindow2 九：整数iY ：整数）

变种

指数：整数

oleIndex ： OleVariant

frameDispatch ： IDispatch

childWindow ： IHTMLWindow2

文件： IHTMLDocument2

开始

如果转让（窗口） ，然后

尝试

window.scrollBy （九， iY ）

/ /如果有任何帧然后尝试滚动它们。

文件： = window.Document作为IHTMLDocument2

如果转让（文件） ，然后

指数： = 1 document.Frames.Length做

开始

oleIndex ： =指数- 1

frameDispatch ： = document.Frames.Item （ oleIndex ）

如果转让（ frameDispatch ） ，然后

开始

childWindow ： = frameDispatch作为IHTMLWindow2

ScrollBrowserWindowBy （ childWindow ，九， iY ）

结束

结束

除

电子商务：异常年底开始做

结束

结束

并调用它：

变种

文件： IHTMLDocument2

开始

文件： = webBrowser.Document作为IHTMLDocument2

如果转让（文件） ，然后

ScrollBrowserWindowBy （ document.parentWindow ， 5,10 ）

如果您尝试呼叫' scrollBy '的窗框载场外页面就会抛出一个“拒绝访问”的例外，因此“尝试..除了”在上面的例子。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.selection

提供对当前选定的部分文件。

例如，如果要获得当前选定的文字：

变种

文件： IHTMLDocument2

selectionObj ： IHTMLSelectionObject

selectionRange ： IHtmlTxtRange

selectedText ：字符串

开始

文件： = WebBrowser.Document作为IHTMLDocument2

selectionObj ： = document.selection

selectionRange ： = selectionObj.CreateRange作为IHtmlTxtRange

selectedText ： = selectionRange.text

。

。

注：上面的例子将需要修改的文件略微带有框架。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.Title

的标题当前文档。这是一样的财产LocationName 。

-------------------------------------------------- ------------------------------

WebBrowser.OleObject.Document.URL

网址目前的文件。这是一样的财产LocationURL 。

---