将TinyMCE所见即所得HTML编辑器集成到React Native应用程序中



我正在尝试将TinyMCE所见即所得HTML编辑器合并到react原生WebView组件中。有办法完成这项任务吗?

我在react原生WebView组件中添加了Tinymce所见即所得编辑器。我的Webview组件如下所示:

<WebView
source={require("./WebView.html")}
style={{width: Dwidth, height: Dheight}}
onMessage={(event)=>{
const x= event.nativeEvent.data;
console.log("x: ",x);
console.log("Type is: ",typeof(x));
}}
/>

相应的WebView.html文件:

<head>
<style>
body {
padding: 5px;
}
</style>
<script src="./tinymce.full.js?apiKey=<API_KEY>">
</script>
<script>
tinymce.init({
selector: '#mytextarea'
});
function manipulateForm() {
var textContent = tinymce.activeEditor.getContent({format: 'raw'});
manipulateFormNew(textContent);
}
function manipulateFormNew(textContent) {
alert(textContent);
window.postMessage(textContent);
}
</script>
</head>
<body>
<form name="myForm" onSubmit="return manipulateForm()" method="post">
<textarea id="mytextarea">Please Share your thoughts here</textarea>
<input type="submit" id="submit__button" value="Post Your Thoughts">
</form>
</body>

这里的tinymce.full.js文件包含TinymceJavaScript代码。同一目录还包含其他Tinymce资源,如皮肤、主题、样式等文件。

最新更新