会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132412个问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .square{
            width: 600px;
            height: 600px;
            background-color: antiquewhite;
        }
        .left{
            float: left;
            width: 200px;
            height: 600px;
            background-color: pink;
        }
        .right{
            float: right;
            width: 400px;
            height: 600px;
            background-color: green;
        }
        .top{
            width: 400px;
            height: 300px;
            background-color: springgreen;
        }
        .zuo{
            float: left;
            width: 200px;
            height: 300px;
            background-color: blue;
        }
        .you{
            float: right;
            width: 200px;
            height: 300px;
            background-color: chocolate;
        }
    </style>

</head>
<body>
   
    <div class="square">
        <div class="left"></div>
        <div class="right">
            <div class="top"></div>
            <div class="bottom">
                <div class="zuo"></div>
                <div class="you"></div>
            </div>
        </div>
    </div>

</body>
</html>


WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 4081楼
人工智能/第五阶段:机器学习-线性回归/Lasso回归_Ridge回归_多项式回归 4083楼
JAVA 全系列/第一阶段:JAVA 快速入门/变量、数据类型、运算符 4086楼
JAVA 全系列/第三阶段:数据库编程/JDBC技术 4087楼

代码:

<template>
    <editor v-model="textContent" :init="init"></editor>
</template>

<script setup>
import tinymce from 'tinymce/tinymce'
//tinymce默认hidden,不引入不显示
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme' // 主题件
import 'tinymce/icons/default'
import 'tinymce/models/dom' // Bug修复
// tinymce插件可按自己的需要进行导入
// 更多插件参考:https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image' // 插入上传图片插件
import "tinymce/plugins/importcss"; //图片工具
import 'tinymce/plugins/media' // 插入视频插件
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/lists' // 列表插件
import "tinymce/plugins/charmap"; // 特殊字符
import 'tinymce/plugins/wordcount' // 字数统计插件
import "tinymce/plugins/codesample"; // 插入代码
import "tinymce/plugins/code"; // 查看源码
import "tinymce/plugins/fullscreen"; //全屏
import 'tinymce/plugins/link' //
import 'tinymce/plugins/preview' // 预览
import "tinymce/plugins/template"; //插入模板
import 'tinymce/plugins/save' // 保存
import "tinymce/plugins/searchreplace"; //查询替换
import "tinymce/plugins/pagebreak"; //分页
import "tinymce/plugins/insertdatetime"; //时间插入

import { reactive, ref, watch, onMounted }
    from "vue"

const emit = defineEmits(["onDataEvent"])

const props = defineProps({
    value: {
        type: String,
        default: ''
    },
    plugins: {
        type: [String, Array],
        default: 'lists image media tablewordcount save preview'
    },
    toolbar: {
        type: [String, Array],
        default: 'undo redo | formatselect | bold italic underline strikethrough forecolor backcolor | alignleft' +
            'aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | lists image' +
            'media table | codesample code removeformat save preview'
        // default: 'formats undo redo paste
        // print fontsizeselect fontselect template
        // fullpage | wordcount ltr rtl visualchars
        // visualblocks toc spellchecker
        // searchreplace | save preview pagebreak
        // nonbreaking | media image | outdent indent
        // aligncenter alignleft alignright
        // alignjustify lineheight underline quicklink
        // h2 h3 blockquote numlist bullist table
        // removeformat forecolor backcolor bold italic
        // strikethrough hr charmap link
        // insertdatetime | subscript superscript cut
        // codesample code | anchor preview
        // fullscreen | help'
    }
})

const init = reactive({
    width: 720,
    height: 300,
    language_url: '/tinymce/langs/zh-Hans.js',
    language: 'zh-Hans',
    // 皮肤:这里引入的是public下的资源文件
    skin_url: '/tinymce/skins/ui/oxide',
    // skin_url:'tinymce/skins/ui/oxide dark',//黑色系
    plugins: props.plugins,
    toolbar: props.toolbar,
    content_css:
    '/tinymce/skins/content/default/content.css', branding: false,
    // 隐藏菜单栏
    menubar: false,
    // 是否显示底部状态栏
    statusbar: true,
    // convert_urls: false,
    // 初始化完成
    init_instance_callback: (editor) => {
    console.log("初始化完成:", editor)
},
    // 此处为图片上传处理函数,这个直接用了base64的图片形式上传图片,
// 如需ajax上传可参考 https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
    images_upload_handler: (blobInfo,success, failure) => {
        const img =
        'data:image/jpeg;base64,' +
        blobInfo.base64()
    console.log("图片上传处理:", img)
    success(img)
}
})
    const textContent = ref("")

    watch(props.value, (newValue, oldValue) => {
        textContent.value = newValue
})
    watch(textContent, (newValue, oldValue) => {
    emit("onDataEvent", newValue)
})
onMounted(() => {
    // 初始化 tinymce
    tinymce.init({})
})
</script>


Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 4090楼
C++特训班/第一阶段:基础篇/基础篇 4091楼
JAVA 全系列/第十八阶段:亿级高并发电商项目/亿级高并发电商项目(旧) 4092楼

image.png

Python 全系列/第十九阶段:数据分析-数据管理/numpy 4093楼
Python 全系列/第十九阶段:数据分析-数据管理/numpy 4094楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 4095楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637