我的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> <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> <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);
}
};
}]);;