I am currently using CKEditor as my WYSIWYG editor for the text on my site. And I just ran into a problem of using this editor with angular's partial views. The views are hidden with ng-hide and ng-show.
When I am outside of my current partial view the editor works fine. Meaning the tool bar pops up, the buttons on the tool bar work, and the text is editable as well.
However when I am in my partial view the popup still comes up, but the text is not editable, and the buttons are disabled.
This is my current code to bring up the editor
plunker.directive('ckEditor', function($http, $timeout) {
return {
require: '?ngModel',
link: function(scope, elm, attr, ngModel) {
var ck = CKEDITOR.inline(elm[0]);
if (!ngModel) return;
ck.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
So my question is has anyone gotten CKEditor to work with partial views? If so how did you do it?
You have not provided any example, so it's hard to tell. There may be few reasons,
check if the element type is supported by CKEditor - if not you'll have to hack CKEditor config by copying some settings from div
ensure your element has contenteditable='true'
ensure you are manually instrumenting CKEditor to provide editor for your partials.
you may also want to read this:
Enable CKEditor4 inline on span and other inline tags
http://docs.ckeditor.com/#!/api/CKEDITOR.dtd-property-S-editable
Related
I want to add an additional checkbox next to Crop Image but I can't understand what need to write in javascript for rendering it and handling then. I couldn't find documentation with explaining that. I've tried to write code like that but it didn't work:
function addListBlockClassName (settings, name) {
if (name !== 'core/gallery') {
return settings
}
// new checkbox
settings.attributes.enableVoting = {
default: false,
type: 'boolean',
}
return settings
}
wp.hooks.addFilter(
'blocks.registerBlockType',
'my-plugin/class-names/list-block',
addListBlockClassName
)
You can add the additional checkbox on sidebar by using InspectorControls and Checkbox Control
Have a look at gallery block and learn how the are implementing things on sidebar via using InspectorControls. This can be complex so for easier implementation you can look at other core blocks of Gutenberg.
And this link can help you about how to use CheckboxControl.
In your above code you are just adding a hook which is changing the default class name of block gallery and that is not what you are asking. Please note that as per my knowledge you can't edit default core blocks (apart from very few things) unless you copy whole core block and add additional functionality into it.
Currently I have a button when clicked, renders a template into the dom. I want the button to act more like a "clone element and append to parent element" button, but instead I only know how to "clone an element" by rerendering the template. It is a very expensive operation for rendering the template which I want to avoid.
Currrently I am doing this
Template.addWorkoutExercise.events({
'click .add-exercise': function(e) {
Blaze.render( Template.addWorkoutExercise , $( '#main' ).get(0) );
e.preventDefault();
}
});
I want to know if there is a way to 'clone a element' without rendering, or if I can safely copy the view somehow.
I think that by using Blaze.View you can create a new view from a template without rendering it immediately. You will then be able to render it by either calling Blaze.render or Blaze.toHTML.
You can do that using jquery.
Try this:
$('.element').clone().insertAfter('.element')
I am using Asp text box with Ajax html editor extender. My issue is i don't want to allow to paste the content which is copied from some other source into my text box. And also in my text box when i am clicking the enter(for next line) it is stored as Div tag in my data base how to resolve these two issues. Please let me know the solutions.
Try this See Reference
$(document).ready(function () {
$('input.disablecopypaste').bind('copy paste', function (e) {
e.preventDefault();
});
});
I need menu tabs that link to separate HTML files on my server, with unique URLs. I know this by itself doesn't require anything but CSS, but I would also like to retain the "instant load" effect of Javascript-enable menus, as well as loading only the relevant section of the page. (a CSS-only menu, I think, would reload the entire page). Is this possible?
It's possible with the help of Knockout.js and/or JQuery.
You could do it all with JQuery using the Tabs plugin provided by JQuery UI. You would have to write all of your own CSS so that you don't get the default "tabbed" look but something that resemble a menu.
Or, you could use Knockout.js to create a client-side view model with a set of commands that are bound to your menu items. Each command would then trigger a page update, most likely using JQuery.
Here's a very high-level example of how this might work starting with a basic menu:
<ul>
<li data-bind="menuOption1">
...
</li>
</li>
A Knockout.js view model
var MenuViewModel = function ()
{
this.menuOption1 = function () {
// TODO: show the discreet HTML page
}
}
ko.applyBindings(new MenuViewModel());
How you actually show the page is up to you. It's probably easiest to use a JQuery AJAX call to load the page contents.
How you make/style the menu does not have any effect on how the pages linked in the menu are loaded once clicked. In order to avoid a page reload upon click, you'll need to make an ajax request to that page and load it into your current page.
I suggest using jQuery's AJAX so as to avoid cross-browser issues.
Example:
$('#menu a').click(function(ev){
$.ajax({
url: "test.html",
cache: false
}).done(function( html ) {
$("#results").append(html);
});
ev.preventDefalt();
});
I know that if I add target="_blank" to the <a> tag this will cause a new window to open when the link is clicked.
But how do I add this to the <a> tag the Drupal way ?
This is a teaser title, not an anchor that I created in a block or have direct edit ability to.
Thanks all.
You can add target="_blank" using jquery, so you avoid using a non compliant tag.
$(document).ready( function() {
$('a.teaser-title-class').attr({
target: "_blank",
title: "Opens in a new window"
});
});
Change teaser-title-class with your teaser title class. You can find what class it is using "inspect element" in chrome or firefox. If teaser class isn't available, you can use selector in other ways, e.g.: $('#teaser a')
As Marius says you can use the node template file, but that involves non-compliant markup. If you use JS, then the Drupal way uses behaviors. Also you shouldn't assume $ is jQuery in D7. Here's an example:
(function ($) {
Drupal.behaviors.titleTargetModify = {
attach: function(context) {
$('h2 a:not(.titletarget-processed)', context)
.addClass('titletarget-processed')
.attr('target', '_blank');
}
};
}(jQuery));
More details
this can be changed in your theme file (usually is node.tpl.php ) and you just add the target attribute there. keep in mind that the target attribute is not xhtml compliant and you should use javascript to add the target attribute