uniapp富文本框

1.复制以下代码

<template><view class="container"><view class="page-body"><view class='wrapper'><view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;"><view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view><view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view><view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view><view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view><view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"data-value="left"></view><view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align"data-value="center"></view><view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align"data-value="right"></view><view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align"data-value="justify"></view><view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight"data-value="2"></view><view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing"data-value="2em"></view><view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop"data-value="20px"></view><view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom"data-value="20px"></view><view class="iconfont icon-clearedformat" @tap="removeFormat"></view><view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="Pacifico"></view><view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize"data-value="24px"></view><view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color"data-value="#0000ff"></view><view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor"data-name="backgroundColor" data-value="#00ff00"></view><view class="iconfont icon-date" @tap="insertDate"></view><view class="iconfont icon--checklist" data-name="list" data-value="check"></view><view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list"data-value="ordered"></view><view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list"data-value="bullet"></view><view class="iconfont icon-undo" @tap="undo"></view><view class="iconfont icon-redo" @tap="redo"></view><view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view><view class="iconfont icon-indent" data-name="indent" data-value="+1"></view><view class="iconfont icon-fengexian" @tap="insertDivider"></view><view class="iconfont icon-charutupian" @tap="insertImage"></view><view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header":data-value="1"></view><view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script"data-value="sub"></view><view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script"data-value="super"></view><view class="iconfont icon-shanchu" @tap="clear"></view><view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction"data-value="rtl"></view></view><view class="editor-wrapper"><editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize@statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady"></editor></view></view></view></view>
</template><script>export default {data() {return {readOnly: false,formats: {}}},methods: {readOnlyChange() {this.readOnly = !this.readOnly},onEditorReady() {uni.createSelectorQuery().select('#editor').context((res) => {this.editorCtx = res.context}).exec()},undo() {this.editorCtx.undo()},redo() {this.editorCtx.redo()},format(e) {let {name,value} = e.target.datasetif (!name) return// console.log('format', name, value)this.editorCtx.format(name, value)},onStatusChange(e) {const formats = e.detailthis.formats = formats},insertDivider() {this.editorCtx.insertDivider({success: function() {console.log('insert divider success')}})},clear() {this.editorCtx.clear({success: function(res) {console.log("clear success")}})},removeFormat() {this.editorCtx.removeFormat()},insertDate() {const date = new Date()const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`this.editorCtx.insertText({text: formatDate})},insertImage() {uni.chooseImage({count: 1,success: (res) => {this.editorCtx.insertImage({src: res.tempFilePaths[0],alt: '图像',success: function() {console.log('insert image success')}})}})}},onLoad() {uni.loadFontFace({family: 'Pacifico',source: 'url("https://sungd.github.io/Pacifico.ttf")'})},}
</script><style>@import "./editor-icon.css";.page-body {height: calc(100vh - var(--window-top) - var(--status-bar-height));}.wrapper {height: 100%;}.editor-wrapper {height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);background: #fff;}.iconfont {display: inline-block;padding: 8px 8px;width: 24px;height: 24px;cursor: pointer;font-size: 20px;}.toolbar {box-sizing: border-box;border-bottom: 0;font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;}.ql-container {box-sizing: border-box;padding: 12px 15px;width: 100%;min-height: 30vh;height: 100%;margin-top: 20px;font-size: 16px;line-height: 1.5;}.ql-active {color: #06c;}#editor {width: 100%;height: 300px;background-color: #CCCCCC;}
</style>

2.导入css和字体，css和字体已打包上传

uniapp富文本框相关推荐

uniapp 富文本框获取输入字符长度
原理很简单,只要通过 textarea 的 @input 事件就能拿到所有的参数图中所示是输入字符长度可通过 console.log( e.detail.cursor) 打印 <tem ...
uniapp 电商app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
uniapp 发布文章app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容
微信小程序端引入富文本样式富文本提交图片json error 一.展示示例: 1.PC端前端发布界面可以设置文字大小,居中,可以插入图片,设置图片大小,居中. 2.小程序端展示二.基于若依框架踩 ...
html加载富文本_Uniapp基础实战富文本框解析 WordPress rest api实例
文本是更具上篇文章uni-app上下拉刷新的续文有需要了解上文的请点击下面连接访问传送门: Uni-app实战上加载新下拉刷新 WordPress rest api实例那么我们就开始了,主要的要是 ...
解决Vue用v-html、v-text渲染后台富文本框文本内容样式修改问题，用自定义css样式无法渲染出对应效果的问题
举例: 如果您要加载富文本框内容的DOM id是detail 那么就这么写scss样式 #detail {font-size: 14px;text-align: center;&>> ...
常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ；和CKEditor实例...
目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多年历史的富文本编辑器了,使用简单,而且一般的使用是免费的,但是不开源,上传图片上传附件等功能没有,扩展性差. CuteEdit ...
ueditor 不显示工具栏_Python 之Django富文本框Ueditor的使用
Django框架是用Python进行Web开发的重要框架,进行Web开发通常会用到网页编辑器,百度的Ueditor网页编辑器功能非常强大,不直接支持python,但有Django第三方插件支持这就是D ...
split、replace、indexof、substr 用法（获取后台富文本框内容，截取图片）
1.split() 分割字符串,转化成数组 (1)分割数据中有某段字符串的数据 ,转化成数组 //拿取富文本框中的图片var div=data[0].text.split("/agricu ...

uniapp富文本框

uniapp富文本框相关推荐

最新文章

热门文章