ios富文本编辑器

Posted 2023-03-14

参考技术A 方案 ：html+wkwebview，支持加粗、下划线、斜体、对齐方式、字体更改颜色、插入图片、插入视频、插入链接、清除格式、撤回上一个操作

核心 ：利用html5新特性contenteditable，当div的contenteditable为true时，div进入编辑状态，可以通过执行html5的命令对文本进行操作。命令文档地址：https://developer.mozilla.org/zh-TW/docs/Web/API/Document/execCommand。

具体实现 ：

一：文件目录

1.editor.html,该文件实现了编辑器的节点骨架，一个contenteditable为true的div。

2.ZJSTextEditor.js，该文件是编辑器的核心内容，主要实现编辑器的各种操作，以插入视频为例,外部的wkwebview只需要执行js方法evaluatejavascript:‘zss_editor.insertVideo(...)’，将url带入

3.EditorView这个文件主要是放wkwebview，以及wkwebview调用ZJSTextEditor.js中js方法的部分。如页面加载完，设置占位文字，或者默认对一些标签的处理

二：开发中产品提出的需求和我的设计方案

1.web端要求dom结构为<p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p>,也就是n个p里包含着你插入的视频图片等子节点？

我的方案：

1.1：在editor.html文件中插入的div中，插入一个默认的空p标签<p><br></p>,这样会保证你在文字中间插入图片、视频或者换行时，系统给你新增一个p标签包裹而不是div标签

1.2：在插入图片后加入一个空p，在文字中间插入视频后加入一个空的p和br再删除br，插入br是为了在文字中间插入视频时，让系统自动给你补全p标签，否则视频会被加在该文字的下一行。

2.每个图片要紧紧跟随一个图片输入框，且图片输入框支持粘贴，且图片和图片输入框可以通过某个按钮同时被删除？

我的方案：

图片有三个途径添加，第一个是粘贴来的新闻中带有图片，第二个是自己插入的图片，第三个是从html刚刚开始加载时自带图片（从web端发布的文章，在ios端编辑）。

2.1：每个图片要紧紧跟着一个图片输入框，我在三个途径处分别做了图片的处理，首先是自己插入的图片，我在插入图片时，紧接着插入一个textarea标签和一个p标签。插入一个p标签的目的是满足需求1，其次是粘贴来的新闻和html刚刚加载自带的图片，我选择遍历所有的图片标签，首先检查img标签的name属性是否有值，若没有值，新增textarea标签，并设置img标签和textarea标签的name属性为同一个UUID，若name属性有值，检查它的后一个兄弟节点是否跟随一个同name的dom，如果有且是i标签（提交数据时，要将所有的输入框变成i标签，此刻要从i标签变回输入框），将它转化成输入框，如果没有，添加默认输入框。

2.2：图片输入框支持粘贴，textarea自带粘贴

2.3：图片和图片输入框可以通过某个按钮同时被删除，设置img标签和textarea标签的name属性为同一个UUID，用name的原因是document.getElementsByName给的是该name的一组标签，删除时，只需要根据name删除即可

3.从微信或者头条粘贴过来的文章格式有误，文字偏大或者偏小？

我的解决方案：

由于拿不到原文章的js，所以只能在粘贴时去除标签内的所有内联样式。当然这个地方有个特殊情况要处理，比如用户在编辑时，设置了对齐方式，系统会自动给标签加上内联样式，这个样式我们不应该去掉。我的处理方案时自定义一个属性名zjs-style，在用户设置对齐方式时，将标签的style值赋值给zjs-style，我们在合适的时机，根据zjs-style复原其style

4.输入框在提交后变成不可输入的展示区域？

我的解决方案：

在提交时，遍历所有的textarea，若textarea没有值，去掉该textarea，若有值的话，将该textarea替换成i标签，且name值赋值给新的i。

5.从web端来的数据支持展示和再编辑？

我的解决方案：

在editor.html的div中加入默认占位文字<!-- defaultContent -->，在html资源加载前，将占位文字替换为后台给的html内容，并在网页加载完后，做相关处理

调试工具 ：

Sanity.io 便携式文本富文本编辑器中的文本/图像对齐

【中文标题】Sanity.io 便携式文本富文本编辑器中的文本/图像对齐

【英文标题】：Text/Image alignment in Sanity.io portable text rich text editor

【发布时间】：2020-07-31 12:03:48

【问题描述】：

在 sanity.io 的富文本编辑器（便携式文本）中，是否可以选择将文本（以及图像）与中心对齐？在文档中找不到任何内容

【参考方案1】：

不，目前还没有开箱即用的解决方案。理智对此有很多要求。但是你可以根据 CSS 自己制作一个。 More info on it here. 不过，您可能会在 Sanity Slack 频道上获得更快的支持。如果您在那里使用搜索，还有一些现有的社区对齐方法。

【参考方案2】：

不幸的是，这是便携式文本编辑器的一个已知（当前）限制。根据 Stanity 文档：

在某些情况下，含义和 演示文稿不明确。进行文本对齐。在许多情况下，这 可能是样式表关注的内容呈现位置。 但在某些情况下，您希望控制文本对齐 能够再现文本的某些表现形式，如诗歌或 类似。在这种情况下，我们会建议添加自定义类型， 或创建一个单独的样式，该样式也将嵌入该用例更多 具体来说。

解决方案：

1。制作自定义类型

  name: 'textAlignment',
  type: 'object',
  title: 'Text Alignment',
  fields: [
    
      title: 'Content',
      name: 'text',
      type: 'portableText'
    ,
    
      title: 'Alignment',
      name: 'alignment',
      type: 'string',
      options: 
        list: [
          title: 'Left', value: 'left',
          title: 'Right', value: 'right',
          title: 'Center', value: 'center',
        ],
      
    
  ]

2。制作自定义样式

例如normal+right 并使用块序列化器在前端实现对齐。这里的缺点是你不能将它与其他样式结合起来。例如。你不能有一个带有文本对齐的 H1 块。

【参考方案3】：

我创建了一个自定义输入组件，允许您在块编辑器预览中对齐内容，我只用文本测试过它，但我确信它也可以定制为与图像一起使用。

// schemas/components/AlignBlock.js
import React from "react";
import  BlockEditor  from "part:@sanity/form-builder";

function AlignBlock(props) 
    const options = props.type.options.align;
    const alignment = () => 
        switch (options) 
            case "right":
                return (
                    <div style= textAlign: "right" >
                        <BlockEditor ...props />
                    </div>
                );
            case "center":
                return (
                    <div style= textAlign: "center" >
                        <BlockEditor ...props />
                    </div>
                );
            default:
                return <BlockEditor ...props />;
        
    ;
    return alignment();


export default AlignBlock;

然后要在特定的块编辑器中使用它，将 AlignBlock 作为 inputComponent 导入并在选项下传入align: center 或align: right。

import AlignBlock from "../components/AlignBlock";

export default 
    title: "Content",
    name: "content",
    type: "document",
    fields: [
        
            title: "Splashscreen",
            name: "splashscreen",
            type: "array",
            inputComponent: AlignBlock,
            options:  align: "center" ,
            of: [
                
                    type: "block",
                    styles: [],
                    lists: [],
                    marks: 
                        decorators: [],
                        annotations: [],
                    ,
                ,
            ],
        ,
    ],
;