精华内容
下载资源
问答
我要提问
  • 富文本 和 图片裁切
    2020-11-28 17:54:53

    富文本编辑器和图片裁切

    一, 富文本编辑器的实现步骤

    1. 添加如下的 layui表单行：

    <div class="layui-form-item">
  <!-- 左侧的 label -->
  <label class="layui-form-label">文章内容</label>
  <!-- 为富文本编辑器外部的容器设置高度 -->
  <div class="layui-input-block" style="height: 400px;">
    <!-- 重要：将来这个 textarea 会被初始化为富文本编辑器 -->
    <textarea name="content"></textarea>
  </div>
</div>

    2. 导入富文本必须的 script脚本：

    <!-- 富文本 -->
<script src="/assets/lib/tinymce/tinymce.min.js"></script>
<script src="/assets/lib/tinymce/tinymce_setup.js"></script>

    3. 调用 initEditor() 方法，初始化富文本编辑器：

    // 初始化富文本编辑器  原版没有这是后包的函数
initEditor()

    二, 图片裁切的实现步骤

    1. 在<head>中导入 cropper.css样式表：

    <link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />

    2. 在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：

    <script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

    3. 在表单中，添加如下的表单行结构：

    <div class="layui-form-item">
  <!-- 左侧的 label -->
  <label class="layui-form-label">文章封面</label>
  <!-- 选择封面区域 -->
  <div class="layui-input-block cover-box">
    <!-- 左侧裁剪区域 -->
    <div class="cover-left">
      <img id="image" src="/assets/images/sample2.jpg" alt="" />
    </div>
    <!-- 右侧预览区域和选择封面区域 -->
    <div class="cover-right">
      <!-- 预览的区域 -->
      <div class="img-preview"></div>
      <!-- 选择封面按钮 -->
      <button type="button" class="layui-btn layui-btn-danger">选择封面</button>
    </div>
  </div>
</div>

    4. 美化的样式

    /* 封面容器的样式 */
.cover-box {
  display: flex;
}

/* 左侧裁剪区域的样式 */
.cover-left {
  width: 400px;
  height: 280px;
  overflow: hidden;
  margin-right: 20px;
}

/* 右侧盒子的样式 */
.cover-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 预览区域的样式 */
.img-preview {
  width: 200px;
  height: 140px;
  background-color: #ccc;
  margin-bottom: 20px;
  overflow: hidden;
}

    5. 实现基本裁剪效果：

     // 1. 初始化图片裁剪器
  var $image = $('#image')
  
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  
  // 3. 初始化裁剪区域
  $image.cropper(options)

    三, 更换裁剪后的图片(不然的话拿到的还是裁剪前的)

    1. 拿到用户选择的文件

    var file = e.target.files[0]

    2. 根据选择的文件，创建一个对应的 URL 地址：

    var newImgURL = URL.createObjectURL(file)

    3. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：

    $image
 .cropper('destroy')      // 销毁旧的裁剪区域
 .attr('src', newImgURL)  // 重新设置图片路径
 .cropper(options)        // 重新初始化裁剪区域

    四, 将裁剪后的图片，输出为文件

    $image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
  width: 400,
  height: 280
})
.toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
  // 得到文件对象后，进行后续的操作
})

    五, 实际应用

    // 一. 初始化
let form = layui.form;
// 1. 初始化图片裁剪器
let $image = $('#image') 
// 2. 裁剪选项
let options = {
 aspectRatio: 400 / 280,
 preview: '.img-preview'
}
// 3. 初始化裁剪区域
$image.cropper(options)

// 二. 为 选择封面 按钮, 添加点击事件
$('button:contains("选择封面")').on('click', function () {
$('#file').trigger('click') // 调用文件域的点击事件
})

// 三. 文件域内容切换的时候, 更换裁剪区的图片
$('#file').on('change', function () {
// 1 找文件对象
let fileObj = this.files[0]
// 2 生成临时的 url 
let url = URL.createObjectURL(fileObj)
// 3 替换裁剪图片 (先销毁剪切框 --> 更换图片的src --> 重新创建剪裁框)
$image.cropper('destroy').attr('src', url).cropper(options)
})

    六, 提交数据完成最后的添加

    // 为表单添加提交事件, 阻止表单的默认提交
