整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
今天為大家?guī)淼氖且粋€用于在微信小程序中渲染html和Markdown的富文本組件，而且支持代碼高亮，它就是html2wxml！
https://github.com/qwqoffice/html2wxml
1、打開小程序管理后臺，轉(zhuǎn)到設(shè)置 - 第三方服務(wù)，點擊添加插件
2、搜索 html2wxml ，選中并添加
3、添加成功
4、回到小程序開發(fā)環(huán)境，編輯 app.json ，添加插件聲明，最新版為 1.3.0
"plugins": {
"htmltowxml": {
"version": "1.3.0",
"provider": "wxa51b9c855ae38f3c"
}
}5、在對應(yīng)頁面的 json 文件，比如首頁 index.json，添加使用插件組件的聲明
"usingComponents": {
"htmltowxml": "plugin://htmltowxml/view"
}1、復(fù)制整個 html2wxml-component 文件夾到小程序目錄
2、在對應(yīng)頁面的 json 文件，比如首頁 index.json，添加使用組件的聲明，注意路徑
"usingComponents": {
"htmltowxml": "path/to/html2wxml-component/html2wxml"
} 1、復(fù)制整個 html2wxml-template 文件夾到小程序目錄
2、在對應(yīng)頁面的 js 文件，比如首頁 index.js，添加引用聲明，并使用html2wxml方法進行數(shù)據(jù)綁定，注意路徑，參數(shù)分別為綁定的數(shù)據(jù)名、已解析的富文本數(shù)據(jù)、當(dāng)前頁面對象和容器與屏幕邊緣的單邊的距離
var html2wxml = require('path/to/html2wxml-template/html2wxml.js');
html2wxml.html2wxml('article', res.data, this, 5);3、在對應(yīng)頁面的 wxml 文件，比如首頁 index.wxml，添加引用模板的聲明，并使用模板，注意路徑和綁定的數(shù)據(jù)名
<import src="path/to/html2wxml-template/html2wxml.wxml" />
<template is="html2wxml" data="{{wxmlData:article}}" />4、在對應(yīng)頁面的 wxss 文件，比如首頁 index.wxss或app.wxss， 引入樣式表和你喜歡的代碼高亮樣式，注意路徑
@import "path/to/html2wxml-template/html2wxml.wxss";
@import "path/to/html2wxml-template/highlight-styles/darcula.wxss";// 將Page中的content數(shù)據(jù)作為HTML格式渲染
<htmltowxml text="{{content}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 禁用代碼高亮功能
<htmltowxml text="{{content}}" highlight="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 禁用代碼行號顯示功能
<htmltowxml text="{{content}}" linenums="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 代碼高亮樣式改為tomorrow
<htmltowxml text="{{content}}" highlightStyle="tomorrow" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 設(shè)置代碼高亮檢測語言 (最多6個，自行搭建服務(wù)不受限制)
<htmltowxml text="{{content}}" highlightLanguages="{{['html','js','php','css','cpp','ruby']}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 對HTML數(shù)據(jù)中的img標(biāo)簽的相對路徑補全域名
<htmltowxml text="{{content}}" imghost="https://www.qwqoffice.com" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 禁用加載中動畫
<htmltowxml text="{{content}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 將Page中的text數(shù)據(jù)作為Markdown格式渲染
<htmltowxml text="{{text}}" type="md" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>
// 直接渲染Page中的已經(jīng)過解析的obj數(shù)據(jù)
<htmltowxml json="{{obj}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>富文本的解析默認是由QwqOffice完成，存在不穩(wěn)定因素，你可以自行搭建解析服務(wù)或?qū)⒔馕鼋M件引入到你的項目中。
1、復(fù)制整個 html2wxml-php 文件夾到項目目錄中
2、引入類文件class.ToWXML.php
include( 'path/to/html2wxml-php/class.ToWXML.php' );3、實例化html2wxml，進行解析并輸出，示例：
$towxml = new ToWXML();
$json = $towxml->towxml( '<h1>H1標(biāo)題</h1>', array(
'type' => 'html',
'highlight' => true,
'linenums' => true,
'imghost' => null,
'encode' => false,
'highlight_languages' => array( 'html', 'js', 'php', 'css' )
) );
echo json_encode( $json, JSON_UNESCAPED_UNICODE );新聞類的小程序，難免要使用富文本編輯器，而富文本編輯器內(nèi)容，是帶有html標(biāo)簽的，那么問題來了，小程序并不支持html標(biāo)簽，所以我們需要將帶有html標(biāo)簽的內(nèi)容，轉(zhuǎn)換成小程序支付的標(biāo)簽。
目前流行的，有兩種方法：
優(yōu)勢：代碼少，執(zhí)行效率高
缺點：只是用正則去掉識別不了的html標(biāo)簽，原內(nèi)容的樣式全部丟失
使用步驟：
Step1: 在app.js 添加方法
Step2: 在頁面的js文件里，獲取app ，并在需要的位置調(diào)用方法
轉(zhuǎn)換結(jié)果：
圖中代碼可見，樣式及標(biāo)簽都沒有了。
所以此方法，只適用于簡單的去除HTML標(biāo)簽，下期我會帶來更為完美的解決方案。
（需要代碼的同學(xué)請留言）
文共2099字，預(yù)計學(xué)習(xí)時長4分鐘
也許，你時常會遇到要開發(fā)基于Web的文本編輯器的情況。有時候，只需實現(xiàn)一個簡約且輕量級的應(yīng)用程序，不必有其他任何不必要的功能。而有時候，你的首要任務(wù)是保護用戶的商業(yè)機密。
在這樣的情況下，如果想知道“背后發(fā)生了什么”，最好是從頭開始創(chuàng)建應(yīng)用程序。所幸，可采取的解決方案有很多。因此，總能找到一種工具，來創(chuàng)建符合用戶需求和資金要求的在線文本編輯器。
本文將簡要介紹五個JavaScript富文本編輯器，以幫助你找到滿足期望的編輯器。
Froala 編輯器是一個JavaScript WYSIWYG編輯器，主要特點是能輕松地與主流開發(fā)框架進行集成。目前，可以將Froala與React.js，Aurelia，Angular，Ionic，Django和其他框架一起使用。作為此工具的創(chuàng)建者，F(xiàn)roala 編輯器是由開發(fā)人員為開發(fā)人員設(shè)計的。功能強大且豐富的API為開發(fā)者提供了廣泛的可能性，其中包含許多優(yōu)秀代碼示例文檔，這些文檔將幫助用戶在幾分鐘內(nèi)就能掌握并使用。
Froala編輯器的另一個顯著優(yōu)勢是易于添加新功能。大量易于使用的插件（其中有30多個）無需進行復(fù)雜的操作便可添加新功能。 該編輯器具有編寫良好的代碼，并具有結(jié)構(gòu)化和文檔化的特點，非常易于理解、維護和擴展。
目前，有三個定價方式：基礎(chǔ)版（239美元）、專業(yè)版（1199美元）和企業(yè)版（1999美元）。
結(jié)論：對于那些從事多個項目并希望與不同庫輕松集成的人來說，F(xiàn)roala編輯器將是一個很好的選擇。
Textbox.io是一款極簡但功能強大的在線文本編輯器，支持桌面設(shè)備和移動設(shè)備。主要功能包含內(nèi)置的圖像處理和存儲、文件拖放、拼寫檢查和自動更正。此外，該工具還實現(xiàn)了屏幕閱讀器等輔助技術(shù)，并符合WAI-ARIA可訪問性標(biāo)準(zhǔn)。
移動設(shè)備支持用戶使用適合移動設(shè)備的用戶界面，從相機或圖庫上傳圖像，使用Siri或Cortana處理文本等?？梢酝ㄟ^應(yīng)用標(biāo)準(zhǔn)和自定義類或樣式來更改Textbox.io的外觀。
Textbox.io支持與ASP.NET，Knockout，XPage和Angular的集成。 與前面的列舉的編輯器相比，這個范圍并沒有那么大，但它仍然是有優(yōu)勢的。
Textbox.io提供以下定價方式：免費許可（非商業(yè)用途），商業(yè)（99美元）和合作伙伴（499美元）。
結(jié)論：對于那些專注于移動解決方案的人來說，該工具是很好的選擇。
DHTMLX富文本編輯器是一個完全可自定義的JavaScript文本編輯器，支持HTML和Markdown以及純文本作為輸入和輸出格式。在Angular，React和Vue.js項目中可以使用此文本編輯器進行集成。
使用基于DHTMLX富文本編輯器的在線應(yīng)用程序的用戶可以在簡潔的經(jīng)典模式和文檔模式之間切換。全屏模式對于使用小屏幕設(shè)備的用戶非常有用。這種文本編輯器具有完全可自定義的外觀，使得用戶可以創(chuàng)造獨一無二的外觀和感覺。，通過使用任何所需的圖標(biāo)、字體或顏色，你可以開發(fā)具有識別度的設(shè)計。此外，還可以更改可用控件的性能，并根據(jù)需要添加自己的控件。
還有一些有用的功能，如計算單詞、字符和其他自定義元素的數(shù)量。DHTMLX富文本編輯器支持塊引用、鏈接以及所有必要的格式和編輯功能。這個組件是最早的富文本編輯器之一，發(fā)展前景可觀。該編輯器開發(fā)商聲稱他們有著深遠的謀劃。
有三種不同的許可證定價可供選擇：由5名開發(fā)人員組成的團隊，其商業(yè)許可證將花費149美元。 20個開發(fā)人員和5個項目的企業(yè)許可證價格為449美元。無限數(shù)量的開發(fā)人員和項目的終極許可證價格為669美元。除了這些計劃，還可以在GNU GPL v2下載此編輯器以用于開源項目（請查看底部的表格）。
結(jié)論：在列出的JavaScript文本編輯器列表中，DHTMLX富文本編輯器在價格和功能之間提供了最佳平衡。對于那些精打細算的人來說，這將是一個很好的選擇。
Imperavi Redactor是一個基于Web的文本編輯器，提供流暢、干凈的設(shè)計，具有可擴展性和無限的靈活性，其高效的API和驚人的用戶體驗更是別具特色。其模塊化架構(gòu)允許使用者快速擴展應(yīng)用程序的功能。清晰的代碼和簡潔的UI為開發(fā)人員和用戶創(chuàng)造了極好的體驗。
目前，這款編輯器擁有22個插件來完成常規(guī)工作。此外，使用者還可以輕松地創(chuàng)建自己的插件。沒有必要作為技術(shù)專家來安裝和配置這個文本編輯器。在這個編輯器內(nèi)文檔很好寫且不會造成任何麻煩。
定價方式很簡單：專業(yè)版將花費199美元；如果想要銷售或發(fā)布軟件，OEM許可證的價格為1299美元。
結(jié)論：Imperavi Redactor是為那些尋找內(nèi)禪的人設(shè)計和創(chuàng)造的。
Syncfusion富文本編輯器是一個輕量級JavaScript工具，支持HTML和Markdown?？梢允褂盟鼇韯?chuàng)建Web和移動應(yīng)用程序，如博客編輯器、信使、在線論壇等。內(nèi)聯(lián)模式使內(nèi)聯(lián)編輯器在用戶單擊可編輯區(qū)域中的內(nèi)容后顯示。
工具欄配置有很多可選性。例如，可以根據(jù)項目的要求向應(yīng)用添加多行工具欄、展開工具欄、快速工具欄或浮動工具欄。此外，還可以根據(jù)類別配置工具欄按鈕和組命令。用戶可以在文本中插入圖像和超鏈接。并且，可以插入HTML表格來簡化財務(wù)數(shù)據(jù)的工作。所有功能都可以動態(tài)操作。
在撰寫本文時，Syncfusion富文本編輯器提供了與Angular、React和Vue.js的集成。庫的列表所展示的內(nèi)容不是很多，但它包含了最受歡迎的選項，這是一個加分項。
定價方式為：每位開發(fā)人員可以在第一年支付995美元，并獲取包括文本編輯器在內(nèi)的60多個控件。另一個選擇是為每個開發(fā)人員支付2,495美元以獲得1,000多個控件和文本編輯器。
結(jié)論：對于那些正在尋找具有數(shù)十種可用控件來綜合解決方案的人來說，Syncfusion富文本編輯器將是一個不錯的選擇。
留言 點贊 關(guān)注
我們一起分享AI學(xué)習(xí)與發(fā)展的干貨
歡迎關(guān)注全平臺AI垂類自媒體 “讀芯術(shù)”
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
