I am using tiny mce with smarty but it shows blank pop ups such as in image,anchor,preview buttons. The code i have used in my tpl file is
`{literal}
tinyMCE.init({ // General options mode
: "textareas", theme : "advanced",
plugins :
"safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 :
"save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_toolbar_location :
"top", theme_advanced_toolbar_align :
"left",
theme_advanced_statusbar_location :
"bottom", theme_advanced_resizing :
true,
// Example content CSS (should be your
site CSS) content_css :
"css/content.css",
// Drop lists for
link/image/media/template dialogs
template_external_list_url :
"lists/template_list.js",
external_link_list_url :
"lists/link_list.js",
external_image_list_url :
"lists/image_list.js",
media_external_list_url :
"lists/media_list.js",
// Replace values for the template
plugin template_replace_values : {
username : "Some User", staffid :
"991234" } }); {/literal}`
the problem is solved by using
document.domain = 'mydomain.com';
above where one is intializing the tinymce script in tpl file.
and uncommenting the document.domain = 'mydomain.com'; in tiny_mce_popup.js file.
Related
I'm trying to line up my dev server output with a local project for debugging. PhpStorm support couldn't find out what the issue was as we worked on it though.
The issue with the current config is that it seems to pull up the output / bundle file in the IDE, instead of keeping to the source code files.
I'm mapping "remote" urls to what I see in Chrome under sources > webpack > .
The result (see top left pane):
And before the above, the bundle file is the first stop in the debugger before I click resume (it opens on its own in the editor):
On the browser side, Chrome pauses script execution, but also jumps to the sources tab into a hard to read file, probably something compiled by webpack.
Here is my webpack config. Does anyone see what settings I have misconfigured? This is a React.js project (custom webpack config, create-react-app not used)
const webpack = require("webpack");
const dotenvWebpack = require("dotenv-webpack");
const path = require("path");
module.exports = {
entry : {
adminArea :
['./adminSettingsArea/src/index.jsx']
},
output : {
filename : 'shared/[name].bundle.js',
path : path.resolve(__dirname, ''),
publicPath : "/",
},
devtool: 'source-map',
devServer : {
contentBase : './adminSettingsArea/src',
hot : true,
historyApiFallback : true
},
plugins : [
new webpack.HotModuleReplacementPlugin(),
new dotenvWebpack()
],
module : {
rules : [
{
test : /\.(js|jsx)$/,
exclude : [/node_modules/, /vendor/],
use : {
loader : "babel-loader",
options : {
presets : [
'#babel/preset-env',
"#babel/preset-react"
]
},
}
}, {
test : /\.css$/i,
use : ['style-loader', 'css-loader'],
}
],
},
};
I'm using grunt-contrib-jasmine to do testing with Marionette. My specs pass but I get this error: 'Error: An "el" header must exist in DOM' at the Marionette source. I can't track down the problem
My grunt config is:
jasmine : {
src : [
'common/js/app.js',
'common/js/model/*.js',
'common/js/collection/*.js',
'common/js/view/*.js',
'common/js/route/route.js'
],
options : {
'--web-security' : false,
'--local-to-remote-url-access' : true,
'--ignore-ssl-errors' : true,
specs : 'test/spec/*.js',
vendor: [
'bower_components/jquery-2.1.0.min/index.js',
'bower_components/jasmine-jquery/lib/jasmine-jquery.js',
'bower_components/sinonjs/sinon.js',
'bower_components/jasmine-sinon/lib/jasmine-sinon.js',
'bower_components/underscore/underscore.js',
'bower_components/bootstrap/dist/js/bootstrap.min.js',
'bower_components/backbone/backbone.js',
'bower_components/handlebars/handlebars.js',
'bower_components/marionette/lib/backbone.marionette.min.js'
],
host: 'http://localhost:3000'
}
I know it's possible to require other modules, but how can you tell aura to process a module as an extension?
Background:
For a large project I'm working on, I'm using aura extensions to modify a jQuery instance I'm keeping in the app's sandbox. A typical extension would look something like this, where plug1 and plug2 are jQuery plugins.
define({
require : {
paths : {
'jquery.plug1' : 'lib/plug1',
'jquery.plug2' : 'lib/plug2'
},
shim : {
'jquery.plug1' : {
exports : 'jQuery'
},
'jquery.plug2' : {
deps : ['jquery.plug1'],
exports : 'jQuery'
}
}
},
initialize : function(app) {
var $ = app.sandbox.$;
$ = require('jquery.plug1');
app.sandbox.$ = require('jquery.plug2');
}
});
For tightly coupled plugins I can specify dependencies as shown here, but I'd rather avoid this for more loosely coupled components.
I have written my own custom plugin for inserting images in CKEDITOR. I disable the image button in toolbar . I use the editor.insertHtml() function to insert the image from my custom plugin . When I remove the standard image button from the toolset it disables insertion of image tag in the CKEDITOR box . All other html tags are accepted but for the <img/> tag .
This is my config(without the 'Image' in config.toolbar) :
CKEDITOR.editorConfig = function( config )
{
CKEDITOR.plugins.addExternal('insert_blank','http://localhost:3000/assets/ckeditor/plugins/insert_blank/', 'plugin.js');
CKEDITOR.plugins.addExternal('qimage','http://localhost:3000/assets/ckeditor/plugins/qimage/', 'plugin.js');
config.extraPlugins = 'insert_blank,qimage' ;
config.toolbar =
[
{ name: 'basicstyles', items : [ 'Bold','-','Italic' ] },
{ name: 'insert', items : [ 'insert_blank.btn','-','qimage.btn'
] },
];
config.keystrokes = [
[ CKEDITOR.CTRL + 75, 'InsertBlank' ],
[ CKEDITOR.CTRL + 85, 'qimage' ],
];
config.height = 300 ;
config.width = 350 ;
config.removePlugins = 'elementspath,resize' ;
};
Is there a way to enable image tag insert ?
UPDATE : Worked by adding the following command to the config file :
config.allowedContent = 'b i img[!src,alt,width,height]' ;
Have you read how to integrate plugin with Allowed Filter Content? You need to define that your plugin adds button/command which allow img tag and its attributes. You can also define which tag and its attributes are definitely required for this button/command to be enabled, what will activate/deactivate it when someone will set config.allowedContent.
What you need is just to enable the img[src] attribute.
So you should use config.extraAllowedContent = 'img[src,alt,width,height]';
the config.allowedContent will override all the others DOMs.
I have an instance of CKEditor 3.6.3 set up like this:
CKEDITOR.replace("notice_text", {
toolbar : "Mini",
enterMode : CKEDITOR.ENTER_BR,
fillEmptyBlocks : false,
forcePasteAsPlainText : true,
skin : "office2003",
width : 375,
height : 100
});
For this textarea:
<textarea id="notice-text" name="notice_text" rows="5"></textarea>
Mini is a toolbar defined in the config.js.
All the settings in replace work fine except forcePasteAsPlainText.
However, when I set forcePasteAsPlainText in the config.js it works. Like so in the config.js:
config.forcePasteAsPlainText = true;
Setting it in the config.js applies it to all CKEditors on the site and I wanted it to apply to this one textarea.
I took a look at the CKEditor changelogs and didn't see anything that would address this with an update.
I thought you could set it in the replace function. Is that not possible or am I missing something?
Add removePlugins : "pastefromword" to your config.
CKEDITOR.replace("notice_text", {
toolbar : "Mini",
enterMode : CKEDITOR.ENTER_BR,
fillEmptyBlocks : false,
forcePasteAsPlainText : true,
skin : "office2003",
removePlugins : "pastefromword" ,
width : 375,
height : 100
});
This force exists plugin pastetext in your config, and pastefromword not exists in. Run again ==> Its work!