如何调用ueditor命令模板？-网站模板-锦华智联科技

UEditor 的命令调用是其核心功能之一，它允许开发者通过 JavaScript 代码精确地控制编辑器，执行各种操作，比如获取内容、设置内容、格式文本、插入图片等。

（图片来源网络，侵删）

核心思想是：通过编辑器实例的 execCommand 方法来执行命令。

基本调用模板

这是最基础、最通用的调用模式，适用于绝大多数命令。

// 1. 获取编辑器实例
//    'editor' 是你在初始化 UEditor 时传入的容器 ID
var editor = UE.getEditor('editor');
// 2. 确保编辑器已经加载完成
//    这是一个最佳实践，可以避免在编辑器未准备好时执行命令导致出错
editor.ready(function() {
    // 3. 调用命令
    //    语法: editor.execCommand('命令名称', [命令参数], [自定义回传值]);
    // --- 示例1：执行无参数命令 ---
    // 将选中的文本加粗
    editor.execCommand('bold');
    // --- 示例2：执行带参数的命令 ---
    // 将选中的文本字体设置为 '微软雅黑'
    editor.execCommand('fontfamily', '微软雅黑');
    // --- 示例3：执行需要回调的命令 ---
    // 插入一张网络图片
    editor.execCommand('insertimage', 'https://example.com/path/to/image.jpg');
});

核心方法详解：`execCommand`

语法

editor.execCommand(commandName, [commandArgs], [returnValue]);

参数说明

commandName (字符串，必需)
（图片来源网络，侵删）
- 命令的名称,'bold', 'insertimage', 'getContent' 等，这是你想要执行的操作。
commandArgs (任意类型，可选)
- 传递给命令的参数,参数的类型和内容取决于具体的命令。
- 'fontfamily' 命令需要一个字体名称作为参数。
- 对于 insertimage，参数可以是图片 URL，也可以是一个包含图片信息的配置对象。
returnValue (任意类型，可选)
- 某些命令在执行后会返回一个值,你可以通过这个参数来接收。
- 'getContent' 命令会返回编辑器里的 HTML 内容。

命令分类与实用示例

为了更好地理解,我们将常用命令分为几类，并提供详细的调用模板。

内容操作命令

这类命令主要用于获取或设置编辑器的内容。

（图片来源网络，侵删）

命令名	功能	调用示例	说明
`getContent`	获取编辑器中的 HTML 内容	`var html = editor.execCommand('getContent');`	最常用的命令之一，用于保存数据。
`getContentTxt`	获取编辑器中的纯文本内容	`var text = editor.execCommand('getContentTxt');`	适用于只需要文本的场景，如搜索摘要。
`setContent`	设置编辑器的内容	`editor.execCommand('setContent', '<h1>新内容</h1>');`	可以传入 HTML 字符串来重置编辑器内容。
`getPlainTxt`	获取带格式的纯文本	`var plainText = editor.execCommand('getPlainTxt');`	会保留换行等基本格式，但移除所有 HTML 标签。

格式化命令

这类命令用于对选中的文本或光标位置进行格式化设置。

命令名	功能	调用示例	说明
`bold`	加粗	`editor.execCommand('bold');`	无参数。
`italic`	斜体	`editor.execCommand('italic');`	无参数。
`underline`	下划线	`editor.execCommand('underline');`	无参数。
`fontfamily`	设置字体	`editor.execCommand('fontfamily', '宋体');`	参数为字体名称。
`fontsize`	设置字号	`editor.execCommand('fontsize', '16px');`	参数为字号，可以是 '12px', '1', '2' 等。
`forecolor`	设置文字颜色	`editor.execCommand('forecolor', '#FF0000');`	参数为颜色值。
`backcolor`	设置背景颜色	`editor.execCommand('backcolor', '#FFFF00');`	参数为颜色值。
`justifyleft`	左对齐	`editor.execCommand('justifyleft');`	无参数。
`justifycenter`	居中对齐	`editor.execCommand('justifycenter');`	无参数。
`justifyright`	右对齐	`editor.execCommand('justifyright');`	无参数。
`insertorderedlist`	有序列表	`editor.execCommand('insertorderedlist');`	无参数。
`insertunorderedlist`	无序列表	`editor.execCommand('insertunorderedlist');`	无参数。

插入元素命令

这类命令用于在编辑器中插入各种元素。

命令名	功能	调用示例	说明
`insertimage`	插入图片	`editor.execCommand('insertimage', 'https://.../img.jpg');`	最简单的用法是传入图片 URL。
		`editor.execCommand('insertimage', {src: '...', width: 100, height: 100, title: '图片标题'});`	推荐用法，传入一个对象，可以控制图片的更多属性。
