javascript - 将 TinyMCE WYSIWYG HTML 编辑器集成到 React Native 应用程序中
问题描述
我正在尝试将 TinyMCE WYSIWYG HTML 编辑器合并到反应原生 WebView 组件中。有没有办法执行这个任务?
解决方案
我在 react-native WebView 组件中添加了 Tinymce WYSIWYG 编辑器。我的 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 文件包含 Tinymce JavaScript 代码。同一目录还包含其他 Tinymce 资源,如皮肤、主题、样式等文件。
推荐阅读
- ios - Firebase 打印快照工作正常并获取字典,但是当尝试访问单个字段数据时,某些字段返回 nil
- android - 安装Android Studio后如何修复“属性android:layout_width,layout_height和textview不允许”
- google-sheets - 谷歌表格公式建议
- amazon-web-services - curl命令在aws ec2实例上给出'curl:(6)无法解析主机:XXX.XXX.XXX'错误
- css - 如何修复 html 表中的标题,其中包含具有行跨度和 coll-span 的多行标题
- reactjs - 如何使用护照和护照-jwt 正确保护我的所有路线
- c# - 无论是在 web.config 中还是在代码中,我应该在哪里包含 MetaData 文件?
- billing - 使用提供的客户端/UI 对 api 调用进行计费
- vb.net - 为有理位的属性项写入 Exif 元数据 (rational64u)
- preview - 如何让预览在 SwiftUI 项目中再次工作