js富文本编辑框,替换图片标签的域名

js富文本编辑框处理图片标签地址。

//处理富文本框图片没有地址的
    function replaceImg(content){
        var imgInfo = /<img [^>]*src=['"]([^'"]+)[^>]*>/g;// img 标签取src里面内容的正则
        var allImg = content.match(imgInfo);// 取到所有img标签 放到数组allImg里面
		if(allImg){//可能没有匹配
	        for (var i = 0; i < allImg.length; i++) {
	            var srcImg = allImg[i].replace(imgInfo, '$1');//取src面的内容
	            if (srcImg.slice(0, 4) == 'http' || srcImg.slice(0, 5) == 'https') {
	                //匹配http,https,看需求是否处理
	            } else {
	                //修改富文本字符串内容 img标签src 相对路径改为绝对路径
	                content = content.replace(new RegExp(srcImg, 'g'), getEnvConfig().photoUrl + srcImg);//getEnvConfig().photoUrl 是替换地址
	            }
	        }
	    }
        return content
    }

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React富文本编辑框可以使用第三方库来实现,其比较常用的是`react-quill`和`draft-js`。 1. 使用`react-quill`: 首先,安装`react-quill`库: ``` npm install react-quill ``` 然后,导入必要的组件并创建一个富文本编辑框组件: ```jsx import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; // 导入样式 const RichTextEditor = () => { return ( <ReactQuill theme="snow" /> ); }; export default RichTextEditor; ``` 最后,在你的页面使用这个组件: ```jsx import React from 'react'; import RichTextEditor from './RichTextEditor'; const App = () => { return ( <div> <h1>React富文本编辑框</h1> <RichTextEditor /> </div> ); }; export default App; ``` 2. 使用`draft-js`: 首先,安装`draft-js`库: ``` npm install draft-js ``` 然后,导入必要的组件并创建一个富文本编辑框组件: ```jsx import { Editor, EditorState } from 'draft-js'; import 'draft-js/dist/Draft.css'; // 导入样式 const RichTextEditor = () => { const [editorState, setEditorState] = useState(() => EditorState.createEmpty()); const handleChange = (newEditorState) => { setEditorState(newEditorState); }; return ( <Editor editorState={editorState} onChange={handleChange} /> ); }; export default RichTextEditor; ``` 最后,在你的页面使用这个组件: ```jsx import React from 'react'; import RichTextEditor from './RichTextEditor'; const App = () => { return ( <div> <h1>React富文本编辑框</h1> <RichTextEditor /> </div> ); }; export default App; ``` 以上是两种常见的React富文本编辑框的实现方法,你可以根据自己的需求选择适合的库和组件来使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值