`link`	插入/编辑超链接	`editor.execCommand('link', 'https://www.baidu.com', '百度一下');`	参数为链接地址和链接文本。
`unlink`	移除超链接	`editor.execCommand('unlink');`	无参数。
`inserttable`	插入表格	`editor.execCommand('inserttable', 5, 3);`	参数为行数和列数。
`horizontal`	插入分割线	`editor.execCommand('horizontal');`	无参数。

查询命令

这类命令用于查询当前光标位置的样式状态,常用于在自定义工具栏中高亮显示当前样式。

命令名	功能	调用示例	说明
`queryCommandState`	查询命令状态	`var isBold = editor.execCommand('queryCommandState', 'bold');`	返回 `1` 表示当前应用了该样式，`-1` 表示未应用，`0` 表示命令不可用。
`queryCommandValue`	查询命令值	`var currentFont = editor.execCommand('queryCommandValue', 'fontfamily');`	返回当前设置的值，如 '微软雅黑'。

完整实践示例：一个简单的自定义工具栏

假设我们想创建一个按钮,点击后把编辑器中的所有 "Hello" 替换成 "Hi"。

<!DOCTYPE html>
<html>
<head>UEditor 命令调用示例</title>
    <!-- 引入 UEditor 样式 -->
    <link href="ueditor/themes/default/css/ueditor.css" type="text/css" rel="stylesheet">
    <style>
        #myToolbar {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
        #myToolbar button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!-- 自定义工具栏 -->
    <div id="myToolbar">
        <button onclick="replaceText()">替换 "Hello" 为 "Hi"</button>
        <button onclick="insertMyImage()">插入我的图片</button>
        <button onclick="getEditorContent()">获取内容</button>
    </div>
    <!-- UEditor 编辑器容器 -->
    <script id="editor" type="text/plain" style="width:1000px;height:500px;"></script>
    <!-- 引入 UEditor 核心 -->
    <script src="ueditor/ueditor.config.js"></script>
    <script src="ueditor/ueditor.all.min.js"></script>
    <script>
        // 1. 初始化编辑器
        var editor = UE.getEditor('editor');
        // 2. 定义自定义函数
        function replaceText() {
            editor.ready(function() {
                // 获取编辑器内容
                var content = editor.getContent();
                // 使用正则表达式进行替换
                var newContent = content.replace(/Hello/g, 'Hi');
                // 将新内容设置回编辑器
                editor.setContent(newContent);
                alert('替换完成！');
            });
        }
        function insertMyImage() {
            editor.ready(function() {
                // 准备图片对象
                var myImage = {
                    src: 'https://raw.githubusercontent.com/guozhongqiang/ueditor/master/_examples/ueditor.jpg', // 一个示例图片
                    width: '300', // 宽度
                    _src: 'https://raw.githubusercontent.com/guozhongqiang/ueditor/master/_examples/ueditor.jpg' // 保存原始地址
                };
                // 调用 insertimage 命令，并传入图片对象
                editor.execCommand('insertimage', myImage);
            });
        }
        function getEditorContent() {
            editor.ready(function() {
                // 调用 getContent 命令获取内容
                var htmlContent = editor.execCommand('getContent');
                // 在控制台打印内容
                console.log('编辑器当前内容是:', htmlContent);
                // 也可以弹出一个提示框（注意：HTML内容可能包含恶意脚本，直接 alert 不安全）
                // alert(htmlContent);
                // 安全的做法是显示在页面的某个元素里
                document.getElementById('output').innerHTML = htmlContent;
            });
        }
    </script>
    <!-- 用于显示获取到的内容 -->
    <h3>编辑器内容输出：</h3>
    <div id="output" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;"></div>
</body>
</html>

最佳实践与注意事项

使用 editor.ready()：所有对编辑器实例的操作，特别是调用 execCommand，都应该在 editor.ready() 回调函数中进行，这可以确保编辑器已经完全初始化，避免出现 undefined 错误。
参数类型：注意 execCommand 的第二个参数 commandArgs 的类型，对于简单命令，它可能是字符串或数字；对于复杂的插入命令（如 insertimage），最好使用一个对象，这样更清晰且易于扩展。
异步操作：editor.ready() 是一个异步过程，如果你的代码依赖于编辑器初始化完成，请务必确保相关的调用都在其回调函数内部。
官方文档：最权威的信息来源永远是 UEditor 的官方文档和源码，你可以在这里找到所有可用的命令列表及其详细说明：UEditor 官方文档。
自定义命令：如果你需要实现 UEditor 没有提供的功能，还可以通过 plugin 机制来注册自定义命令，但这属于进阶内容了。

希望这份详细的“命令调用模板”能帮助你更好地掌握和使用 UEditor！

如何调用ueditor命令模板？