laravel框架中引入百度编辑器

曾经终败给现在 2022-04-06 05:48 361阅读 0赞

第一步:先去这个[https://ueditor.baidu.com/website/download.html ][https_ueditor.baidu.com_website_download.html]下载源码包

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjExNTQ3_size_16_color_FFFFFF_t_70][]

2.然后把他拉到laravel框架的public下  方便调用

3.打开里面的index页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjExNTQ3_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjExNTQ3_size_16_color_FFFFFF_t_70 2][]

![20181208161203630.png][]

把这些代码复制到你需要用到编辑器的地方  然后引入正确的js样式 就可以成功执行了

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
     <?php header('Content-type:text/html;charset=utf8'); ?>
     <form action="{
       {url('insert')}}" method="post">
    	    <script type="text/javascript" charset="utf-8" src="{
       {asset('ueditor')}}/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="{
       {asset('ueditor')}}/ueditor.all.min.js"> </script>
        <script type="text/javascript" charset="utf-8" src="{
       {asset('ueditor')}}/lang/zh-cn/zh-cn.js"></script>
        <script id="editor" name="feiji" type="text/plain" style="width:800px;height:500px;">
    
        </script>
      
       
    <script type="text/javascript">
    
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor');
    </script>
    <input type="submit" value="提交">
    </form>
    </body>
    </html>

[https_ueditor.baidu.com_website_download.html]: https://ueditor.baidu.com/website/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjExNTQ3_size_16_color_FFFFFF_t_70]: /images/20220406/bff1aabd4c1e45c79c39d1a907aa3b23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjExNTQ3_size_16_color_FFFFFF_t_70 1]: /images/20220406/f48f855e9cc942d29cc46b3746e178bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjExNTQ3_size_16_color_FFFFFF_t_70 2]: /images/20220406/84e6c405ce36442aaa2ad3685560350a.png
[20181208161203630.png]: /images/20220406/4dab3817cbfa4045b80f6f64f17210a0.png