• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

15e0pihkj0n3144.png

代码片段

模板

视角

!-

更多api,请前往:https://开发者。微信。QQ。com/mini program/dev/API/media/editor/editor上下文。超文本标记语言

字体图标,微信小程序官方的确没有给出名称

-

视图class='container '

编辑器id=' editor ' show-img-size :只读=' isEdit ' show-img-resize show-img-toolbar class=' QL-容器'

: placeholder=' placeholder ' @ status change=' onStatusChange ' @ ready=' onEditorReady '

/编辑

/查看

u-button class='savebtn' text='保存@ tap=' store ' size=' large ' type=' success '/u按钮

view class=' toolbar ' @ touch end。stop=' format ' : style=' ' bottom : '(isIOS?键盘高度: 0)"像素"

I class=' icon font icon-charutupian ' @ touch end。stop='插入图像'/I

I : class=' ' icon font icon-format-header-1 '(格式。' header===1?'QL-活动' : ' ')' data-name=' header '

:data-value='1'/i

I : class=' ' icon font icon-format-header-2 '(格式。' header===2?'QL-活动' : ' ')' data-name=' header '

:data-value='2'/i

I : class=' ' icon字体图标-格式-标题-3 '(格式。' header===3?'QL-活动' : ' ')' data-name=' header '

:data-value='3'/i

I : class=' ' icon字体图标-格式-标题-4 '(格式。' header===4?'QL-活动' : ' ')' data-name=' header '

:data-value='4'/i

I : class=' ' icon字体图标-格式-标题-5 '(格式。' header===5?'QL-活动' : ' ')' data-name=' header '

:data-value='5'/i

I : class=' ' icon字体图标-格式-标题-6 '(格式。' header===6?'QL-活动' : ' ')' data-name=' header '

:data-value='6'/i

I : class=' ' icon font icon-ziti jiacu '(格式。“大胆?”QL-active ' : ' ')' data-name=' bold '/I

I : class=' ' icon字体icon-zitishanchuxian '(格式。罢工?QL-active ' : ' ')' data-name=' strike '/I

I : class=' ' icon font icon-ziti xieti '(格式。“斜体?”QL-活动' : ' ')' data-name=' italic '/I

I : class=' '图标字体图标-左对右(formats.align==='left '?'QL-活动' : ' ')'数据

