当我单击工具栏中的按钮时,它只选择一个按钮

时间:2015-01-13 22:41:38

标签: javascript html angularjs wysihtml5

我的wysiwyg文本编辑器工具栏工作正常。然后我添加了上传图片按钮,现在无论我在工具栏上单击它,它都会选择图像按钮。它显示了一个框,用于粘贴按下图像按钮时触发的图像URL。

<div ng-show='editMode' id="wysihtml5-editor-toolbar">
    <header>
        <ul class="commands">
            <li data-wysihtml5-command="bold" title="Make text bold (CTRL + B)" class="btn"><i class="fa fa-bold fa-lg fw"></i>
            </li>
            <li data-wysihtml5-command="italic" title="Make text italic (CTRL + I)" class="btn"><i class="fa fa-italic fa-lg fw"></i>
            </li>
            <li data-wysihtml5-command="underline" title="Make text italic (CTRL + I)" class="btn"><i class="fa fa-underline fa-lg fw"></i>
            </li>
            <li data-wysihtml5-command="insertUnorderedList" title="Insert an unordered list" class="btn"><i class="fa fa-list-ul fa-lg fw"></i> Make a List</li>

            <li data-wysihtml5-command="createLink" title="Insert a link" class="btn"><i class="fa fa-link fa-lg fw"></i> Link</li>
            <li data-wysihtml5-command="insertImage" title="Insert an image" class="btn"><i class="fa fa-picture-o fa-lg fw"></i> Put in a Picture</li>

        </ul>
    </header>
    <div data-wysihtml5-dialog="createLink" style="display: none;">
        <label>
            Link:
            <input data-wysihtml5-dialog-field="href" value="http://">
        </label>
        <a data-wysihtml5-dialog-action="save">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">Cancel</a>
    </div>

    <div data-wysihtml5-dialog="insertImage" style="display: none;">
        <label>
            Image:
            <input data-wysihtml5-dialog-field="src" value="http://">
        </label>
        <a data-wysihtml5-dialog-action="save">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">Cancel</a>
    </div>
</div>

这是指令,如果有帮助的话。伙计们,我真的很感谢你的帮助。我不知道该怎么做。如果我禁用图像按钮,它会使用链接按钮开始执行此操作。无论哪个按钮最右边都会占据整个工具栏。

.directive('wysihtml5', ['$timeout',
    function ($timeout) {
                return {
                    restrict: 'E',
                    require: 'ngModel',
                    template: "<textarea></textarea>", // A template you create as a HTML file (use templateURL) or something else...
                    link: function ($scope, $element, attrs, ngModel) {

                        // Find the textarea defined in your Template
                        var textarea = $element.find("textarea");

                        function callAtTimeout() {
                            console.log($scope.project.problem.how);

                        }
                        $timeout(callAtTimeout, 3000);
                        // When your model changes from the outside, use ngModel.$render to update the value in the textarea
                        ngModel.$render = function () {
                            textarea.val(ngModel.$viewValue);
                        };
                        $scope.$apply(function () {
                            ngModel.$setViewValue('Hello');
                        });

                        // Create the editor itself, use TinyMCE in your case
                        var editor = new wysihtml5.Editor(textarea[0], {
                            stylesheets: ["http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css", "/assets/stylesheets/editor.css"],
                            parserRules: wysihtml5ParserRules,
                            autoLink: true,
                            useLineBreaks: false,
                            toolbar: "wysihtml5-editor-toolbar",
                        });

                        // Ensure editor is rendered before binding to the change event
                        $timeout(function () {

                            // On every change in the editor, get the value from the editor (textarea in case of Wysihtml5)
                            // and set your model
                            editor.on('change', function () {
                                var newValue = textarea.val();

                                if (!$scope.$$phase) {
                                    $scope.$apply(function () {
                                        ngModel.$setViewValue(newValue);
                                    });
                                }
                            });

                        }, 500);
                    }
                };
    }]);;

0 个答案:

没有答案