手机APP里的文章发布里，插入图片后自动换行，是什么代码？

Question

手机APP里的文章发布里，插入图片后自动换行，是什么代码？
我的是wordpress做的网站，用H5做了一个APP，也想实现文章中插入图片后，自动换行，可以方便写文字。

这是一个APP里的发布文章的页面，插入图片后，会自动换行（可以写文字）

这是我的APP里的发布文章页面，插入图片后，还要手工换行。操作不好，图片就会被删除。

Answer 1

引自免费微信小程序：皆我百晓生

为了在Android应用中实现类似WordPress H5 App的功能，即在文章编辑器中插入图片后自动换行并允许用户继续在图片下方输入文字，你需要创建一个自定义的富文本编辑器控件。这里我会提供一个基本的步骤指南，并给出关键代码片段。由于这是一个相对复杂的任务，我将解释如何实现这个功能的主要部分，而不是提供完整的项目代码。

首先，你需要创建一个自定义的EditText类，例如ImageAwareEditText，并在其中处理图片的插入和换行逻辑。这里我们主要关注如何在插入图片时自动换行。

1. 创建一个新的Java类，继承自EditText，并重写一些方法来处理图片插入和换行。

public class ImageAwareEditText extends EditText {
    // ...其他成员变量

    public ImageAwareEditText(Context context) {
        super(context);
        init();
    }

    public ImageAwareEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ImageAwareEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        // 设置允许粘贴图像
        setFilters(new InputFilter[]{new ImageInputFilter()});
    }
}

1. 创建一个内部类ImageInputFilter，用于处理图片粘贴事件。

private class ImageInputFilter implements InputFilter {
    @Override
    public CharSequence filter(CharSequence source, int start, int end, Spanned dest, int dstart, int dend) {
        if (source == null || source.length() == 0) return null;

        // 检查是否有图片数据
        if (isImage(source.toString())) {
            // 在当前光标位置插入换行符和图片
            int position = getImageInsertionPosition(dstart);
            replaceText(dest, dstart, dend, "\n", position);
            insertImageAtCursor(position);
            return "";
        } else {
            return null; // 不过滤普通文本
        }
    }

    // 其他方法...
}

1. 在ImageInputFilter中，实现isImage()方法来检查输入是否为图片数据。

private boolean isImage(String text) {
    // 这里只是一个简单的示例，实际应用中可能需要更复杂的判断逻辑
    return text.startsWith("data:image/") || text.contains(";base64,");
}

1. 实现getImageInsertionPosition()方法来获取图片应该插入的位置。

private int getImageInsertionPosition(int cursorPosition) {
    // 获取当前光标的前一个字符
    char prevChar = getChars(cursorPosition - 1, cursorPosition, new char[1], 0);

    // 如果前一个字符不是换行符，就在当前光标位置前插入换行符
    return prevChar != '\n' ? cursorPosition - 1 : cursorPosition;
}

1. 实现insertImageAtCursor()方法，在光标位置插入图片。

private void insertImageAtCursor(int position) {
    // 这里只是示例，实际应用中可能需要从剪贴板或文件选择器获取图片
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.example_image);
    Uri imageUri = saveBitmapToStorage(bitmap);
    String imageUrl = "file://" + imageUri.getPath();

    // 插入HTML格式的图片标签
    String htmlImageTag = "<img src=\"" + imageUrl + "\" />";
    replaceText(this, position, position, htmlImageTag, position);
}

// 其他方法...

1. 在上述代码中，saveBitmapToStorage()用于将图片保存到本地存储，然后返回图片URI。这需要你自己实现，具体取决于你的应用程序架构。

2. 最后，在布局文件中使用自定义的ImageAwareEditText。

<ImageAwareEditText
    android:id="@+id/article_edit_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textMultiLine" />

以上代码仅提供了一个基础的实现方案，实际应用中可能需要根据你的需求进行调整，比如支持拖拽图片、图片大小调整、图片裁剪等功能。如果你对某个部分的具体实现有疑问，欢迎进一步提问。