编辑器

src/pages/index/index.jsx

@@ -1,6 +1,14 @@
 import { Component } from "react";
 import Taro from "@tarojs/taro";
-import { View, Text, Image, Button } from "@tarojs/components";
+import {
+  View,
+  Text,
+  Image,
+  Button,
+  Input,
+  Editor,
+  Textarea,
+} from "@tarojs/components";
 import "./index.scss";
 import { AtTabBar } from "taro-ui";
 import React, { useCallback, useEffect, useState } from "react";
@@ -60,19 +68,23 @@ renderer.list = function (body, ordered, start) {
   // 不含▫️的元素数量
   // const diffcCount=texts.length-texts.filter(item => item.includes('▫️')).length;
   console.log("texts===>", texts); // 输出: ["测试111", "测试222", "if"]
-  const newArray = texts.filter(item => item.includes('▫️'));
+  const newArray = texts.filter((item) => item.includes("▫️"));
   // 0️⃣',
   const numbers = ["1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟"];
   const string = texts
     .map((value, index) => {
       console.log("value, index==>", value, index);
       // ${ value.indexOf("▫️ ") === -1 ? '<br/><span>111</sapn>' : ""}
-      return value.indexOf("▫️ ") !== -1 ?`<div>${type === "ol" ? numbers[newArray.indexOf(value)] : "▫️ "}${value.replace('▫️ ','')} </div>`:`<div style="white-space:pre;">\t${value}</div>`;
+      return value.indexOf("▫️ ") !== -1
+        ? `<div>${
+            type === "ol" ? numbers[newArray.indexOf(value)] : "▫️ "
+          }${value.replace("▫️ ", "")} </div>`
+        : `<div style="white-space:pre;">\t${value}</div>`;
     })
     .join("");
   // return `1️⃣`
   console.log("string===>", string);
- 
+
   return `${string}`;
 };
 
@@ -146,22 +158,54 @@ const markTextStr = marked(
    相信我
    `
 );
+
+
 // export default class Index extends Component {
 const Index = () => {
   const [markText, setmarkText] = useState(null);
 
+
+  const editorReady = (e) => {
+    Taro.createSelectorQuery()
+      .select("#editor")
+      .context((res) => {
+        this.editorCtx = res.context;
+      })
+      .exec();
+  };
+  
+  const onConfirm = (onConfirmtxt) => {
+    console.log("onConfirmtxt--->",onConfirmtxt.detail.value);
+  };
+  const onBlur = (onBlurtxt) => {
+    console.log("onBlurtxt--->", onBlurtxt.detail.value);
+    setmarkText(marked(onBlurtxt.detail.value))
+  };
+  
   const onBridgeReady = () => {
     WeixinJSBridge.call("hideOptionMenu");
   };
 
   useEffect(() => {
     // console.log("markTextStr=>", markTextStr);
-    // setmarkText(markTextStr);
+    setmarkText(marked(markTextStr));
   }, []);
 
   return (
     <View className="index">
-      <View dangerouslySetInnerHTML={{ __html: markTextStr }}></View>
+      <View className="left">
+        <Textarea
+          style="background:#fff;width:100%;min-height:80px;padding:0 30rpx;"
+          autoHeight
+          autoFocus
+          onConfirm={onConfirm}
+          onBlur={onBlur}
+        />
+      </View>
+      <View
+        className="right"
+        dangerouslySetInnerHTML={{ __html: markText }}
+      ></View>
     </View>
   );
 };

src/pages/index/index.scss

@@ -1,18 +1,22 @@
-html,body{
+html,
-  user-select: auto
+body {
+  user-select: auto;
 }
 .index {
-// font-size: 28px;
+  // font-size: 28px;
-user-select:auto;
+  user-select: auto;
-font-size: 16px;
+  font-size: 16px;
+  display: flex;
+  flex-direction: row;
+  padding: 30px;
 
-.payBtn{
+  .left {
-  // font-size: 30px;
+    width: 50%;
-  margin-left: 20px;
+    height: 500px;
-  top: 10px;
+    // background-color: yellow;
-}
+  }
 
-.lastWord{
+  .right {
-  font-size: 25px;
+    flex: 1;
-}
+  }
 }