按照eact-native-zss-rich-text-editor 操作先下載這個模塊
1讼呢、npm i --save react-native-zss-rich-text-editor
2、安裝README.md說明：
修改安卓項目下的android/app/build.gradle文件：
project.afterEvaluate {
apply from: '../../node_modules/react-native-zss-rich-text-editor/htmlCopy.gradle';
copyEditorHtmlToAppAssets(file('../../node_modules/react-native-zss-rich-text-editor'))
}
這時如果你直接用了這個模塊的話荠藤，你會發(fā)現(xiàn)他一直報無法讀取NavigationType屬性押框。（因為它依賴于react-native-webview-bridge-updated這個庫）
解決辦法：
iOS
- 用 xcode's 打開你自己的IOS項目
- 點擊你項目的Libraries目錄
- 選擇 Add Files to ..
4.找到你項目的node_modules目錄下得response -native-webview-bridge中IOS目錄溪食，把React-Native-Webview-Bridge.xcodeproj添加IOS項目中
5.點擊你的IOS根目錄掘托，選到Build Phases下
- 添加你剛剛導入的那個庫
- 重新編譯，IOS就可以用了
Android
- 添加以下代碼到MainApplication.java`文件下(RN 小于 0.29的）
import com.github.alinz.reactnativewebviewbridge.WebViewBridgePackage;
- 添加以下代碼到MainApplication.java文件下
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new WebViewBridgePackage() //<- this
);
}
- 添加以下代碼到你的android/setting.gradle文件下逗物，記得有項目依賴的話，就不用重復(fù)添加了
include ':app', ':react-native-webview-bridge'
project(':react-native-webview-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-bridge/android')
- 添加以下代碼到你的android/app/build.gradle文件下
compile project(':react-native-webview-bridge')
- 全部完成瑟俭，你可以用安卓接著飆車了
你在使用官方的示例時會發(fā)現(xiàn)以下問題
1翎卓、輸入框滾動條
修改node_modules下的editor.html文件,修改樣式：
html,body{
overflow-x: hidden;
overflow-y: auto;
width: 97%;
height: 100%;
}
div.zss_editor_content {
font-family: Arial, Helvetica, sans-serif;
color: #000;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: auto;
}
#zss_editor_content {
/*padding-left: 20px;*///注釋掉，不然會出排版問題
/*padding-right: 10px;*///注釋掉摆寄，不然會出排版問題
}
2失暴、 內(nèi)容后滾問題坯门，下沉問題
<RichTextEditor
ref={(r) => this.richtext = r}
style={styles.richText}
initialContentHTML={'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'}
editorInitializedCallback={() => this.onEditorInitialized()}
editorInitializedCallback={() => {
//解決內(nèi)容后滾問題
this.richtext.setEditorHeight(75);
//打開后直接聚焦輸入框
this.richtext.focusContent(true)
}}
/>
3、使用了隱藏標題方法逗扒，但是每次打開還是會有一閃而過的標題輸入框古戴，修改editor.html的樣式
#separatorContainer {
display: none;//默認隱藏
-webkit-user-select: none;
padding-left: 10px;
padding-right: 10px;
}
#zss_editor_title {
display: none;//默認隱藏
padding-left: 10px;
padding-right: 10px;
}
4 、安卓運行很緩慢啥問題矩肩，比如刪一個字或者寫一個字或者添加圖片劇慢
修改包的src/editor.html文件现恼，添加下面這個方法
function getMirrorInfo(element) {
if (element.mirrorInfo) {
return element.mirrorInfo;
}
var div = document.createElement('div');
var style = div.style;
var hidden = 'hidden';
var focusOut = 'focusout';
style.whiteSpace = 'pre-wrap';
style.wordWrap = 'break-word';
style.position = 'absolute';
style.visibility = hidden;
style.overflow = hidden;
document.body.appendChild(div);
element.mirrorInfo = { div: div, span: document.createElement('span') };
element.addEventListener(focusOut, function cleanup() {
delete element.mirrorInfo;
document.body.removeChild(div);
element.removeEventListener(focusOut, cleanup);
});
return element.mirrorInfo;
}
修改包的src/editor.html文件，zss_editor.getCaretYPosition 方法
原來的代碼
zss_editor.getCaretYPosition = function() {
var sel = window.getSelection();
// Next line is comented to prevent deselecting selection. It looks like work but if there are any issues will appear then uconmment it as well as code above.
//sel.collapseToStart();
var range = sel.getRangeAt(0);
var span = document.createElement('span');// something happening here preventing selection of elements
range.collapse(false);
range.insertNode(span);
var topPosition = span.offsetTop;
span.parentNode.removeChild(span);
return topPosition;
}
修改后的代碼
zss_editor.getCaretYPosition = function() {
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var container = range.endContainer;
var selectedNode = container.nodeType === 3 ? container.parentNode : container;
var position = selectedNode.selectionEnd;
var _a = getMirrorInfo(selectedNode);
var div = _a.div;
var span = _a.span;
var content = selectedNode.textContent.substring(0, position);
div.textContent = content;
span.textContent = (selectedNode.textContent.substring(position)) || '.';
div.appendChild(span);
var rect = selectedNode.getBoundingClientRect();
var top = span.offsetTop - selectedNode.scrollTop + rect.top;
return top;
}
5 黍檩、 圖片無法插入叉袍，插入base64編碼的圖片就行了
ImagePicker.openPicker({
includeBase64: true,
width: 300,
height: 400,
cropping: true
}).then(image => {
console.log(image)
let imageSrc = `data:${image.mime};base64,${image.data}`;
this.richtext.insertImage({src: imageSrc});
console.log(image);
});
暫時就遇到這么多了。
至于api啥的刽酱，直接看下面的參數(shù)和const.js文件的方法列表
static propTypes = {
initialTitleHTML: PropTypes.string,
initialContentHTML: PropTypes.string,
titlePlaceholder: PropTypes.string,
contentPlaceholder: PropTypes.string,
editorInitializedCallback: PropTypes.func,
customCSS: PropTypes.string,
hiddenTitle: PropTypes.bool,
enableOnChange: PropTypes.bool,
footerHeight: PropTypes.number,
contentInset: PropTypes.object
};