$('form').on('submit', function (e) {
	e.preventDefault()

	// 收集数据
	let fd = new FormData(this); // FormData 是根据表单各项的 name 属性收集值得
	// 获取 tinymce 插件的内容，并把内容添加到 FormData 对象中
	fd.set('content', tinyMCE.activeEditor.getContent());
	// 剪裁图片，得到 canvas(画布格式的图片)
	let canvas = $image.cropper('getCroppedCanvas', {
		width: 400,
		height: 280
	})
  
	// 把canvas图片转成blob格式
	canvas.toBlob(function (blob) {
	    // 形参 blob 就是转换后的结果，需要把它也追加到FormData中
	    fd.append('cover_img', blob);
	    // 验证FormData中有哪些值
	    fd.forEach(function (value, key) {
	        console.log(key, value)
	})
	// Ajax提交数据
	$.ajax({
		type: 'POST',
		url: '/my/article/add',
		data: fd,
		// 提交FormData格式的数据，必须填下面两项
		processData: false,
		contentType: false,
		success: function (res) {
			layer.msg(res.message)
			if (res.status === 0) {
				// 添加成功，跳转到文章列表页
				location.href = './list.html';
			}
		} 
})
    javascript
    更多相关内容

  • 【15】大事件项目：附-富文本编辑器和封面图片裁剪

     2020-08-14 15:00:24
    文章目录富文本和封面图片裁剪1. 富文本编辑器的实现步骤2. 图片封面裁剪的实现步骤3. 更换裁剪的图片4. 将裁剪后的图片，输出为文件 富文本和封面图片裁剪 1. 富文本编辑器的实现步骤 添加如下的 layui 表单行： ...

    文章目录

    富文本和封面图片裁剪

    1. 富文本编辑器的实现步骤

    1. 添加如下的 layui 表单行：

      <div class="layui-form-item">
  <!-- 左侧的 label -->
  <label class="layui-form-label">文章内容</label>
  <!-- 为富文本编辑器外部的容器设置高度 -->
  <div class="layui-input-block" style="height: 400px;">
    <!-- 重要：将来这个 textarea 会被初始化为富文本编辑器 -->
    <textarea name="content"></textarea>
  </div>
</div>

    2. 导入富文本必须的 script 脚本：

      <!-- 富文本 -->
<script src="/assets/lib/tinymce/tinymce.min.js"></script>
<script src="/assets/lib/tinymce/tinymce_setup.js"></script>

    3. 调用 initEditor() 方法，初始化富文本编辑器：

      // 初始化富文本编辑器
initEditor()

    2. 图片封面裁剪的实现步骤

    参考cropper基本使用方法、头像图片裁剪：
    https://blog.csdn.net/Satan_Devil/article/details/108003818

    1. 在 <head> 中导入 cropper.css 样式表：

      <link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />

    2. 在 <body> 的结束标签之前，按顺序导入如下的 js 脚本：

      <script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>

    3. 在表单中，添加如下的表单行结构：

      <div class="layui-form-item">
  <!-- 左侧的 label -->
  <label class="layui-form-label">文章封面</label>
  <!-- 选择封面区域 -->
  <div class="layui-input-block cover-box">
    <!-- 左侧裁剪区域 -->
    <div class="cover-left">
      <img id="image" src="/assets/images/sample2.jpg" alt="" />
    </div>
    <!-- 右侧预览区域和选择封面区域 -->
    <div class="cover-right">
      <!-- 预览的区域 -->
      <div class="img-preview"></div>
      <!-- 选择封面按钮 -->
      <button type="button" class="layui-btn layui-btn-danger">选择封面</button>
    </div>
  </div>
</div>

    4. 美化的样式：

      /* 封面容器的样式 */
.cover-box {
  display: flex;
}

/* 左侧裁剪区域的样式 */
.cover-left {
  width: 400px;
  height: 280px;
  overflow: hidden;
  margin-right: 20px;
}

/* 右侧盒子的样式 */
.cover-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 预览区域的样式 */
.img-preview {
  width: 200px;
  height: 140px;
  background-color: #ccc;
  margin-bottom: 20px;
  overflow: hidden;
}

    5. 实现基本裁剪效果：

        // 1. 初始化图片裁剪器
  var $image = $('#image')
  
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  
  // 3. 初始化裁剪区域
  $image.cropper(options)

    3. 更换裁剪的图片

    1. 拿到用户选择的文件

      var file = e.target.files[0]

    2. 根据选择的文件，创建一个对应的 URL 地址：

      var newImgURL = URL.createObjectURL(file)

    3. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：

      $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', newImgURL)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域

    4. 将裁剪后的图片，输出为文件

    $image
  .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 400,
    height: 280
  })
  .toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
    // 得到文件对象后，进行后续的操作
  })
    收起
    展开全文

  • 微信小程序-微信小程序图片自适应,微信小程序富文本解析

     2019-08-07 08:26:37
    wxapp > 最近跟小伙伴一起开发微信小程序, 发现在内容显示这块没法很好的...富文本解析 小程序没有提供富文本解析, 服务端可以转换为json(当然前端也可以有个js库解决html2json)在小程序里面用对应的组件适配 效果图
    收起
    微信小程序

  • 3分钟学会 “今日头条” 富文本编辑

     千次阅读 2020-11-25 08:00:00
    先来看看都实现了补全了哪些功能 1.1、在没有焦点时，主动获取焦点并弹出软键盘 修改后：在第一打开富文本编辑时，点击加粗，下划线或上传图片时，主 动获取焦点并弹出软键盘 1.2、在光标主动回到某处，下方tab...


    码个蛋(codeegg) 第 1098 次推文

    作者：岩浆李的游鱼leo2

    博客：https://juejin.im/post/6874875969292173320

    前言：在经历了几个月的项目期限。我们遇到了前端发布文章，要用到富文本编辑的功能。在一番衡量下最终用到了richeditor-android第三方框架。实现原理就是通过webView和js实现前端富文本。有想了解的可以点开上面链接，研究研究。虽然richeditor-android已经帮我们实现了大部分核心内容，但是很多细节它都没有完善，这也是为什么他的issues达到170多的原因。也不知道它有没有停更。接下来是作者踩了N多坑之后，把功能基本补全。可以说是高仿“今日头条富文本编辑”。

    先来看看都实现了补全了哪些功能  

    1.1、在没有焦点时，主动获取焦点并弹出软键盘

            修改后：在第一打开富文本编辑时，点击加粗，下划线或上传图片时，主 动获取焦点并弹出软键盘

    1.2、在光标主动回到某处，下方tab选中当前的样式，同理撤销和回退

            

            修改后： 在光标变化，撤销回退，或者主动点删除时，下方tab会根据当前样式选中要选中的样式

    1.3、上传图片，自动换行，且自动滚动到底部。且充满屏幕

            修改后：选中图片后，插入图片自动换行，自动滚动到底部，弹出软键盘。（图片充满屏幕）

    1.4、点击图片，可编辑图片（剪裁），或删除图片

            修改后：点击图片增加了删除和编辑功能，编辑剪裁图片也是模仿头条的。(注：这里的图片选择和图片剪裁是其他第三方，后续给上链接，作者修改后增加了比例切换的动画，且适配了全面屏和处理了虚拟键）

    1.5、根据头条的排版样式，修改了文字，图片还有序号的排版样式

            修改后：原样式，比较不理想。在看了头条的排版样式后，修改了css样式。尽量模仿出头条的感觉

    1.6、选中文字后，在不点击屏幕前，选中文字都不变。高度模仿头条

            修改后：之前点击1下或者2下加粗时，选中文字会取消。现在不是主动点击屏幕，选中文字不会取消

    1.7、在作者在实现这块功能时，还遇到了缺少ssl证书，图片没法显示出来。还加了忽略ssl证书

            在华为和小米都有出现过。出现的时候，我用头条app去上传图片也是遇到上传图片失败。过一会，手机又正常了。反正加上忽略ssl是一定可以成功的。

    一起看看发布文章重新编辑的功能吧 

    总结 

    至此一个高仿头条的富文本就此而生。如果你开发遇到了或者有什么古怪的功能还不满足你的要求，请联系我。

    • 文中用到的图片选择框架，建议用demo的，是作者适配全面屏修改过的

    • 文章用到的剪裁框架，建议用demo的，是作者适配全面屏修改过的

    • 请注意：文中用到本地路径的图片，如果是网图，则可直接替换成网图即可

    • 最终生成的是html,可在前端各个端展示

    • 高仿今日头条富文本编辑，发布文章

    

只要你是程序员，在这里都能找到你想要的东西！

    收起
    展开全文
    html css nagios

  • vue tinymce 富文本编辑器全量工具栏和图片上传功能

     千次阅读 2020-05-09 15:52:21
    在做 vue + tinymce 富文本编辑器的时候走了不少弯路，写篇文章记录一下。 先上图看整体效果 这是上传图片的窗口，有两个模式可以选择，普通上传需要具体的文件路径，上传可以上传本地的图片。 下面说一下具体的...

    在做 vue + tinymce 富文本编辑器的时候走了不少弯路，写篇文章记录一下。

    先上图看整体效果
    这是里面的工具栏基本上涵盖了我们平时用到的，还是比较全面的，如果不够用后面可以自己添加自己需要的。
    这是上传图片的窗口，有两个模式可以选择，普通上传需要具体的文件路径，上传可以上传本地的图片。
    在这里插入图片描述

    下面说一下具体的实现

    1：安装tinymce-vue

    npm install @tinymce/tinymce-vue -S

    2：下载tinymce

    npm install tinymce -S

    3：在public文件夹下面新建一个tinymce 文件夹，下载完之后在 node_modules文件夹中找到 tinymce/skins目录，将skins复制到public\tinymce目录下面；下载一个语言包解压一下把langs文件夹复制到tinymce文件夹下；

    语言包自行下载，没梯子的话比较慢，耐心等待
    tinymce 下载中文语言包

    上图看结构
    看仔细结构，不然会加载不出来语言包
    4：下面是 index. vue 的代码，这里重写了images_upload_handler 方法，没封装之前的，方便查看一目了然，有需要的话大家根据需要自己封装吧。里面有一个拼写检查因为用不到被我去掉了，有需要的自己加上spellchecker spellchecker 拼写检查

    

<template>

  <div>

    <textarea :id= "tinymceId"  v-model="tinymceHtml"></textarea>

  </div>

</template>

<script>

import tinymce from 'tinymce/tinymce'

import Editor from '@tinymce/tinymce-vue'

import 'tinymce/themes/silver'

import 'tinymce/plugins/image'// 插入上传图片插件

import 'tinymce/plugins/media'// 插入视频插件

import 'tinymce/plugins/table'// 插入表格插件

import 'tinymce/plugins/link' //超链接插件

import 'tinymce/plugins/code' //代码块插件

import 'tinymce/plugins/lists'// 列表插件

import 'tinymce/plugins/contextmenu'  //右键菜单插件

import 'tinymce/plugins/wordcount' // 字数统计插件

import 'tinymce/plugins/colorpicker' //选择颜色插件

import 'tinymce/plugins/textcolor'  //文本颜色插件

import 'tinymce/plugins/fullscreen' //全屏

import 'tinymce/plugins/help'       // 帮助

import 'tinymce/plugins/charmap'

import 'tinymce/plugins/paste'

import 'tinymce/plugins/print'   //打印

import 'tinymce/plugins/preview'  // 预览

import 'tinymce/plugins/hr'  // 水平线

import 'tinymce/plugins/anchor'

import 'tinymce/plugins/pagebreak'

import 'tinymce/plugins/spellchecker'

import 'tinymce/plugins/searchreplace'

import 'tinymce/plugins/visualblocks'

import 'tinymce/plugins/visualchars'

import 'tinymce/plugins/insertdatetime'

import 'tinymce/plugins/nonbreaking'

import 'tinymce/plugins/autosave'

import 'tinymce/plugins/fullpage'

import 'tinymce/plugins/toc'

export default {

    data () {

      const ide = Date.now()

      return {

        tinymceId: ide,

        tinymceHtml:'',

        DefaultInit: {

            language_url:'/tinymce/langs/zh_CN.js',  //导入语言文件

            language: "zh_CN",//语言设置

            skin_url: '/tinymce/skins/ui/oxide',//主题样式

            height:600, //高度

            menubar: false,// 隐藏最上方menu菜单

            toolbar: true,//false禁用工具栏（隐藏工具栏）

            browser_spellcheck: true, // 拼写检查

            branding: false, // 去水印

            statusbar: false, // 隐藏编辑器底部的状态栏

            elementpath: false,  //禁用下角的当前标签路径

            paste_data_images: true, // 允许粘贴图像

            // toolbar:['bold italic underline strikethrough blockquote|forecolor backcolor|formatselect |fontsizeselect  | alignleft aligncenter alignright alignjustify | outdent indent |codeformat blockformats| removeformat undo redo ',

            // 'bullist numlist toc pastetext|codesample charmap  hr insertdatetime |lists image media table link unlink |code searchreplace fullscreen help ',
            
            // ],
            toolbar:[

                    'newdocument undo redo | formatselect visualaid | copy paste selectall| bold italic underline strikethrough |codeformat blockformats| superscript subscript  | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent |  removeformat ',

                    'code  bullist numlist | lists image media table link |fullscreen help toc fullpage restoredraft nonbreaking insertdatetime visualchars visualblocks searchreplace pagebreak anchor charmap  pastetext print preview hr | link unlink uploadimage',

                ],

            plugins: ['lists image media table wordcount code fullscreen help codesample toc insertdatetime  searchreplace  link charmap paste hr' ,
                      'fullpage autosave nonbreaking  visualchars visualblocks  pagebreak print preview  anchor' ,
            ]

        }

      }

    },

    mounted () {

      this.init()

    },

    methods: {

       init () {

        const self = this

        window.tinymce.init({

          // 默认配置

          ...this.DefaultInit,

        // 图片上传

        images_upload_handler: function (blobInfo, success, failure){

            let formData = new FormData()

            console.log(blobInfo.filename())

            formData.append('img',blobInfo.blob())

            self.$axios.post('http://127.0.0.1:8000/upload/',formData)

            .then(response =>{

                console.log(response.data['url'])

                if(response.data['code']==200){

                    success(response.data['url'])

                }else{

                    failure('上传失败！')

                }

            })

          },

          // 挂载的DOM对象

          selector: `#${this.tinymceId}`,

        })

      }

    }

  }

</script>

    代码有一段加粗的，要注意，这里不是直接把图片转换成base64的而是直接上传到服务器的，转换成base64直接存到数据库容易出现问题比如图片很多文件很大数据库的可能会出现存不下的情况。

    最后附上tinymce的工具栏配置项，核心工具直接在toolbar里面引入即可，不是核心的需要在plugins里面引用一下。

    |
    配置项 所属插件 描述
    newdocument 核心 创建新文档
    bold 核心 加粗
    italic 核心 斜体
    underline 核心 下划线
    strikethrough 核心 删除线
    alignleft 核心 居左
    aligncenter 核心 居中
    alignright 核心 居右
    alignjustify 核心 两端对齐
    alignnone 核心 清除
    styleselect 核心 格式选择下拉框(缩进、行高)
    formatselect 核心 段落选择下拉框(段落、标题)
    fontselect 核心 字体选择下拉框
    fontsizeselect 核心 字号选择下拉框
    cut 核心 剪切
    copy 核心 复制
    paste 核心 粘贴
    outdent 核心 减少缩进
    indent 核心 增加缩进
    blockquote 核心 引用
    undo 核心 撤消
    redo 核心 恢复
    removeformat 核心 清除格式
    subscript 核心 下标
    superscript 核心 上标
    visualaid 核心 网格线
    insert 核心 插入的集合按钮
    hr hr 水平线
    bullist lists 无序列表
    numlist lists 有序列表
    link link 添加和修改链接
    unlink link 去除链接格式
    openlink link 打开选中链接
    image image 添加和修改图片
    charmap charmap 特殊符号
    pastetext paste 粘贴纯文本
    print print 打印
    preview preview 预览
    anchor anchor 作者
    pagebreak pagebreak 分页符
    spellchecker spellchecker 拼写检查
    searchreplace searchreplace 搜索
    visualblocks visualblocks 隐藏块级区域开关
    visualchars visualchars 隐藏字符串开关.
    code code 代码
    help help 帮助
    fullscreen fullscreen 全屏
    insertdatetime insertdatetime 插入时间
    media media 插入/编辑媒体文件
    nonbreaking nonbreaking 不间断空格
    save save 保存(ajax)
    cancel save 取消保存
    table table 插入/编辑表格
    tabledelete table 删除表格
    tablecellprops table 单元格属性
    tablemergecells table 合并单元格
    tablesplitcells table 拆分单元格
    tableinsertrowbefore table 在当前行之前插入一个新行
    tableinsertrowafter table 在当前行之后插入一个新行
    tabledeleterow table 删除当前行
    tablerowprops table 行属性
    tablecutrow table 剪切选定行
    tablecopyrow table 复制选定行
    tablepasterowbefore table 在当前行之前粘贴行
    tablepasterowafter table 在当前行之后粘贴行
    tableinsertcolbefore table 在当前列之前插入一个列
    tableinsertcolafter table 在当前列之后插入一个列.
    tabledeletecol table 删除当前列
    rotateleft imagetools 逆时针旋转当前图像
    rotateright imagetools 顺时针旋转当前图像
    flipv imagetools 垂直翻转当前图像
    fliph imagetools 水平翻转当前图像
    editimage imagetools 打开图像编辑对话框
    imageoptions imagetools 打开图像配置对话框
    fullpage fullpage 完整页面的文档属性
    ltr directionality 设置编写方向从左到右
    rtl directionality 设置编写方向从右到左
    emoticons emoticons 表情
    template template 插入模板
    forecolor textcolor 文本颜色
    backcolor textcolor 背景颜色
    restoredraft restoredraft 恢复到最新的自动保存草稿
    insertfile moxiemanager 引入文件
    a11ycheck a11ychecker 检查访问性
    toc toc 插入目录
    quickimage inlite 插入本地图像
    quicktable inlite 插入2X2的表格
    quicklink inlite 插入连接| |

    收起
    展开全文
    vue

  • VUE——基于Element、quillEditor和VueCropper的富文本图片剪切上传

     千次阅读 2018-12-25 11:39:21
    步骤一、上传图片 步骤二、剪切图片 步骤三、生成新图片 安装组件：我使用Yarn yarn add vue-quill-editor quill vue-cropper 或者使用npm npm install -d vue-quill-editor quill vue-cropper element...
    收起
    前端 VUE element

  • js获取富文本中的第一张图片(正则表达式)

     2021-06-12 03:13:01
    js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签后台发来一个富文本字符串里面可能包含了0、1、2、3…个图片标签(img),我们的任务是获取这个字符串里面第一张图片的url，如果没有图片则返回空var ...
    收起

  • layui富文本上传图片,自动设置图片的宽度

     2022-02-26 22:55:23
    后台使用layui进行文章内容编辑，前端显示时候宽度会超过需要显示的宽度,通过修改layedit.js文件来进行设定
    收起
    layui 前端 javascript

  • JS 获取富文本中的第一张图片 (正则表达式)

     2020-12-22 01:34:10
    JS 获取富文本中的第一张图片 (正则表达式)JS 获取富文本中的第一张图片 url 正则公式及去除字符串里面的 html 标签后台发来一个富文本字符串里面可能包含了 0,1,2,3... 个图片标签(img), 我们的任务是获取这个字符...
    收起

  • 微信小程序学习用demo推荐：图片自适应，富文本解析（12.9）

     2021-03-15 18:04:49
    小程序图片高宽没法自动适配，只能指定高宽进行裁剪。在详情页显示体验很差，用image组件的bindload解决 富文本解析 小程序没有提供富文本解析, 服务端可以转换为json(当然前端也可以有个js库解决html2json)在小程序...
    收起

  • layui后台管理、图片裁切、cropper富文本编辑器实现

     2021-06-09 14:19:28
    需求：后台管理系统一般都会有图文混排功能（比如新闻应用，电商商品详情），这个一般使用富文本编辑器来实现；还有一个就是图片的裁切（比如用户的头像）
    收起

  • vue项目 vue-quill-editor富文本编辑器+图片上传

     2021-08-16 11:10:39
    目录 基础使用： 进阶版： 使用 el-upload 图片上传： 进阶版2.0： 可拖动调整图片大小： 基础使用： 富文本编辑器： 此方法得到的图片为base64编码，图片上传在下面。 npm install vue-quill-editor –save 直接...
    收起
    vue

  • iOS 使用NSTextAttachment在富文本中插入图片在实际项目中遇到的问题

     2021-07-05 21:08:31
    1、图片是从网络中获取的，如何缩短请求图片的时间？ 可以从一开始请求网络数据结束后，获取到了图片的URL之后。开始用SDWebImageView下载图片，因为SDWebImageView有一个特性，就是相同URL下的图片下载后会进行...
    收起
    项目中遇到的问题

  • 【游戏客户端】富文本实现“部分区域”点击事件

     千次阅读 2022-01-14 15:11:28
    【游戏客户端】富文本实现“部分区域”点击事件 之前的博客中，我和大家分享了如何做： 商业化的充值活动 ：【商业化充值活动博客】 抽卡系统：【抽奖，抽卡系统博客】 装备系统：【装备系统博客】 红点系统...
    收起
    RichText cocos 游戏客户端

  • vue-quill-editor富文本编辑器使用，附带图片更改大小功能

     千次阅读 2021-06-10 15:25:51
    1.Vue项目安装依赖 npm install vue-quill-editor --save npm install quill-image-resize-module --save 2.项目引用，我用的是全局引用 import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css';...
    收起
    vue javascript vue.js

  • Android富文本开发，从0到1！

     2021-01-02 00:00:00
    同时加载图片的逻辑也是暴露给外部开发者，充分解耦 关于富文本字数统计，由于富文本中包括文字和图片，因此图片和文字数量统计分开。参考易车是：共n个文字，共n个图片显示 / 异常状态下保存状态信息 / 对于...
    收起
    java android html 编程语言

  • js如何获取UEditor富文本编辑器中的图片地址

     2021-04-02 11:07:58
    这篇文章主要介绍了js获取UEditor富文本编辑器中的图片地址,最简单的思路应该是先获取UEditor中的内容再将获取到的字符串转换成jquery对象，选择器找到img元素，获取src值 写之前在网上找了很多方法，最简单的思路...
    收起

  • 富文本自定义文本控件YCCustomText

     2021-04-19 14:06:14
    自定义文本控件，支持富文本，包含两种状态：编辑状态和预览...富文本控件支持动态插入文字，图片等图文混排内容。图片可以支持本地图片，也支持插入网络链接图片； 富文本又两种状态：编辑状态 + 预览状态 。两种状
    收起

  • Vue中图片裁剪的实现

     千次阅读 2021-01-14 14:17:21
    最近做项目有裁剪本地图片并保存为Base64数据的需求，鼓捣了一会弄出来了，分享一下一个好用的工具 先看一下效果 vue-cropper github地址：https://github.com/xyxiao001/vue-cropper 安装 npm install vue-...
    收起
    vue javascript

  • wangEditor - 轻量级web富文本编辑器（可带图片上传）

     千次阅读 2018-08-07 09:55:01
    这个时候，需要一款简洁的编辑器，百度编辑器是最常用的一种，但是功能太过于复杂，而wangEditor - 轻量级web富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器，值得拥有。   wangEditor —— 轻量级 web ...
    收起

  • 富文本编辑器的实现步骤

     2021-06-03 20:44:36
    1. 富文本编辑器的实现步骤 添加如下的 layui 表单行： <div class="layui-form-item"> <!-- 左侧的 label --> <label class="layui-form-label">文章内容</label> <!-- 为富文本...
    收起

  • 富文本编辑器

     2022-03-04 20:59:15
    1. 富文本编辑器的实现步骤 添加如下的 layui 表单行： <div class="layui-form-item"> <!-- 左侧的 label --> <label class="layui-form-label">文章内容</label> <!-- 为富...
    收起
    javascript html 前端

  • 对Quill富文本插件上传图片修改,调整部分功能

     千次阅读 2018-10-31 22:21:42
    对Quill富文本插件上传图片修改,调整部分功能 因为之前项目中有用到富文本的功能,所以就去研究了一下,富文本插件也挺多 比较推荐的就是quill 和ckeditor ,貌似ckeditor功能更为全面也更大, 但是quill有适配vue的...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,230
精华内容 1,292
热门标签
关键字：

富文本图片裁剪