-name="align" data-value="left"></i> <i :class="'iconfont icon-juzhongduiqi ' + (formats.align === 'center' ? 'ql-active' : '')" data-name="align" data-value="center"></i> <i :class="'iconfont icon-youduiqi ' + (formats.align === 'right' ? 'ql-active' : '')" data-name="align" data-value="right"></i> <i :class="'iconfont icon-zuoyouduiqi ' + (formats.align === 'justify' ? 'ql-active' : '')" data-name="align" data-value="justify"></i> <i :class="'iconfont icon-line-height ' + (formats.lineHeight ? 'ql-active' : '')" data-name="lineHeight" data-value="2"></i> <i :class="'iconfont icon-Character-Spacing ' + (formats.letterSpacing ? 'ql-active' : '')" data-name="letterSpacing" data-value="2em"></i> <i :class="'iconfont icon-722bianjiqi_duanqianju ' + (formats.marginTop ? 'ql-active' : '')" data-name="marginTop" data-value="20px"></i> <i :class="'iconfont icon-723bianjiqi_duanhouju ' + (formats.micon-previewarginBottom ? 'ql-active' : '')" data-name="marginBottom" data-value="20px"></i> <i class="iconfont icon-clearedformat" @tap="removeFormat"></i> <i :class="'iconfont icon-font ' + (formats.fontFamily ? 'ql-active' : '')" data-name="fontFamily" data-value="Pacifico"></i> <i :class="'iconfont icon-fontsize ' + (formats.fontSize === '24px' ? 'ql-active' : '')" data-name="fontSize" data-value="24px"></i> <i :class="'iconfont icon-text_color ' + (formats.color === fontColor ? 'ql-active' : '')" data-name="color" :data-value="fontColor" @tap="open"></i> <i :class="'iconfont icon-fontbgcolor ' + (formats.backgroundColor === '#00ff00' ? 'ql-active' : '')" data-name="backgroundColor" data-value="#00ff00"></i> <!-- 引用黄河浪的color取色器 --> <i class="iconfont icon-date" @tap="insertDate"></i> <i class="iconfont icon-undo" @tap="undo"></i> <i class="iconfont icon-redo" @tap="redo"></i> <i :class="'iconfont icon-zitixiahuaxian ' + (formats.underline ? 'ql-active' : '')" data-name="underline"></i> <i class="iconfont icon--checklist" data-name="list" data-value="check"></i> <i :class="'iconfont icon-youxupailie ' + (formats.list === 'ordered' ? 'ql-active' : '')" data-name="list" data-value="ordered"></i> <i :class="'iconfont icon-wuxupailie ' + (formats.list === 'bullet' ? 'ql-active' : '')" data-name="list" data-value="bullet"></i> <i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i> <i class="iconfont icon-indent" data-name="indent" data-value="+1"></i> <i class="iconfont icon-fengexian" @tap="insertDivider"></i> <i class="iconfont icon-preview" @tap="store" id="2"></i> <i :class="'iconfont icon-zitixiabiao ' + (formats.script === 'sub' ? 'ql-active' : '')" data-name="script" data-value="sub"></i> <i :class="'iconfont icon-zitishangbiao ' + (formats.script === 'super' ? 'ql-active' : '')" data-name="script" data-value="super"></i> <!-- <i class="iconfont icon-quanping"></i> --> <i class="iconfont icon-shanchu" @tap="clear"></i> <i :class="'iconfont icon-direction-rtl ' + (formats.direction === 'rtl' ? 'ql-active' : '')" data-name="direction" data-value="rtl"></i> <i class="iconfont icon-baocun" @tap="store" id="1"></i> </view> <t-color-picker ref="colorPicker" :color="color" @confirm="confirm" @cancel="cancel"></t-color-picker> </view> </template> <script> import tColorPicke from '@/components/t-color-picker.vue'; var _self; export default { components: { 't-color-picker': tColorPicke }, data() { return { color: { r: 255, g: 0, b: 0, a: 0.6 }, isEdit: false, fontColor: '#000', formats: {}, readOnly: false, placeholder: '请输入您的店铺介绍信息...', editorHeight: 300, keyboardHeight: 0, isIOS: false, upurl:'' }; }, onLoad() { _self = this; }, methods: { cancel() { this.isEdit = false; }, open() { this.$refs.colorPicker.open(); this.isEdit = true; // uni.hideKeyboard(); }, hideKey() { uni.hideKeyboard(); }, async confirm(e) { this.isEdit = false; this.fontColor = await e.hex; this.onStatusChange({ detail: { color: e.hex } }); this.$forceUpdate(); }, readOnlyChange() { this.readOnly = !this.readOnly }, onEditorReady() { uni.createSelectorQuery().select('#editor').context(function(res) { _self.editorCtx = res.context; }).exec(); }, undo() { this.editorCtx.undo(); }, redo() { this.editorCtx.redo(); }, blur() { this.editorCtx.blur(); }, format(e) { // this.hideKey(); let { name,value } = e.target.dataset; if (!name) return; // console.log('format', name, value) this.editorCtx.format(name, value); }, onStatusChange(e) { this.formats = e.detail; }, insertDivider() { this.editorCtx.insertDivider({ success: function() { console.log('insert divider success'); } }); }, previewarginBottom(){ console.log('----mkzb'); }, store(e) { this.editorCtx.getContents({ success: function(res) { e.currentTarget.id == 1 ? console.log('保存内容:', res.html) : uni.navigateTo({ url: `../preview/preview?rich=${encodeURIComponent(res.html)}` }); } }); }, 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() { // const that = this; uni.chooseImage({ count: 1, success: function(res) { console.log(res); if(process.env.NODE_ENV === 'development'){ console.log('开发环境'); this.upurl = 'http://local.yongen.com/api.php/Upload/uploadMoreImg'; }else{ console.log('生产环境'); this.upurl = '/api.php/Upload/uploadMoreImg'; } let url = res.tempFilePaths[0]; let a = uni.uploadFile({ url: this.upurl, //仅为示例,非真实的接口地址 filePath: url, name: 'file', formData: { user: 'test', name: 'pyq' }, success: (res) => { setTimeout(() => { console.log(res.data); //resolve(JSON.parse(res.data).data[0]) //resolve(res.data.data) _self.editorCtx.insertImage({ src: JSON.parse(res.data).data[0], data: { id: 'abcd', role: 'god' }, width: '100%', success: function() { console.log('insert image success'); } }); }, 1000) } }); } }); } } }; </script> <style> @import "./editinfo.css"; </style>
  • 参考:https://ext.dcloud.net.cn/plugin?id=1123
  • https://www.likecs.com/show-425247.html
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now