1

我正在使用 Rails 6 API 和 React。我正在尝试使用 ActionText 构建富文本编辑器。当我从前端的 Trix 编辑器发送 RTE 内容时，它只是没有将 ActionText 正文设置为我通过 Axios 发送的正文。

我确信主体已正确到达控制器，因为我使用byebug并打印了参数值。

例如，它看起来像这样：<div><!--block-->test</div>

但是，每当我尝试通过运行它来查看它的实际情况时，它都会出于某种原因announcement.details.to_s返回。" "

我这样设置details字段：has_rich_text :details在 Announcement 模型中。

我的控制器处理这个看起来像这样：

module V1
  class AnnouncementsController < ApplicationController
    def create
      announcement = Announcement.new(announcement_params)
      announcement.author = @current_user

      authorize announcement

      if announcement.valid? && announcement.save
        render json: { message: "Announcement successfully created! You can view it here." }, status: 201
      else
        render json: { messages: announcement.errors.full_messages }, status: 400
      end
    end

    private

    def announcement_params
      params.require(:announcement).permit(:title, :details)
    end
  end
end

如果它有任何帮助，这就是 React 代码：

const RTE = (props) => {

    let trixInput = React.createRef()

    useEffect(() => {
        trixInput.current.addEventListener("trix-change", event => {
            console.log("fired")
            props.onChange(event.target.innerHTML)
        })
    }, [])

    return (
        <div>
            <input
                type="hidden"
                id="trix"
                value={props.value}
            />
            <trix-editor 
                input="trix"
                data-direct-upload-url={`${bURL}/rails/active_storage/direct_uploads`}
                data-blob-url-template={`${bURL}/rails/active_storage/blobs/:signed_id/*filename`}        
                ref={trixInput}
                className="trix-content"        
            ></trix-editor>            
        </div>
    );
}

然后我通常用 Axios 传递它：

        axios.post(`${bURL}/v1/announcements/create`, {
            "announcement": {
                "title": title,
                "details": value
            }
        }, {
            headers: {
                'Authorization': `token goes here`
            }
        }).then(res => {
            // success
        }).catch(err => {
            // error
        })

如果您需要更多代码片段或信息，请发表评论。

4

0 回答 0