使用UEditor

最新推荐文章于 2023-02-13 17:01:31 发布

lu900618

最新推荐文章于 2023-02-13 17:01:31 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

分类专栏： thinkphp

本文链接：https://blog.youkuaiyun.com/lu900618/article/details/54584890

thinkphp 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何集成UEditor富文本编辑器到项目中，包括必要的JavaScript文件引入及配置，实现对textarea元素的替换，以提供强大的富文本编辑功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入并定义要显示的标签：

<script type="text/javascript" charset="utf-8" src="{$Think.config.PLUGIN_URL}ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{$Think.config.PLUGIN_URL}ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="{$Think.config.PLUGIN_URL}ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    UEDITOR_CONFIG.toolbars = [[
        'fullscreen', 'source', '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
        'lineheight', '|',
        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
        'directionalityltr', 'directionalityrtl', 'indent', '|',
        'justifyleft', 'justifycenter', 'justifyright', '|', 'touppercase', 'tolowercase', '|',
        'link', 'unlink', '|',
        'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'insertcode', 'pagebreak', 'template', 'background', '|',
        'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
        'searchreplace', 'drafts', 'help'
    ]];
</script>

找到需要替换的<textarea>：

            <tr>
                <td>
                    <textarea name="f_goods_introduce" id="f_goods_introduce" type="text/plain"
                              style="height: 400px;"></textarea>
                </td>
            </tr>

替换：

            <script type="text/javascript">
                var ue = UE.getEditor('f_goods_introduce');
            </script>